先日、友人のブログのデザインが変更されていて、彼のブログサイトに行くたびに(リロードするたびに)違う画像がヘッダの画像になるようになっていました。
これは面白い!ちょっとマネしてみよう。。
と思ったのですが、このAmeba ブログでは、スタイルの設定を外部のCSSファイルで行っており、CSS中にはJavaScriptなどで書いたスクリプトを書き込むことが通常できないため、どうやったらできるのか分かりませんでした。
本体側に<Script>タグを埋め込み、そこに乱数を発生させて画像を変更する短いコードを入れることができれば簡単なのですが、本体側のスクリプトファイルはAmeblo側で固定されているので当然変更できません。
実はそれで2日くらい悩んでいたのですが、分かりました!
・・・というか考えてみれば簡単で、サイドバーにフリープラグインを貼って、そのフリープラグインの中にスクリプトを埋め込めばいいのですね。
なんでそんなことも、二日間も思いつかなかったのだろう。。。ダメすぎる。。
なお、フリープラグインに埋め込んだスクリプトの内容はこんな感じです。
あらかじめ画像のURLを入れた配列を用意して、
乱数は Math.random()*(画像の枚数)で発生させて配列からひとつURLを選択、
そしてdocument.writeln(); を使って
<style type="text/css">
<!--
#header{background:url( ここに選択されたURL );
-->
</style>
というような内容を書き出せばいい、ということになります。
しかし肝心の画像の方が。。。まだ準備できませんOrz
しょうがないので、色を適当に変更した画像を置いていますが、そのうちもっと意味のある画像に置き換えていきたいと思います。