« ココログのカスタムCSSの編集 | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ~ »

2008年1月22日 (火)

ココログのカスタムCSSの編集~タイトルの飾りつけ~

ココログのカスタムCSSの編集機能を使って、毎日のブログタイトルに飾りをつけたいと思います。記事に飾りをつけるときは、自分で決めたセレクタ名をHTMLで指定することができました。ところがブログタイトルのHTMLソースはいじれません。つまりセレクタ名を自分で決めて、スタイルシートを書いたとしても、それをブログタイトルに適用することができないわけです。

では、ブログタイトルにカスタムCSSが適用できないのかというとそうではありません。実はブログタイトルにはセレクタが決められているのです。そのセレクタを使ってカスタムCSSを書いてあげればいいわけです。

  • ブログタイトルのセレクタの調べ方
    1. ブラウザで自分のブログを表示する
    2. ブラウザでソースを表示
      IE7の場合:「ページ」メニュー→「ソースの表示」
      FireFoxの場合:「表示」メニュー→「ページのソース」
    3. ブログタイトルの文字列を探す
      このブログの場合次のようなタグが見つかります。

      <h3 class="entry-header"><a href="http://shirabemono.cocolog-nifty.com/blog/2008/01/post_b2c8.html">ココログのカスタムCSSの編集</a></h3>

    4. タグ"h3"とclass"entry-header"を"."でつないだものがセレクタになります。つまり、セレクタは"h3.entry-header"となります。
  • ブログタイトルの飾りつけ
    次のようなCSSを書いて、このブログに適用しました。

      h3.entry-header{
         border-width:2px 1px 1px 0.6em;
         border-color:#339900;
         border-style:inset double;
         background-color:#EEEE99;
         padding:0.2em 0 0 0.2em;
      }

    結果はこのブログのタイトルのようになります。なお、ブログタイトルのセレクタは毎日同じなので、CSSを適用すると過去から未来永劫同じスタイルが適用されます。

追記(2008/1/30):
ブログタイトルのスタイルを変更しました。
詳細はこちら

« ココログのカスタムCSSの編集 | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ~ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/17788723

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~タイトルの飾りつけ~:

« ココログのカスタムCSSの編集 | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ~ »