記事本文
5 代目スタイルに変更しました
2 月 15 日までは 4 代目のスタイル ( ストライプスタイル ) であった hxxk.jp ですが、一部で黒メガネとかごぼうさんとか呼ばれて親しまれている gorou さん ( Rails2u.com | 川o・-・）＜2nd life | subtechグループ - 'hceT'.sub(/\Z/,'bus').reverse ) が作成した Background Image Maker が便利すぎるので、これを活用したスタイルを作ってみようかなと思い、 5 代目スタイルとなりました。
と言っても大きな変更は行わず、背景画像や配色を変える以外は細かい点の調整をしたくらいですが。 合わせてテンプレートもマイナーチェンジしています。 今回は IE のことも少し考慮したので、大きく見え方が違うということはないと思います。
全面リニューアルのお知らせ - 残っている問題点その 2 - IE で謎の border は、該当部分のボックスに float を指定することで解決しました。 結局何のバグに起因するものだったんだろう……
月ごとに h1 要素の背景を変える
さて、今回のスタイルでは、 h1 要素の背景に個別エントリーアーカイブと日別アーカイブ、月別アーカイブではその日付の月の画像、それ以外のページでは「最新の記事の日付」の月の画像を自動的に設定しています。
例えば、この記事を書いている時点の日付だと最新の月は 2 月ということになるので、多くのページでは 2 月の画像が h1 要素の背景に設定されていることになります。 もちろん、 3 月になれば 3 月の画像 ( hxxk.jp - 2005/03 の画像 ) が各種ページの h1 要素の背景になります。
- 個別エントリーアーカイブ・日別アーカイブ・月別アーカイブに月ごとの画像を設定
-
個別エントリーアーカイブ・日別アーカイブ・月別アーカイブのテンプレートの body 要素の部分を
<body class="<$MTArchiveDate format="month-%m"$>">のように指定し、スタイルシートのテンプレートにbody.month-01 h1{ background: #000 url("/common/materials/hxxk005/h1-month-01.jpg") right top no-repeat; } body.month-02 h1{ background: #000 url("/common/materials/hxxk005/h1-month-02.jpg") right top no-repeat; } body.month-03 h1{ background: #000 url("/common/materials/hxxk005/h1-month-03.jpg") right top no-repeat; } body.month-04 h1{ background: #000 url("/common/materials/hxxk005/h1-month-04.jpg") right top no-repeat; } body.month-05 h1{ background: #000 url("/common/materials/hxxk005/h1-month-05.jpg") right top no-repeat; } body.month-06 h1{ background: #000 url("/common/materials/hxxk005/h1-month-06.jpg") right top no-repeat; } body.month-07 h1{ background: #000 url("/common/materials/hxxk005/h1-month-07.jpg") right top no-repeat; } body.month-08 h1{ background: #000 url("/common/materials/hxxk005/h1-month-08.jpg") right top no-repeat; } body.month-09 h1{ background: #000 url("/common/materials/hxxk005/h1-month-09.jpg") right top no-repeat; } body.month-10 h1{ background: #000 url("/common/materials/hxxk005/h1-month-10.jpg") right top no-repeat; } body.month-11 h1{ background: #000 url("/common/materials/hxxk005/h1-month-11.jpg") right top no-repeat; } body.month-12 h1{ background: #000 url("/common/materials/hxxk005/h1-month-12.jpg") right top no-repeat; }と記述することで実現しています。 特別なことは何もしておらず、単純に月によって class を使い分けているだけですね。
- 最新の記事の日付の月の画像を設定
-
こちらは Movable Type ならではの方法。 スタイルシートがインデックス･テンプレートで作られていることを利用して、
h1{ background: #000 url("/common/materials/hxxk005/h1-month-<MTEntries lastn="1"><$MTEntryDate format="%m"$></MTEntries>.jpg") right top no-repeat; }と記述することで、最新記事が追加されるたびに、その月の数字をスタイルシート内で指定して、背景画像が月ごとに変わるようにしています。
複雑なことをしているわけではありませんが、このようなカラクリですよっていうことをここで紹介してみました。
ちなみに、月ごとにすると背景画像を 12 枚準備しなきゃいけないじゃないか ! という方には、%w という日付フォーマットもあります。 これは曜日を数字に置き換えるもので、 0 を日曜日、 6 を土曜日として考えます。 これなら背景画像を準備するのは 7 枚で済むのでリーズナブルかも。 しかし月と違って毎日変化するものであるので、ちょっと慌しく感じるかもしれませんね。
