Feb 07, 2005 [去年の今ごろ]
エントリの日付を画像で表示する。
手書き風
エントリの日付を手書き風の文字で表示したいと思った。
日付は年・月・日、と並ぶ形式だから 0 から 9 までの数字画像、年月日の文字を用意すれば簡単に実現できそうだと考えた。
Blosxom 本体が用意する日付関係の変数は $yr (年), $month_num (月), $da (日) や $dw (曜日)である。例えば年が 2004 なら千の位は 2 、百の位は 0 … というように一文字づつにわけていく。その値を返すプラグインを書けばよい。
プラグインが
my ($dummy, $pkg, $date_ref, $mtime, $dw,$mo,$mo_num,$da,$ti,$yr) = @_;
として Blosxom から取得できる年月日の変数は %02d 形式で整形された値なので単純に文字列を一文字づつ切り分ければよいのです。
数字の桁数は、年は4桁、月と日は2桁として以下のように書きました。
# Blosxom Plugin:
# Author(s):
# Version: $Revision:
# $Id:
#
package dateimg;
use strict;
use vars qw($y1 $y2 $y3 $y4 $m1 $m2 $d1 $d2);
# --- Configurable variables -----
# --- Configurable variables -----
sub start {
1;
}
sub date {
my ($dummy, $pkg, $date_ref, $mtime, $dw,$mo,$mo_num,$da,$ti,$yr) = @_;
my ($i, $y, $m, $d, $dd);
$y1 = substr ($yr, 0, 1);
$y2 = substr ($yr, 1, 1);
$y3 = substr ($yr, 2, 1);
$y4 = substr ($yr, 3, 1);
$m1 = substr ($mo_num, 0, 1);
$m2 = substr ($mo_num, 1, 1);
$d1 = substr ($da, 0, 1);
$d2 = substr ($da, 1, 1);
1;
}
1;
そして story flavor に以下を加える。
<img alt="$dateimg::y1" src="/~ogane/image/num-$dateimg::y1.gif"> <img alt="$dateimg::y2" src="/~ogane/image/num-$dateimg::y2.gif"> <img alt="$dateimg::y3" src="/~ogane/image/num-$dateimg::y3.gif"> <img alt="$dateimg::y4" src="/~ogane/image/num-$dateimg::y4.gif"> <img alt="年" src="/~ogane/image/date-year.gif"> <img alt="$dateimg::m1" src="/~ogane/image/num-$dateimg::m1.gif"> <img alt="$dateimg::m2" src="/~ogane/image/num-$dateimg::m2.gif"> <img alt="月" src="/~ogane/image/date-month.gif"> <img alt="$dateimg::d1" src="/~ogane/image/num-$dateimg::d1.gif"> <img alt="$dateimg::d2" src="/~ogane/image/num-$dateimg::d2.gif"> <img alt="日" src="/~ogane/image/date-day.gif">
flavor の解説。読みやすくするために改行を加えていますが実際には改行を入れません。改行を入れると画像の間にすき間が空いてしまったからです(IE, Opera で確認)。使われている変数を下に示します。
| $dateimg::y1 〜 y4 | 年の各桁。2005 年なら y1 = 2，y2 = 0，y3 = 0，y4 = 5 となる。 |
| $dateimg::m1，m2 | 月の各桁。 |
| $dateimg::d1，d2 | 日の各桁。 |
ここでは /~ogane/image ディレクトリに
- num-0.gif 〜 num-9.gif
- date-year.gif, date-month.gif, date-day.gif
を用意しておいた。これの実行結果が下の図。
いっそう愛着が湧くというものです。
曜日の表示
曜日のデータは数字として変数 $dw に格納されているので一週間分の曜日の画像を用意すれば flavor を変更するだけで表示できます。
ogane's handwriting
ogane の手書き文字です。ご自由にお使いください。
コメントを書く
トラックバックURL: http://park18.wakwak.com/~ogane/cgi-bin/blosxom.cgi/computer/blosxom/200502070610.trackback
Posted at 06:10 - permalink - category: Blosxom - tags: blosxom
これまでの記事。
2007 | 12 | 11 | 10 | 9 | 7 | 6 | 5 | 4 | 3 | 2 | 1 |
2006 | 12 | 11 | 10 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1 |
2005 | 12 | 11 | 10 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1 |
2004 | 12 | 11 | 10 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1 |
2003 | 12 | 11 | 10 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1 |
2002 | 12 |
この記事へのコメント