全体のデザインはほぼ変わっていませんが細かいところをチョコチョコと修正しました。
検索フォームとフッター部分の三段組を新規で追加し、個別ページのコメント表示部分とコメントフォーム回りをきちんと整えました。
また、アイコンを多用してそれぞれが見やすくなるようにしてみました。
CSSには今回初めて「clearfix」を使ってみました。
これまではどちらかというとCSSハックは好きではなかったんですが、CSSでデザインするからにはどうも避けては通れなさそうだということを知りましたので重たい腰を上げてようやく使ってみました。
…すげぇ便利（笑）
モダンブラウザはもちろんバージョン4世代などの古いブラウザにも対応していてfloatを使ったレイアウトを組む場合にはほんと便利ですね。
とりあえず以後のためにもコピペで使えるよう覚え書き。
セレクタ:after {
visibility: hidden;
clear: both;
height: 0;
display: block;
content: ".";
}
セレクタ {
display: inline-block;
}
/* Hides from IE-mac \*/
* html セレクタ { height: 1%; }
セレクタ { display: block; }
/* End hide from IE-mac */
要するにfloatを指定するブロックを包括する親ブロックの最期に「.」というテキストを追加し、そいつにブロックの最後でクリアさせるっていう技らしいです。
擬似要素「:after」に対応していないIEに対しては下の方の記述が解決してくれるみたいです。
細かいことは素人に私には分かりませんので（笑）、決まり文句のようにこれを追加することでレイアウトを組みやすくしました。
また、これは以前から採用しているのですが、ネガティブマージンを使ってサイドバーは固定幅でメイン部分は可変幅にしています。
ブラウザの幅によってコンテンツ部分が広がるように全体の幅を80%と相対指定をしていますが、サイドバーまでが広がるのはかっこ悪い。
そこでネガティブマージンの登場です。
例えば、全体幅は80%と指定し、サイドバーを250pxで固定、残りの幅はメイン部分に当てるというような場合には次のようにします。
まず、HTMLでは、
<div id="wrap">
<div id="content">
<div id="main-content">
メイン部分
</div>
</div>
<div id="sub-content">
サイドバー部分
</div>
</div>
とし、CSSでは
#wrap {
width: 80%;
}
#content {
margin-right: -280px;
float: left;
width: 100%;
}
#main-content {
margin-right: 280px;
}
#sub-content {
float: right;
width: 250px;
}
とします。
詳しい解説は省きますが、上のように記述すると意図したレイアウトになります。
ちなみに「280px」のところはサイドバーの「250px」との差である「30px」分が余白になるということなので、指定したい余白分を「250px」に加えることで適宜変更して下さい。
これに先程のclearfixを追加すれば完成です。
#wrap:after {
visibility: hidden;
clear: both;
height: 0;
display: block;
content: ".";
}
#wrap {
display: inline-block;
}
/* Hides from IE-mac \*/
* html #wrap { height: 1%; }
#wrap { display: block; }
/* End hide from IE-mac */
前回のマイナーチェンジ以前から約二ヶ月ぐらいかかってようやくこの新しいテーマが完成しましたが、まだまだ細かい部分には修正を加えていくつもりです（笑）
改めてよろしくです。
