ブログ上のヘッダの画像を、リロードするたびに違うものに変更する | 気分良く前向きに生きよう & テクニカルを楽しむ

気分良く前向きに生きよう & テクニカルを楽しむ

日常感じた心の世界に通じることや脳の働きに関することを書きながら、PCや携帯やプログラミングなどの技術的なことなども書いていこうと思います。

先日、友人のブログのデザインが変更されていて、彼のブログサイトに行くたびに(リロードするたびに)違う画像がヘッダの画像になるようになっていました。

これは面白い!ちょっとマネしてみよう。。

と思ったのですが、このAmeba ブログでは、スタイルの設定を外部のCSSファイルで行っており、CSS中にはJavaScriptなどで書いたスクリプトを書き込むことが通常できないため、どうやったらできるのか分かりませんでした。

本体側に<Script>タグを埋め込み、そこに乱数を発生させて画像を変更する短いコードを入れることができれば簡単なのですが、本体側のスクリプトファイルはAmeblo側で固定されているので当然変更できません。

実はそれで2日くらい悩んでいたのですが、分かりました!

・・・というか考えてみれば簡単で、サイドバーにフリープラグインを貼って、そのフリープラグインの中にスクリプトを埋め込めばいいのですね。
なんでそんなことも、二日間も思いつかなかったのだろう。。。ダメすぎる。。

なお、フリープラグインに埋め込んだスクリプトの内容はこんな感じです。
あらかじめ画像のURLを入れた配列を用意して、
乱数は Math.random()*(画像の枚数)で発生させて配列からひとつURLを選択、
そしてdocument.writeln(); を使って
<style type="text/css">
<!--
#header{background:url( ここに選択されたURL );
-->
</style>

というような内容を書き出せばいい、ということになります。

しかし肝心の画像の方が。。。まだ準備できませんOrz
しょうがないので、色を適当に変更した画像を置いていますが、そのうちもっと意味のある画像に置き換えていきたいと思います。