【元記事：アンテナをページの右に表示する一法：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;}
と書き加えておきます。
