| テンプレート講座第七回 |
|
◆ テンプレート講座 ◆ Comment 0 ◆ Trackback 0 ◆ edit.
基本と言うか元ネタは「月日を英語表記に出来ないか?」と言うもので、これもまたdanielさんの作ったものだが、これを使って他の事は出来ないだろうかと考えてみた。
面白半分でテスト的にトップに今月の英語名を表示してみた。
そんな事をしていたら<%now_month>と言う変数を使う事でクラス属性の入れ替えが出来る訳だが。(すでにタイトルのボーダー線やカラー属性を曜日毎などに変更するものはここでも使っている。)
この考えを更に発展させて例えば、「月毎に背景画像やスタイルシート・コメント文を変える」など、<%now_month>を使う事で出来るのではと考えた。
これがフォーラムでの回答例である。<%archive_month> の部分を以下の様にします。(少々長くなります)
<span class="n p<%archive_month>1">January</span>
<span class="n p<%archive_month>2">February</span>
<span class="n p<%archive_month>3">March</span>
<span class="n p<%archive_month>4">April</span>
<span class="n p<%archive_month>5">May</span>
<span class="n p<%archive_month>6">June</span>
<span class="n p<%archive_month>7">July</span>
<span class="n p<%archive_month>8">August</span>
<span class="n p<%archive_month>9">September</span>
<span class="n p<%archive_month>10">October</span>
<span class="n p<%archive_month>11">November</span>
<span class="n p<%archive_month>12">December</span>
CSSに以下を追加します
.n {display:none}
.p011,.p022,.p033,.p044,.p055,.p066,
.p077,.p088,.p099,.p1010,.p1111,.p1212 {display:inline}
<%topentry_youbi> の部分を以下の様にします。
<span class="wd <%topentry_youbi>1">Monday</span>
<span class="wd <%topentry_youbi>2">Tuesday</span>
<span class="wd <%topentry_youbi>3">Wednesday</span>
<span class="wd <%topentry_youbi>4">Thursday</span>
<span class="wd <%topentry_youbi>5">Friday</span>
<span class="wd <%topentry_youbi>6">Saturday</span>
<span class="wd <%topentry_youbi>7">Sunday</span>
CSSに以下を追加します
.wd {display:none}
.Mon1,.Tue2,.Wed3,.Thu4,.Fri5,.Sat6,.Sun7 {display:inline}
これは実際に自分の所でテストで使っているもので「月ごとに英語表記を表示」するだけなのだが、こんな事をしながら変数の使い方次第で背景画像のスタイルシート指定型月別壁紙チェンジャーが出来る事に気が付いた。<style type="text/css">
.n {display:none}
.cal011,.cal022,.cal033,.cal044,
.cal055,.cal066,.cal077,.cal088,
.cal099,.cal1010,.cal1111,.cal1212 {display:inline}
</style>
<span class="n cal<%now_month>1">January</span>
<span class="n cal<%now_month>2">February</span>
<span class="n cal<%now_month>3">March</span>
<span class="n cal<%now_month>4">April</span>
<span class="n cal<%now_month>5">May</span>
<span class="n cal<%now_month>6">June</span>
<span class="n cal<%now_month>7">July</span>
<span class="n cal<%now_month>8">August</span>
<span class="n cal<%now_month>9">September</span>
<span class="n cal<%now_month>10">October</span>
<span class="n cal<%now_month>11">November</span>
<span class="n cal<%now_month>12">December</span>.
これを以下のように変更する。<td class="top_pic"> ←インデックスページの画像を指定している部分。
そのスタイルシート
.top_pic {
width : 100%;
height : 380px;
background: url(http://blog-imgs-1.fc2.com/b/r/e/breaktime/glim_red_top.jpg) no-repeat top left;
}
とこのように画像アドレスをクラスで指定しておけば<%now_month>と言うFC2の変数がその月の数字を取得してくれる。(今月は12だから12と言う数字をこの変数に割り当てる)<td id="top_pic" class="pic<%now_month>"> ←インデックスページの画像を指定しているHTML部分。
そのスタイルシート
#top_pic {
width : 100%;
height : 380px;
}
.pic01 {background: url(1月に表示する画像アドレス) no-repeat top left;}
.pic02 {background: url(2月に表示する画像アドレス) no-repeat top left;}
.pic03 {background: url(3月に表示する画像アドレス) no-repeat top left;}
.pic04 {background: url(4月に表示する画像アドレス) no-repeat top left;}
.pic05 {background: url(5月に表示する画像アドレス) no-repeat top left;}
.pic06 {background: url(6月に表示する画像アドレス) no-repeat top left;}
.pic07 {background: url(7月に表示する画像アドレス) no-repeat top left;}
.pic08 {background: url(8月に表示する画像アドレス) no-repeat top left;}
.pic09 {background: url(9月に表示する画像アドレス) no-repeat top left;}
.pic10 {background: url(10月に表示する画像アドレス) no-repeat top left;}
.pic11 {background: url(11月に表示する画像アドレス) no-repeat top left;}
.pic12 {background: url(12月に表示する画像アドレス) no-repeat top left;}
曜日毎とか365日となると話はちょっと違ってくる。
FC2の変数には、今日の曜日を表すような<%now_youbi>や<%now_day>が無いためそれを取得するにはスクリプトを使う以外方法は無い。(何か有るかも知れないが思いつかない)
それでもこれは画像に限った事ではない。本来の設定法は「12ヶ月分英語名を書いておきそれを変数を使って必要なものだけを表示する」と言う手法な訳である。
一番簡単なカスタマイズは、「月ごとに違ったコメントを表示する。」事が可能だという事であり、自分はこの手法を見てたまたま画像の入れ替えも出来る事に気が付いただけである。(勿論、すでに誰かが実践しているかも知れないが(自爆))
フォーラムとは使い道などは全然違うが、基本は「変数を意外な使い方をする」という事である。
取りあえず今回はちょっとカスタマイズで気が付いた事をつらつらと書いた訳だが一年中同じテンプレートを使う人がどれだけ居るかと言う問題があり、そう言った人には使えるだろう(爆)。
◆ Re comments.
◆ Trackbacks.
- テンプレート講座第七回のトラックバックURLはこちら
- http://breaktime.blog8.fc2.com/tb.php/258-db1e3ded






