Vicunaのモジュールに、アイキャッチ画像が有りますが、その内の「Eye Catch Mini Module」をオンにしてみました。ただそれだけじゃ面白くないので、幾つかの画像をランダムに表示させるようにカスタマイズ。画像をランダムに表示させる方法は、JavaScriptを使う方法も含め幾つかあるようですが、今回はphpで実装しています。CSSに記述されている画像へのリンクを、とあるphpファイルへ置き換え、そのphpファイルが指定されたフォルダ内の画像をランダムに表示しています。
ちなみに、使用しているbazookaスタイルのミニのアイキャッチ画像ですが、角丸になっていたりして、ちょっと加工が面倒です。と思っていたら、Vicunaブログ経由でMercuriousLABさんがアイキャッチ画像作成ツール作成・公開してくださったとのニュースが！おおっ、なんちゅうタイミング！感謝です。
- まずはアイキャッチ画像作成ツールみたいなものに、使用したい画像をアップロードしてアイキャッチ画像を作成。作成されたアイキャッチ画像の中から、使用する画像をローカルに（デスクトップとか）保存します。ファイル名は何でもOK。
- A List Apart の、Random Image Rotation という記事からテキストファイルをダウンロードする。ファイルへのリンクはページの下の方。分からない方は直接ここから。
- ダウンロードしたrotate.txtをrotate.phpにしておく。
- 作成したアイキャッチ画像たちと、rotate.phpを同じフォルダに入れる。フォルダ名は何でもOK。ここでは、random_mini としておきます。
- random_mini フォルダを、そのままサーバへアップします。アップする場所は、基本的にはvicuna のフォルダ内のどこでも良いです。僕はstyle-bazooka 用に画像を作成したので、管理しやすいように
/wp.vicuna/style-bazooka/images/eyeCatchへアップロードしました。 - module フォルダ内にある mod_eyeCatch-mini.css を編集します。編集するのは２７行目にある
background-image: url(../images/eyeCatch/mini.gif);
これを
/* background-image: url(../images/eyeCatch/mini.gif); */
background-image: url(../images/eyeCatch/random_mini/rotate.php);
の用に編集。元の記述は削除せずに、コメントアウトして一応残しています。random_mini の箇所は、4. で作成したフォルダ名にして下さい。 - 6. で編集したCSSファイルをサーバへアップして、上書きします。
- これで完了。ブラウザ上で確認して、ページを再読込みして、画像がランダムに表示されればオッケー！
手順の2. ～ 3. あたりがよく分からない方は、chocobit さんのphpで画像をランダムに表示させるがわかりやすいです。
試しに、当ブログを再読込みしたり、サイト内へのリンクをクリックしてみて下さい。左上にランダムにアイキャッチ画像が表示されるはずです。
なお、アイキャッチ画像作成ツールに画像ファイルをアップロードする際、ファイルサイズが大きいデジカメ画像だと、処理に少し時間がかかります。おそらく設置されているサーバにも負担がかかるので、予め縮小して、ファイルサイズを落としてからアップロードする方が良いと思います。
2007年10月14日 at 19:23
ランダム画像って楽しいよね。
何度かクリックしても軽いね。
わたしもどこかに入れたいな～。
2007年10月15日 at 00:33
軽くてよかったです！それはちょっと気がかりだったんで。
Flashにしてみたり、Flickrから引っ張ってこれたりしたら、もっとクールなんやろうな～。
2007年10月27日 at 15:10
Toruさん、こんにちは。
Vicuna.jpを運営しているwuと申します。
Toruさんに直接ご連絡したいことがあるのですが、メールでの連絡手段がわかりません。
メールアドレスを教えて頂けますでしょうか？
もしくは、適当でいいので私あてまでメールを頂けたらと思います。
お話したい内容は、wp.vicuna.jpの翻訳についてです。
宜しくお願いいたします！
2007年10月28日 at 13:35
wuさん、こんにちは。初めまして～。
うわっ！忘れてましたよ、コンタクトフォーム。以前は「Contact」ってページが有ったんですが、リニューアルした際に後回しにしてしまったままでした・・・。後で作ろうっと。あっ、メール送りますー。