トップページだけレイアウトを変更するには？

当ブログでは写真のように、トップページだけサムネイルを並べて表示しています。
javascriptとサーバーサイドも使って実現していますが、制限を設ければこれはCSSだけでも可能です。
ただ、CSSで処理をすると、ブログ内の全てのページに同じCSSが適用されてしまいますので、トップページだけ異なるレイアウトにするには一工夫必要です。
それを解説するにはこの小技を紹介しなくてはいけません。

というわけで、今日はこのトップページだけレイアウトを変える、という小技をご紹介します。

トップページにしか無いものといえば？

通常、トップページのレイアウトは「アーカイブ」や「カテゴリ別」とほぼ同じように表示されます。
表示されるエントリーが異なるだけなんですね。
ではどうやってトップページだけ異なるCSSを適用するのかというと「メッセージボード」を使います。
メッセージボードは唯一トップページにだけ表示される要素ですので、利用するにはうってつけですね。

メッセージボードに直接CSSを書く！

メッセージボードに直接CSSを書くことにより、トップページだけ違うスタイルを適用します。
まず、通常通りstyleタグの中にCSSを記入します。
例として、エントリーの背景をトップページだけ変えてみましょう。

<style>
.entry .contents{
background:#777777;
}
</style>

こんな感じです。
ただ、メッセージボード内は改行すると勝手に;<br>というタグが挿入されてしまいますので、改行を消してあげないといけません。

<style>.entry .contents{background:#777777;}</style>

こんな感じです。
これで、トップページのみ違うCSSを適用できます。

注意点

この方法は、メインカラムのCSSを書き換えるのにとても有効ですが、第1サイドバー(aカラム)のCSSを書き換えるには向いていません。
なぜなら、aカラムの方が先に読み込まれますので、メインカラムに書いたCSSが適用されるには若干の時間差が生じてしまうからです。
ページの表示が終わってさえしまえば関係ないのですが、見えちゃダメ～なところが一瞬コンニチハしてしまうことは覚悟しないといけません。

では次回は、当ブログのようにトップページにエントリーのサムネイルを並べるレイアウトをCSSだけでやってみたいと思います。
その前に思いつきで違う記事を書くかもですが・・・。