WordPress、ソフトウェア、Web技術、ネットワークに関する記事や備忘録

記事の日めくりカレンダーを表示する

2008
Mar
18th

Posted in [ Webデザイン ]
Tags:, ,

デザインの良い日めくりカレンダー用アイコンを見つけたので、試験的に日めくりカレンダーを導入してみました。
実際に見てみると意外といい感じにできてます。
比較的簡単に導入できるので一度試してみてはいかがでしょうか?

WordPressでの記述例

PHPが使用可能ならば簡単に日めくりカレンダーを作成できます。
64×65のアイコンを使用。

/*html記述例*/
 <div class="time">
 <div class="year"><?php the_time(’Y') ?></div>
 <div class=”day”><?php the_time(’M') ?><br/>
 <?php the_time(’jS’) ?></div>
 </div>
/*CSS記述例*/
.time {
  background: url(日めくりカレンダー用アイコンへのパス) no-repeat;
  line-height: 18px;
  padding: 0px;
  width: 64px;
  margin: 0 10px 0 0;
  font-weight: bold;
} 

.year {
  margin: 0px;
  height: 21px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  padding-top: 2px;
} 

.day {
  margin: 0px;
  height: 44px;
  font-size: 14px;
  color: #666;
  text-align: center;
}

見て分かるとおり、特別な事は全く行ってません。
親divには背景画像と幅指定、各子divには高さとフォントに対する指定などを行います。
青字部分はPHP: date - Manualあたりを参考に変更できます。

参考URL

WordPress用のプラグインがあるらしい。
こちらの方が簡単かもしれません。
Hot Dates Plugin for Wordpress · supriyadisw dot net

Trackback URL

No Comments Yet

You can be the first to comment!

Leave a comment