ダイアリーの見栄えを変えるべく、再びデザインを変更。現在のデザインはテンプレートより「Query011」。
以前、「メニューは絶対左派!」で、これまでに作ってきたWebページは全て左メニューにしていたが、これでは視野が広がらないので試しに「右メニュー」にしてみた。(2006/06/05日記参照)
やってみると、意外と気に入ってしまった。考えてみれば、横書きの文字は左から読んでいくし、一番読んでもらいたいメインの文章が左端から始まると、読むほうも読みやすい。一番目が行く場所を「メニュー」に主体を置いていたが、「メインの文章」の方が断然よい。メニューなんて、他の文章読みたくなってから初めて探す場所だし、メインの文章ほどコンテンツが変わらないんだから、目立たない場所でも固定の場所に置いてれば十分なんだな。
というわけで、今回も右メニュー方式。前回のデザイン「Asterisk-blue」も気に入っていたのだが、何点か不満があったので変更することに。
- 引用、箇条書き等の文字が極端に小さい。
- 同じく引用、箇条書き等の上下に幅が少なく、見分けが付きにくい。
- 本文とヘッダの感覚が近すぎる。
- 脚注の文章のインデントが長すぎて邪魔。
スタイルシートで変更してもよかったが、数が多く面倒だったのでデザインごと変更。今回も散々悩んだ挙句、「Query011」に決定。
ただ、これでも自分が思うイメージに多少離れている部分があったので、その部分のみスタイルシートを変更。
フォトライフ記法およびリンクをつけた画像の枠線を消したい
border=0が指定されていないので、枠線が表示されてしまう。スタイルシートに追記。
img.photo { border: 0; } img.hatena-fotolife { border: 0; } img.hatena-profile-image { border: 0; }
はまぞう(Amazon)の表示を、他のデザインのように段組で綺麗に表示させたい
はまぞう関係のスタイルがまったく定義されていなかったので、これもスタイルシートに追記。
div.hatena-asin-detail { margin: 1em 2em; padding: 5px; border: solid 1px #808080; _width: 100%; } img.hatena-asin-detail-image { float: left; border: 0; margin: 0 10px 0 0 ; } div.hatena-asin-detail-info{ float: left; margin: 0; word-break: break-all; } p.hatena-asin-detail-title{ font-weight: bold; width: 100%; margin: 0; padding: 0; } div.hatena-asin-detail-info ul { list-style-type: none; margin: 5px 0 0 0; padding: 0; } div.hatena-asin-detail-info li { margin: 0; padding: 0; } div.hatena-asin-detail p a{ border: 0; } div.hatena-asin-detail-foot { clear: left; }
1文字目を1文字下げたい
作文などを書くときは、段落の最初の文字を一文字開けるものだが、わざわざブログでスペースを入れるのは面倒。なので、改行したら次の行の1文字目は、自動的にインデントされるようスタイルシートを定義。
p { text-indent: 1em; }
これでだいぶ自分好みになってきた。あとは、はてな記法「**」「***」で書かれた行の文字の大きさが、2つとも違いが無く、どちらも目立たないのでこれも何とかしたい。とりあえずこれは保留。
過去のデザイン変更
- 2006/06/05 マイブログデザインリニューアル - masahirorの気まま記録簿
- 2005/11/22 レイアウト調整中(はてなダイアリーで3段カラムに挑戦) - masahirorの気まま記録簿
- 2005/06/26 初はてなアイデア投稿 - masahirorの気まま記録簿