Blog × Play Under World

ブログ

  • MAC版FirefoxでGoogle Toolbarが動作しない

    先日から突然Firefox(Mac日本語版 3.6.8)のGoogle Toolbarが動作しなくなってしまっていたのですが、暫定的ですが対応策がようやく見つかったのでメモしておきます。

    対応策：

    1. Firefoxのアドレスバーに「about:config」と入力しFirefoxの詳細設定画面を開きます。
    2. 「general.useragent.locale」を探します。一番上に検索フォームに「general.useragent.locale」と入力するとすぐに見つかります。
    3. 値が「ja-JP-mac」となっているのを「ja-JP」に変更します。
    4. Firefoxを再起動します。

    とりあえず、以上の方法でGoogle Toolbarは正常に動作するようになりました。
    たぶんGoogle Toolbarの不具合だと思うので、この不具合が解消されたら変更した値を元に戻しても良いかもしれません。

  • CSS3の border-radius で角丸を表現

    今まで画像を使って表現していた角丸を簡単に表現できてしまうプロパティが border-radius です。
    ということで使い方の紹介。

    デモページ

    今現在はOperaは border-radius、 Safari、Google Chrome は -webkit-border-radius、Firefox は -moz-border-radius と指定するようになってます。
    残念ながら IE は border-radius による角丸は表現できません…

    まずは全てまとめて10pxの角丸を指定してみます。

    Example1:

    [css]
    .example1 {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }
    [/css]

    各角を別々に指定する場合は以下のように指定します。

    Example2:

    [css]
    .example2 {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 40px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 40px;
    }
    [/css]

    borderの要素を変えることも出来ます。
    ※全てまとめて10pxの角丸を指定しています。

    Example3:

    [css]
    .border1 {
    border: 5px solid #CCC;
    }
    .border2 {
    border: 5px dotted #CCC;
    }
    .border3 {
    border: 5px dashed #CCC;
    }
    .border4 {
    border: 5px double #CCC;
    }
    .border5 {
    border: 5px groove #CCC;
    }
    .border6 {
    border: 5px inset #CCC;
    }
    .border7 {
    border: 5px ridge #CCC;
    }
    .border8 {
    border: 5px outset #CCC;
    }
    [/css]

    どうしても IE で角丸を表現したい場合はJavascript等で実装させます。

    border-radius.js – JavaScript ライブラリー – HTML5.JP

    ※IE8には未対応みたいです。

    Curved corner (border-radius) cross browser | HTML Remix

    ※IE6, 7, 8に対応しています。

  • 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時間表示