CSSでブログデザイン

HTMLのマークアップ適正化（今回の最大の変更点）
マークアップとは文章にタグを付けていく作業です。

マークアップの適正化とは、文章には見出しがあって、段落があって・・・という感じで、基本的な構造を持っています。
それにしたがって<h1>とか<h2>、<p>などを使用していくというもので、検索エンジンのロボットも正しく内容を読めるので、順位アップに効果があると言われています。


ボックスモデルハックの廃止

ボックスモデルハックとは、ボックス（枠）のサイズ指定の解釈がブラウザごとに食い違うため、ブラウザごとに読み込むことが出来るCSSを書き込んで対処する方法。

ただこれはカスタマイズのとき面倒くさいので、このハックを使わずに解決する方法をとりました。（詳しくは省略）


2種類のカレンダーが選択可能

サイドカラム内のカレンダーと、トップ下の横型のカレンダーを選ぶことが出来ます。

使わないカレンダーはスタイルシートでdisplay: none;を指定して非表示にしています。

display: none;は検索スパムとみなされるから使わないほうがいいと言う意見もありますが、明らかに順位アップを狙った目的でない限り不正とは判断されません。
気になる人は使わないカレンダー部分を削除してください。


トップのイントロ（ブログの説明）部分に透過フィルターを使用
実は今回一番悩んだ部分

透過フィルターってIE独自の機能かと思ってたのですが、実はFirefoxやOperaでも使えたんですね。（知らなかった）

filter: Alpha(opacity=30);これがIEのスタイルですが、
filter: Alpha(opacity=30); opacity: 0.3; -moz-opacity: 0.3;こうすると他のブラウザにも対応します。

ただこのフィルターの欠点は、指定した背景色だけでなく文字や枠線も全て透過されてしまうところ。
あまり背景色を薄くしようとすると、文字も薄くて読めなくなっています。

そこでフィルターの効いた背景色の上に文字が入ったボックスを重ねてしまうことにしました。

ところがイントロ部分は使う人によって文字数が変わってくるので、フィルター部分の大きさを決められない。
イントロ部分の枠サイズを最初から決めてしまってもいいのですが、枠線やpaddingを入れるとブラウザによって大きさが変わってしまう。

何とかフィルター部分が大きすぎたり小さすぎたりしないでピッタリ収まる方法はないかと考えた結果、内容も枠線もまったく同じボックスを2つ作り、片方に透過フィルターをかけてもうひとつを上から重ねる方法で解決しました。
（これに気が付くまで丸1日）


文字サイズを固定

今まで記事の文字サイズは変更できるように%指定していました。

IE6ではCtrl+マウスホイールで文字サイズを変更できたのが、IE7からはサイト全体の拡大・縮小に変わったため、文字サイズは固定で行くことにしました。


以上が大まかな変更点です。
もし質問や間違いがあったらコメントください。