EyeCatchランダム画像表示を追加

シンプルなウェブサイトをとWordpressにVicunaにテーマでstyle-galaxyのスキンで構成していました。
しかし、VicunaにはEyeCatchが標準で装備されているのでちょっと見栄えよくしてみようと思い、どうせ直すのだったらランダムに集合写真なんかを表示できたら思い「Wordpress」、「Vicuna」、「EyeCatch」のキーワードで調べたらとても簡単に実装できました。

まず、写真をランダムに表示するにはいくつかのやり方がありますよね。最初に思いつたのは「スライドショーファイル貼り付ける」・・・でもこれだと写真を入れ替えるたびにスライドショーファイルを作成しなくてはならないのとFlashだとiPhone/iPadで再生できない。次はJavaでっと思ったが自分にとってはカスタマイズが難しい。そこで見つけたのがコレです。Random Image Rotationでした。記事下のリンクからダウンロードしたrotate.txtをrotate.phpします。rotate.phpは画像ファイルとしてCSSやhtmlに埋め込むとあらかじめ指定してあるフォルダー内の画像ファイルをランダムに出してくれるというスクリプトになっている。

【実装手順】
・rotate.phpと画像ファイルを同一のフォルダー(images/eyecatch/)に保存します。
・CSSのstyle-galaxyのlayouts.cssのeye-mの1行を変更する。

  background-image: url(images/eyecatch/image1.png);
      ↓次のように変更
  background-image: url(images/eyecatch/rotate.php);

これで、表示させたい画像を550×180pxにリサイズしてフォルダーにアップすればページをリロードするたびにランダムでEyeCatchが表示されるようになりました。