Movable Type 備忘録

 季節ごとにスタイルシートを切り替える

  • Feb262007
  • Vote:
    http://bizcaz.com/archives/2007/02/26-231956.php
  • Categories: Customize
  • Social Bookmark

こんにちわ^^

以前、oscarさんのところで、季節ごとのアーカイブを変える方法がご紹介されてました。

季節ごとではないですが、わたしの場合カテゴリ毎にテンプレートを切り替えるということをやったことがあります。

今回はアーカイブの切り替えではないですが、月別にスタイルシートの切り替えをご紹介します (￣∇￣)b

ここでご紹介している方法は、ブログのPHP化が必須になります。
(m;_ _)mペコ

カンタンにいうと、PHPを使ってページアクセス時の日付を取得して、その時刻の日付にあったスタイルシートを読み込むようにすればできます。

具体的には以下のPHPを使用します。

  1. <?php
  2.     /* アクセス日時を取得します */
  3.     $name = date("n");
  4.     /*
  5.      * 月別に用意したスタイルシート(1.css ～ 12.css)から
  6.      * 今月に相当するスタイルシートを出力します
  7.      */
  8.     print '<link rel="stylesheet" href="http://●●●.com/'.$name.'.css" type="text/css" />';
  9. ?>

上記コードをコピペして、css-selector.phpという名前で保存します。 そして、青い字の部分を各自の環境に合わせて変更します。 変更したらサーバにアップロードします。
アップロード先はどこでも構いません。各自の環境に合わせてアップロードします。 1.css、2.css…12.cssを用意しておくことで、毎月別なスタイルシートで表示させることができます。

次に、テンプレートの<head>～</head>の間に以下を追加します。

  1. <?php include('http://●●●.com/css-selector.php'); ?>

青い字の部分をアップロード先のURLで変更します。
変更したら保存して再構築すると、今月に相当するスタイルシートが読み出されてイメージをガラ!! と変えることができます (￣∇￣)/

日替わりなんてのも当然できます。
その場合にはcss-selector.phpの以下の部分を変更します。

  1.     /* アクセス日時を取得します */
  2.     $name = date("D");

上記だとSun.css、Mon.css…Sat.cssのようなスタイルシートを用意しておけばOKです。

四季に合わせて替えるには以下の通りです。

  1.     $4season = array('winter',/* 1月*/
  2.                      'winter',/* 2月*/
  3.                      'spring',/* 3月*/
  4.                      'spring',/* 4月*/
  5.                      'spring',/* 5月*/
  6.                      'summer',/* 6月*/
  7.                      'summer',/* 7月*/
  8.                      'summer',/* 8月*/
  9.                      'summer',/* 9月*/
  10.                      'autumn',/*10月*/
  11.                      'autumn',/*11月*/
  12.                      'winter',/*12月*/);
  13.     /* アクセス日時を取得します */
  14.     $name = $4season[date("n") - 1];

上記のようにすれば、地域によっては夏が長かったり、冬が長かったりした場合でも臨機応変に季節に合わせてスタイルシートを切り替えることができますね (￣∇￣)b

いつも代わり映えのないテンプレートから気分転換にどうですか♪

  • Related Entries

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード