masahirorの気まま記録簿

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

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

テーマ変更と微調整

ダイアリーの見栄えを変えるべく、再びデザインを変更。現在のデザインはテンプレートより「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つとも違いが無く、どちらも目立たないのでこれも何とかしたい。とりあえずこれは保留。