アンテナをページの右に表示する一法

【元記事:アンテナをページの右に表示する一法:d:id:manpukuya:20040222:p3

はてなアンテナを、ページの右側に表示する方法の一つを紹介します。これは、ヘッダ部分にいろいろな内容を盛り込んでいて、かつキーワード「sidebar」の内容を読んでもうまくいかなかった方向けの方法です。

まずキーワード「antennaモジュール」をご覧いただき、「main」クラスと「sidebar」クラスのdiv要素を追加します。このとき、ヘッダに追加する内容はヘッダの最後に、フッタに追加する内容はフッタの最初に追加してください。使っているテーマが「はてなダイアリーsidebar利用可能テーマ」であれば、これだけでアンテナがページの右や左に表示されるでしょう。

それ以外のテーマを使っているか、テーマを使っていない場合は、スタイルシート

div.main {width:70%;float:left;}
div.sidebar{width:25%;float:left;position:static;}

と入れれば、アンテナが右側に出ると思います。「70%」と「25%」は、合計が90%程度になる範囲で、お好みに変えてみてください。この方法は、キーワード「sidebar」の「floatを使うパターン」を参考にしています。

アンテナをページの左に表示するには、「left」をすべて「right」にし、

div.main {width:70%;float:right;}
div.sidebar{width:25%;float:right;position:static;}

と書けばよいでしょう。

フッタに、アンテナのほかにもなにか表示している場合、その内容がページの上に来ないよう指定しなければなりません。たとえばカレンダーモジュールをフッタにも置く場合、フッタの「<hatena name="antenna"></div>」に続けて、

<hatena name="calendar">

と書くでしょう。こうした場合、スタイルシート

div.calendar{clear:both;}

と書き加えておきます。