レイアウト調整中（はてなダイアリーで３段カラムに挑戦）

sidebarを左右に（三段カラム）: http://guide.g.hatena.ne.jp/smoking186/20000203

という方法があったので、現在自分のブログのレイアウトを再構築中。
メニューの項目が増えてきたので３段カラムにしてみたい。~~昨日は、そのためにフォントを小さくするところまでやった。完了するまでは多少見辛いかも。~~→とりあえず完成。
自分が使ってるスタイルシートのテーマ「Nabla」の場合、上記スタイルシートをそのままデザインの「スタイルシート」の項目に設定するだけでは、画面の端と左右のメニューに結構な隙間が開いてしまい（上のブログタイトルと幅が合わない）、さらにメニューと本文の間にも不自然な隙間が開いてしまうので、多少改変しました。

div.hatena-body {
 position:relative;
 width:auto;
}

* html div.hatena-body {
 width:100%;
 top:0px; left:0px;
}

div#main {
 margin:auto 20% auto 20%;
 width:auto;
}

div#menu1 {
 position:absolute;
 top:0px;
 left:0px;
 width:19%;
 font-size:small;
}

div#menu2 {
 position:absolute;
 top:0px;
 right:0px;
 width:19%;
 font-size:small;
}

「div#menu1」と「div#menu2」から

 padding:1em;

を削っています。
これをスタイルシートで定義し、ヘッダ＆フッタから

<div class="main">

を

<div id="main">

に書き換え、同様に

<div class="sidebar">

を

<div id="menu1">

に書き換える。フッタの最後に

<div id="menu2">

を記述し、それ以降に表示させたいはてなモジュールを設定すると３段カラム完成。

また、同じく「Nabla」のまま３段カラムにしてしまうと、フォントが大きくて折り返しが多くなり、見た目にもあまりよろしくない。「Nable」自体は気に入ってるので、これを生かしたまま本文とメニューの内容の文字を小さくしました。以下ソースをスタイルシートに追加。

div.section p {
	font-size: 90%;
}
div.section ul {
	font-size: 90%;
}
div.section ol {
	font-size: 90%;
}
div.comment {
	font-size: 90%;
}
div.refererlist {
	font-size: 90%;
}

div.hatena-modulebody {
	font-size: 90%;
}

こっちは色んなサイトでどういう風に使われてるか参考にしながら、一応は自分で考えてみました。今のところ表示に問題は無いみたいだけど、合ってるかどうかも分からんし設定が足らないかもしれない。
スタイルシートはほとんど知らないから、こうやって少しずつ覚えていかないといけないなぁ。

【追記】

とりあえずレイアウト変更完了。左に自分のブログ関連のメニュー、右にはてなブックマークやアンテナ、はてなダイアリー内で言及の多いURLなど、巷で話題・個人的に興味のある外部ページのリンクが出るようにした。
逆に見にくくなったかなぁ・・・しばらく様子見。
（2005/11/25はてブで指摘があったので、80%→90%に変更しました）

【おまけ】

「最近巷で人気のページ（BookMark）」や「最近自分が気になったページ」を右メニューに表示させています。「最近自分が気になったページ」は自分のはてなブックマークから瞬時に反映され表示されます。これはRSSモジュールを使用しています。
「最近自分が気になったページ」の場合は、ヘッダかフッタの表示させたい場所に

<hatena moduletitle="お好きなメニューのタイトル名" name="rss" url="http://b.hatena.ne.jp/UserID/rss" template="hatena-module" listlimit="20">

といった感じで、RSS出力対応のページであればどこでも利用可能です。
参考までに「最近巷で人気のページ（BookMark）」は「最近の人気エントリー」のRSSより取得しています。

<hatena moduletitle="お好きなメニューのタイトル名" template="hatena-module" listlimit="20" type="title" name="rss"  url="http://b.hatena.ne.jp/hotentry?mode=rss">

といった感じ。要は以下を書き換えるといくらでも追加可能。

「moduletitle="〜"」・・・モジュールとして先頭に表示されるタイトル名
「url="〜"」・・・・RSSのURI。はてな内部であれば、ほとんどのサービスがRSSに対応してるので、ページ先頭あたりにある「RSS」のアイコンをクリックして、リンク先のURIを書けばよい。はてなRSSとかもパブリックであれば可能。
「listlimit="〜"」・・・何件表示させたいか。

それ以外はいじらず、そのままで問題なし。
これを追加するだけで、かなり動的なページレイアウトとなる。見る時間によって、サイドバーで表示されるリンクが毎回変わっている。
しかも、ダイアリー上に表示させることで、多数のページへのリンクでSEO対策ともなり、直接クリックしてそのサイトに行くことでリファラが送られ、開かれた先のサイトの管理人さんが遊びに来てくれるかもしれません。