Blog × Play Under World

カテゴリー: Web

  • floatさせた子要素が親要素からはみ出す現象を回避する

    Webサイトを制作していて、親要素に背景色などを指定し、その子要素をfloatさせた時とかにfloatさせた子要素が親要素からはみ出すという現象に遭遇されることは結構あると思います。

    これを解決するために空のdivやbrなどにclear:bothをクラス指定してみたり。
    それでも見た目上はOKなんですが、作っている本人としてはなんだか精神衛生上あまり良くなかったりするわけです。

    これを解決してくれるのがclearfix。知っておくと便利です。

    clearfixの設定方法

    親要素に対してCSSで以下のように指定します。

    [css]
    .clearfix:after {
    display: block;
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    }

    .clearfix {display:inline-block;}

    /*Hides from IE-mac\*/
    * html .clearfix{height:1%;}
    .clearfix{display:block;}
    /*End hide from IE-mac*/
    [/css]

    :after擬似要素を利用して、親要素の直後にcontentプロパティで仮コンテンツを挿入しclear:bothでfloatをクリアさせています。
    いやはや、凄いですね。

  • WordPressでエントリーの総数を表示する

    WordPressのエントリーの総数を表示するコードの紹介です。

    WordPressをちょちょいと使いやすくする15のスニペット

    コードは以下。

    [php]
    <?php $numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = ‘publish’ AND post_type = ‘post’");
    if (0 < $numposts)
    $numposts = number_format($numposts);
    echo $numposts.’ posts.’;
    ?>
    [/php]

    これでエントリーの総数が100件なら『100posts.』と表示されます。

    表示を変える場合は最後の
    [php]
    echo $numposts.’posts.’;
    [/php]
    を、
    [php]
    echo $numposts.’件のエントリーがあります。’;
    [/php]
    のようにすると『100件のエントリーがあります。』と表示されます。

  • WordPressで最終更新日時を表示する

    タイトル通り、Wordpressで最終更新日時を表示する方法です。

    WordPressで日時を表示させるときには『the_date()』もしくは『the_time()』タグが通常使われます。
    the_dateは、同じ日付で複数のエントリーがある場合、最初のエントリーにしか日付が表示されません。変わりに the_timeを使えば、各エントリーごとに日時を表示することが出来ます。

    では、投稿日時ではなく、最終更新日時を表示させたいときは？

    最終更新日時の表示方法

    最終更新日の表示には『the_modified_date』もしくは『the_modified_time』というテンプレートタグを使用します。

    the_modified_date

    Examples:

    [php]
    <?php the_modified_date(); ?>
    [/php]
    April 2, 2010
    デフォルトは the_modified_date(‘F j, Y’) を出力します。

    [php]
    <?php the_modified_date(‘F j, Y’); ?> at <?php the_modified_date(‘g:i a’); ?>
    [/php]
    April 2, 2010 at 10:08 pm
    日付＋時間。

    [php]
    <?php the_modified_date(‘j\<\s\u\p\>S\<\/\s\u\p\> M Y’); ?>
    [/php]
    2nd Apr 2010
    supタグで上付き文字を表現。

    the_modified_time

    Examples:

    [php]
    <?php the_modified_time(); ?>
    [/php]
    April 2, 2010
    デフォルトは the_modified_time(‘F j, Y’) を出力します。

    [php]
    <?php the_modified_time(‘g:i a’); ?>
    [/php]
    10:08 pm
    12時間表示(am/pm)

    [php]
    <?php the_modified_time(‘G:i’); ?>
    [/php]
    22:08
    24時間表示

  • CSS3を使ったZEBRA STRIPING

    CSS3を使ってリストなどをゼブラ柄してしまおうというテクニックをエントリーします。
    名付けて『CSS3 ZEBRA STRIPING』。まんまですね…

    まずはデモページを用意しましたのでご覧になってください。

    ゼブラ柄リストの作り方

    ボディー内に以下のコードを書き込みます。いたってシンプルな普通のリストです。

    [html]
    <ul>
    <li>リスト1項目</li>
    <li>リスト2項目</li>
    <li>リスト3項目</li>
    <li>リスト4項目</li>
    <li>リスト5項目</li>
    <li>リスト6項目</li>
    <li>リスト7項目</li>
    <li>リスト8項目</li>
    <li>リスト9項目</li>
    <li>リスト10項目</li>
    </ul>
    [/html]

    次は、このシンプルなリストの奇数番のリストタグ（<li>）に対してCSSでスタイリングします。

    [css]
    li:nth-child(2n+1) {
    background: #FFF;
    }
    [/css]

    なんとこれだけ！
    このテクニックだと、何百項目もの長いリストがある場合や、リストの項目数が動的に変化するサイトにも対応できます。

    この便利な『nth-child』は今回使ったリストタグ（<li>）だけでなく、その他のHTMLタグや、適用するクラスの内容（スタイル）も背景色以外のものに変えることによって、いろいろと汎用性はあるのでアイデア次第でいろいろ出来ると思います。
    nth-child(10n+1)で10個おきとか、nth-child(7n+1)はカレンダーとかに使えそう。デモページではコメント欄に応用しています。

    それにしても、デモページのコメント欄は、偶数番目のスタイルを変えてるからほんとは『nth-child(2n)』じゃないといけないんだけど、何でか『nth-child(2n+1)』で偶数番目のスタイルが変わるって言うのは秘密の話。

  • WP-PageNaviを使わずナビゲーション表示

    WordPressの通常のページナビゲーションは「« Previous Page　Next Page » 」と表示されるだけで、今見ているページがエントリー全体の何ページ目で、あとどのくらいのエントリーがあるのかが直感的に把握できません。
    そこで、ユーザビリティ・アクセシビリティの向上という点で人気のあるのが『WP-PageNavi』というプラグインです。

    Example:

    Pages (17): [1] 2 3 4 » ... Last »

    今回はプラグインを使わずに直感的にわかりやすいページナビゲーションを表示させる方法です。

    WP-PageNavi を使わずにナビゲーション表示

    PageNaviの表示方法

    下記のコードを使用中のテーマ内のfunctions.phpに書き加えます。

    [php]
    <?php
    function bmPageNav() {
    global $wp_rewrite;
    global $wp_query;
    global $paged;

    $paginate_base = get_pagenum_link(1);

    if(($wp_query->max_num_pages) > 1):
    if (strpos($paginate_base, ‘?’) || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = ”;
    $paginate_base = add_query_arg(‘paged’, ‘%#%’);
    } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == ‘/’ ? ” : ‘/’) .
    user_trailingslashit(‘page/%#%/’, ‘paged’);;
    $paginate_base .= ‘%_%’;
    }
    $result = paginate_links( array(
    ‘base’ => $paginate_base,
    ‘format’ => $paginate_format,
    ‘total’ => $wp_query->max_num_pages,
    ‘mid_size’ => 5,
    ‘current’ => ($paged ? $paged : 1),
    ));
    echo ‘<p class="pageNav">’."\n".$result."\n</p>\n";
    endif;
    }
    ?>
    [/php]

    下記のコードをページナビゲーションを表示させたいテンプレートに書いて呼び出します。

    [php]
    <?php bmPageNav(); ?>
    [/php]

    以下は、CSSでのスタイリング例。

    [css]
    .pageNav {
    color: #2583ad;
    background:white;
    margin: 1em auto;
    line-height:2em;
    text-align:center;
    }

    a.page-numbers, .pageNav .current {
    color: #00019b;
    padding: 2px .4em;
    border:solid 1px #ccc;
    text-decoration:none;
    font-size:smaller;
    }

    a.page-numbers:hover {
    color:white;
    background: #328ab2;
    }

    .pageNav .current {
    color: white;
    background: #328ab2;
    border-color: #328ab2;
    font-weight:bold:
    }

    .pageNav .next, .pageNav .prev {
    border:0 none;
    background:transparent;
    text-decoration:underline;
    font-size:smaller;
    font-weight:bold;
    }
    [/css]

    プラグインを必要最小限にしたい方にオススメです。