masahirorの気まま記録簿

個人的な出来事や意見、生活などの記録を思うままにブログに記録

デル株式会社
マウスコンピューター/G-Tune

再び3段カラムに

自分のブログ(はてなダイアリー)のデザインを再び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で崩れてないからいいけど。