タグ: Webサンプル

Webサイトなどで使用できそうなサンプルコードの紹介やアイデアなど。Webのコードというものは一部の特殊な処理や難しいものを除けば自由でみんなが遣い回せるところは共有しあって実現したいことを簡単に行えるようにしておきたいところ。

サンプルのコードがあれば、それを組み合わせること・アレンジするに力を注いで、やりたいことをやればいい。

サンプルのコードは、他の先人の知恵をもとに活用したり、あるいはそれよりも良いものが見つかったならば、新しく共有するというのもいい。共有する、使えるソースコードを紹介するということ、それはそれで先人に対する敬意や感謝の違った形での表現でいいと思う。

    HTML+CSSでfocus時にoutline(外枠)を表示しないようにする方法

    inputタグやスライダーなどを選択している時に表示される外枠。こちらはoutlineというプロパティ。デフォルトだと表示される設定になっているが、見せたくない場合もある。そういった時はnoneとしてあげることでリセットできる。 inputのCSS 例 input:focus{ outline: none; } :focusという擬似クラスがあるので、設定すると気になるアウトラインが消せる。 *:focus{ outline: none; }

    WordPressで現在表示している固定ページに属する子ページの一覧を表示するコードサンプル

    固定ページはコンテンツページとしてよく利用します。ただ、カテゴリーが無いため、メニューからたどって行くことが難しいケースがあります。現在表示している固定ページに子ページとして属することが可能ですが、その機能とテンプレートまたはコードサンプルを使って、親ページを開いたときに、子ページが表示できるよう実現するサンプルや考え方を紹介しています。 固定ページのテンプレートファイルにしたいときはこのコ...

    PHPで特定のディレクトリ内に配置されている特定の拡張子のファイル権限を変更するコードサンプル

    ここで紹介しているコードは使い方や指定の方法・コードの書き方によっては大変危険なコードです。ご注意ください。 PHP サンプルのコードは、このPHPを開いたときに処理が行われます。ファイルの権限に関する処理なので注意が必要です。このPHPからみて、blog/images内の.jpgファイルの権限を変更しています。 <?php $targetDir = dir("blog/images"); $i = 0; while (($targetFile = $targetDir->read()) !== ...

    WordPressのプラグイン:Search Regexを使って、通常の検索置換・正規表現で検索置換

    はじめに ※ちゃんとバックアップとってね※自己責任で※都合の悪いパターンもあるので注意 通常の検索置換 httpからhttpsに変換 自分のサイトにリンクを貼っているパターン。 検索パターン <a href="http://example.com 置換パターン <a href="https://example.com 正規表現の検索置換 |検索パターン| と入力し、||のパイプ文字で必ず囲むようにする。 同じ1行内に同じパターンが何度も...

    functions.php 本文で使用するタイトルを変更する

    WordPressで、各ページのタイトルを、プラグインを使わず、function.phpで実現する。 /* * 本文で使用するタイトルを変更 */ add_filter( 'get_the_archive_title', function ($title) { if ( is_category() ) { $title = single_cat_title('',false); } elseif ( is_tag() ) { $title = single_tag_title('',false); } elseif ( is_tax() ) { $title = single_term_title('',false); } elseif ( is_post_type_archive() ){...

    Movable TypeからWordPressに移行した時の.htaccess

    RewriteEngine on トップページ RewriteRule ^old/$ /new/ [R=301,L] 投稿 RewriteRule ^old/(.*).html$ /new/$1/ [R=301,L] カテゴリー ※catname1、catname2、exampleは例:カテゴリURLが指定されているパターン cat1は自動割当のカテゴリー名cat+数値 RewriteRule ^old/catname1/$ /new/category/catname1/ [R=301,L] RewriteRule ^old/catname2/$ /new/category/catname2/ [R=301,L] RewriteRule ^old...

    HTML+CSSで高さを揃えて、縦横の中心に表示する方法

    HTML <div class="list"> <ul> <li><a href="#"><span><img src="images/img-1.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-2.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-3.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-4.png" alt=""><...

    HTML+CSSでgridを使ったレイアウト方法/サンプル・活用方法

    10×10のグリッドのサンプル例。 HTML <div class="sample-grid"> <div class="grid header">header</div> <div class="grid sub1">sub1 <ul> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> </ul> <ul> <li><a hre...

    HTML+CSSでボックス内の文字を改行・折り返して表示させる時

    東アジア圏の日本などの国からすると改行なんて単語の途中で折れても大した問題ではないが、海外だと読みづらいのか、ちょうどいいところで改行できないことがある。 ボックス内で文字が折り返さずに表示されるとデフォルトのvisibility:visible;のせいで、文字がボックスの領域からはみ出して表示されてしまうケースがある。改行を禁止していたり、改行の判断が難しい際に起きるみたい。 強制的にすべて改行・折り返す...

    HTML+CSSでflexで可変overflowを実現する方法

    なんと言えばいいのか、うまく言葉にできなかったので、いろいろ文字揺れはあるだろうから、こういうのを実現したいときのアイデア。 やりたかったこと display:flexを使っているdisplay:flexを指定しているboxは可変display:flexを指定している子要素は、固定幅左から右にflex-wrapせずに表示overflowしたいスクロールバーを表示する ということ。HTML、CSSに詳しくない人が、例えば商品の一覧で、フリックできるよ...