今更、という感じもしますが、はてなのヘルプとかではいまいち関連情報が見つけられなかったんでメモしておきます。まあ、できなくてもそんなに問題は無いのですけれど、デザインが統一されてる方が綺麗なものもありますしね。
はてなダイアリではサイドメニューに追加できる項目(はてなモジュール)が色々用意されていて、それらに関しては選択したテーマやスタイルのCSSが自動的に適用されますが、それ以外の要素(例えばTwitterのスクリプトとか)を追加する場合、そのまま編集画面でHTMLやスクリプトを書き足しただけではもちろん同じCSSは適用されないので、デザインが不揃いになってしまいます。
そのような要素にはてなモジュールと同じCSSを適用させるためには、適切なクラスを指定する必要があります。具体的には次のように書きます。
<div class="hatena-module"> <div class="hatena-moduletitle"> 要素のタイトル </div> 追加する要素の内容(スクリプトなど) </div>
これで、自分の好きな要素を自由にはてなモジュールのスタイルで追加することができます。例えば、このブログのサイドメニューにある、"Twitting"というタイトルの要素は、Twitterのスクリプトを上記のやり方ではてなモジュールのように表示させています。
ちなみに、リストの仕方は"hatena-modulebody"というクラスで定義されているので、リストのスタイルも合わせる場合は、さらにそれを書き込む必要があります。例えば、オリジナルのリンク集を追加したい場合などは、
<div class="hatena-module"> <div class="hatena-moduletitle"> リンク集 </div> <div class="hatena-modulebody"> <ul> <li><a href="">サイト1</a></li> <li><a href="">サイト2</a></li> ... </ul> </div> </div>
のようにデザイン設定画面で書き込めば、コメントモジュールやトラックバックモジュールと同じスタイルでオリジナルのリンク集を追加することができます。
こういう部分で本当にCSSって楽だよなあ、と実感させられますよね。