自分のブログ(はてなダイアリー)のデザインを再び3段カラムにしてみた。
3段カラムのやり方は、以下を参照。
今回は、はてなダイアリーの公開テンプレート「90」で3段に挑戦。ただ、単純に3段に増やすだけだと少しデザインがおかしかったので調整。
以下、詳細デザイン設定で設定した分を覚え書き。
まず、ヘッダを変更。
<!-- <div class="main"> --> <div id="main">
フッタに「leftbar」の領域を追加。この部分が右側に表示される。
<div class="leftbar"> 追加するモジュール </div>
あとはスタイルシートに、デザインがきちんとなるよう追加。
ついでに、「90」のデザインだとページ全体の横幅が短めに設定されていたので、画面いっぱいになるよう変更。
※ここから先は「90」デザイン専用
/* mainの幅を再設定 */ div#main { padding: 30px 0 0 0; margin:auto 200px auto 200px; width:auto; } /* 右バーの設定(左バーと似たような形に) */ div.leftbar{ position:absolute; top:-1px; left:0px; font-size:small; right: 0px; width: 180px; padding: 7px 5px; margin: 0; font-size: 90%; text-align: left; background-color: #f9f9f9; border-right: solid 1px #606060; border-bottom: solid 1px #606060; } .hatena-body{ position: relative ; margin: 0 15px 0 0; padding: 0; width: auto; _width: 100%; } /* ブログタイトルの幅を変更 */ h1 { font-family: "Trebuchet MS",osaka,sans-serif; text-align: left; line-height: 1.2; font-size: 200%; font-weight: bold; margin: 15px 15px 0 0; letter-spacing: 0.2em; background-color: #f9f9f9; padding: 40px 30px 40px 10%; border-top: solid 1px #606060; border-right: solid 1px #606060; border-bottom: solid 1px #606060; color: #000000; } /* preタグの折り返しがおかしくなったので追加 */ pre { border: solid 1px #606060; background-color: #fcfcfc; margin: 1em 1em; padding: 0.5em; white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */ }
コメントを入れているが、IE6とかでおかしくなる場合があるので設定時は消した方がいいかも。
また、一部「90」のCSSですでに定義されているものを再定義(上書き)する形になっているが、これはCSS的にいいのだろうか・・・とりあえずIEとFirefoxで崩れてないからいいけど。