Wed
08
Jun
2011
前からやってみたいと思っていた記事エントリーの日付を、日めくりカレンダー風に表示してみるカスタマイズを実行してみました！当初、どうやって表示しているのか見当もつかず、まさか３６５日分の画像を読み込んでいるのではあるまいしと思ったりしていましたが、世の中には沢山の先人がいて、ネットで検索すると十分なカスタマイズ法が丁寧に解説されています。
今回はその中でも、CSSと画像の一部を組み合わせて作るチュートリアルが紹介されていた下記のサイトの内容で作ってみました。
Brainstorms Raves : Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly
このサイトの通りには実はうまくいかず、上半分の曜日の部分に色を掛けるCSSがどうしてもうまくいかずに、そこは断念しました。それでも結果的には、シンプルでかつ日めくりカレンダーっぽく仕上げることができたので、かなり気に入ってます。
他にも画像は使わずにCSSだけで表現する方法や、画像を１２か月分用意して、月別に色を変える方法など沢山あります。
- Movable Type MEMO : エントリ日付を日めくりカレンダー風にカスタマイズ
- 独学者の独りごと : 日めくりカレンダー風の日付表示
- MMOFAN : 日付を日めくりみたいに
- KANOs 岡野＠神戸 : エントリ日付を日めくり風に
- MovableType カスタマイズ Tips っていうかほぼ個人的な備忘録＾＾； : エントリーの日付を日めくりカレンダー風にカスタマイズ
- 大阪街のホームページ屋さん『ポータルホーム』 : 日付デザインの変更
- Develo.org : ブログなどの日付のデザインパターン
ちなみに今回、自分のブログで使ったソースを記載しておきます。記事の本文と概要の両方にカレンダー表示したいため、まずは別テンプレートを作成して、モジュールで読み込むことにします。モジュール化したテンプレートの内容は、下記の通りです。今後は曜日によって色が変わるなどしてみたいのですが、CSSに条件式は馴染まないようなので、ハードルが高いかも知れません。とりあえずは、今回のカスタマイズで満足とします。
<div class=“datetime”>
<div class=“top”><p><$MTEntryDate language=”en” format=”%a”$></p></div> <!– close top div –>
<div class=“btm”>
<p class=“day”><$MTEntryDate format=”%d”$></p>
<p class=“mon”><$MTEntryDate language=”en” format=”%b”$></p>
<p class=“yr”><$MTEntryDate format=”%Y”$></p>
</div> <!– close btm div –>
</div> <!– close datetime div –>?
<div class=“top”><p><$MTEntryDate language=”en” format=”%a”$></p></div> <!– close top div –>
<div class=“btm”>
<p class=“day”><$MTEntryDate format=”%d”$></p>
<p class=“mon”><$MTEntryDate language=”en” format=”%b”$></p>
<p class=“yr”><$MTEntryDate format=”%Y”$></p>
</div> <!– close btm div –>
</div> <!– close datetime div –>?
これらを表現するためのCSSは、下記の内容です。
/***********************************************/
/*Creating a Blog Entry Date Calendar Icon */
/***********************************************/
/* Outer div */
div.datetime {
float:left;
border-width: 1px;
border-color: #E3E3E3 transparent transparent #E3E3E3;
border-style: solid;
width:40px;
margin: 2px 5px 0px 0px;
padding: 0px 0px 2px 0px;
background:url(/corner.gif) no-repeat right bottom;
}
div.datetime p {
margin:0 auto;
padding:0;
text-align:center;
font-size:x-small;
}
div.datetime div.top {
color:#fefefe;
background-color:#2f4765;
background:url(/caltop1b.gif) no-repeat 40% 50%;
margin:-9px auto -3px auto; /* negative top margin, auto for centering */
padding-top:11px;
}
div.datetime div.top p {
color:#012060;
font:bold x-small/100% Georgia, “New Century Schoolbook”, “Book Antiqua”, “Times New Roman”, serif;
letter-spacing:0.12em;
text-transform:uppercase;
}
/* day of the month (NUMBER) */
div.datetime p.day {
font:bold 1.5em/98% Georgia, “New Century Schoolbook”, “Book Antiqua”, “Times New Roman”, serif;
letter-spacing:0.13em;
}
/* month */
div.datetime p.mon {
font:x-small/100% Verdana,Geneva,Arial,Helvetica,sans-serif;
letter-spacing:normal;
text-transform:uppercase;
}
コメントはお気軽にどうぞ