ココログのカスタムCSSの編集機能を使って、毎日のブログタイトルに飾りをつけたいと思います。記事に飾りをつけるときは、自分で決めたセレクタ名をHTMLで指定することができました。ところがブログタイトルのHTMLソースはいじれません。つまりセレクタ名を自分で決めて、スタイルシートを書いたとしても、それをブログタイトルに適用することができないわけです。
では、ブログタイトルにカスタムCSSが適用できないのかというとそうではありません。実はブログタイトルにはセレクタが決められているのです。そのセレクタを使ってカスタムCSSを書いてあげればいいわけです。
- ブログタイトルのセレクタの調べ方
- ブラウザで自分のブログを表示する
- ブラウザでソースを表示
IE7の場合:「ページ」メニュー→「ソースの表示」
FireFoxの場合:「表示」メニュー→「ページのソース」
- ブログタイトルの文字列を探す
このブログの場合次のようなタグが見つかります。
<h3 class="entry-header"><a href="http://shirabemono.cocolog-nifty.com/blog/2008/01/post_b2c8.html">ココログのカスタムCSSの編集</a></h3>
|
- タグ"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):
ブログタイトルのスタイルを変更しました。
詳細はこちら