RGBlog.net (OLD)

CSSとWPの勉強のために、最近よく訪問させて頂いてます、mayukoさんのhyperpupやkairaさんのBirDesign’のブログで見かけたブロック型日付表示。それに似た日めくりカレンダー風に出来るプラグインがあるのを発見しました。一方でこれ、CSSとPHPタグを追加するだけで自分で作れちゃうんですね。ということで、このブログにはプラグイン:Hot Datesを導入し、今製作中のHPにはCSSとPHPでやってみました。

【Hot Dates】　ダウンロード先
使い方はその他プラグイン導入法と同じく、zipファイルを解凍して、プラグインフォルダーにアップロードして、アドミンパネルのプラグイン下で有功化し、表示させたいところに< ?php if (function_exists('hotDates')) { hotDates(); }?>を追記するだけです。このテーマの場合は、index.phpのみに追記しました。このプラグインフォルダーにCSSファイルが含まれているので、表示がうまくいかなければCSSを調整するとなんとかまともになります。デフォルト状態ですと何故か年月の表示がズレ込みますね。なぜでしょう…。

個人的には、プラグインを通してこのHot Datesを表示せず、手動でやったほうがデザインの融通が利くと思いました。そのやり方が、あったのでちょっとだけ覚書メモしておきます。
テーマの表示したい部分（デフォルトテーマでは、index.phpとarchive.php）に以下を記述し、後はCSSを追記するのみですね。どのようにCSSを編集するとどんなデザインになるかというデモがこちらにあります。

<?php $time = get_the_time('M d'); list($mo, $da) = explode(" ", $time);?>
<acronym class="published"
title="<?php the_time('Y-m-d\TG:i:sO'); ?>">
<span class="pub-month"><?php echo($mo); ?></span>
<span class="pub-date"><?php echo($da); ?></span>
</acronym>

【追記（9月14日）】
カレンダー背景になっている画像がPNGで、IE用のフィルターをかけても半透明の効果がIE上で反映されませんでした。そこで、GIFに画像を編集しましたが、しばらくしてやっぱり腑の落ちません。とうことで、もうこうなったら！！と思い、新規に65ピクセル四方の画像と入れ替えた次第です。

952 Views