テツモグラはいつももがいてます

はてなダイアリー「鉄道旅行とは巡ること」からの移行ブログです。鉄道を含む交通機関関連がメインだけれど実際には雑多ネタ。

サイドバーが本文に重なってしまうのを解消する。

テーマ「Hatena」を日記テーマに指定し、
何もせずにサイドバーにモジュール類を入れると(フッタの記述欄にモジュール指定をすると)、
Zaurus搭載の「NetFront v3.0」ではサイドバーが本文に重なってしまいます。
これを取る方法が分からず、二年ほど考えていましたが、
ふと「はてなダイアリーガイド」を見ていて、
「サイドバー非対応のテーマでサイドバーを出す方法が載っていたな」
と思い出し、試しに該当ページを見ながら以下のようにしてみると、ちゃんと表示されました。

/*
 div.main {
	margin-left: 25%; }

div.sidebar {
	position: absolute;
	top: 120px;
	left: 0px;
	width: 20%;
	margin-right: 1%; }
*/

div.section {     background-color:silver;
                  font:1.0em; } 

span.highlight {  color: black;
                  background-color: yellow; }

img.photo {       float:left;
                  margin:1.0em;
                  border:none; }

a.keyword {       text-decoration: none;
                  border-bottom: 1px solid gray; }

a.href {          background-color: olive;
                  border-bottom: 1px dashed black; }

h1 { border-top : 1px solid black;
     border-bottom : 1px solid black; }


/*から*/までの部分がガイドからの転用分。
サイドバーが重なっていたのは、
サイドバーを示すdiv.sidebarクラスの表示位置がウィンドウからの絶対位置指定となっていて、
日記本文クラス(div.main)に造られたマージンの上に重ねていたから。
これでは回り込みを指定するfloatを使っても意味がありません。
とりあえずtopに120px、widthに20%、margin-rightに1%を指定して、
mainクラスのmargin-leftを25%としました。leftはいじくっていません。
背景色はsidebarにパディングを指定し、その上で塗らないとまずそう。

詰めの変更は単位系の変更。

しかしこれでもまだ甘い。
サイドバーの位置指定が絶対座標(px)指定なので、
文字の大きさを変えると重なってしまう恐れがあるのです。
positionの値はabsoluteですが、
em(文字基準)や%(元のウィンドウに対する割合)を指定しても良さそう。
試しにやってみます。ん、何とかいきそう。

 div.main {
	margin-left: 25%; }

div.sidebar {
	position: absolute;
	top: 20%;
	left: 0px;
	width: 20%;
	margin-right: 1%; }

div.section {     background-color:silver;
                  font:1.0em; } 

span.highlight {  color: black;
                  background-color: yellow; }

img.photo {       float:left;
                  margin:1.0em;
                  border:none; }

a.keyword {       text-decoration: none;
                  border-bottom: 1px solid gray; }

a.href {          background-color: olive;
                  border-bottom: 1px dashed black; }

h1 { border-top : 1px solid black;
     border-bottom : 1px solid black; }

練る時間なのでここまでにしますが、
もう少しいじくるつもりなのでまだまだ勉強しなくてはいけません。