Wed

10

Sep

2014

WordPressでも日めくりカレンダー風の表示に!

140910_dailycalendar

ワードプレスに移行した後の一連のカスタマイズで、一番実現したかったのが、この投稿日の日めくりカレンダー風表示のカスタマイズ化です。旧MTのブログでも一番気に入っていたカスタマイズでしたので、是非とも同じ表現を実現したいと考えていました。昔のカスタマイズの時に、随分と苦労して実現したのが記憶に残っています。ブログのデザインはともすれば時間が経つと古臭くもなって、新しく模様替えしたくなるものなのですが、この日めくりカレンダー風だけは、何故か飽きずに眺めていました。日めくりカレンダー風にアレンジする方法や画像は、ググると沢山あるのですが、やはり旧MTで使い込んでいたこのデザインを継承したいと思います。
そんな訳で、レイアウト関連や機能面でのカスタマイズ化が落ち着いてきましたので、早速、昔のカスタマイズの時の記事を眺め直してみました。
当時の記事は、といっても2011年の6月ですので、丸3年程度しか経っていませんでした。昔のカスタマイズの記事から、参考にした英文サイトを辿るときちんとリンク表示されています。

Brainstorms Raves : Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly

今回はWordPressに移行しましたが画像とCSSでの表現だけでしたので、結果的には同じCSSコードで問題なく実現できました。ただし、記事タイトルの左に表示する際に、floatの扱いで嵌ってしまいました。原因としてはentri-headerという上位の親要素でfloatがclearされていたのですが、それに気づくのに半日掛かってしまい苦労しました。記事タイトルのentry-title h1のCSSにfloat: clear=noneを設定して、float解除を解除することで、問題なく日めくりカレンダー表示を左に置くことができました。ついでに、投稿記事のレイアウトなども、旧MTブログに近い形にCSSで修正してあります。
どうせ再現するなら、ほぼ同じ形にと考えて、ブックマーク&RSSボタン統合サイトのAddClipsも設置しなおしました。しかしながら、私自身はソーシャルブックマークはほとんど使ったことがないので、どれだけ有効なものなのかは分かりません。まあデザインの一つということで。。。
今後も色々とカスタマイズをしていくのでしょうが、この日めくりカレンダー風表示は、しばらくは使い続けると思います。一体、何年先まで使っているのか楽しみな感じです。。。



コメントを残す