今回は、Blogでのトップ画像を、入室するたびにランダムで入れ替える
タグについて解説したいと思います。
大元は、私がいつも参考にさせて頂いている
向上企画書さま 提供の、
http://ameblo.jp/exlink/entry-10065187536.html
以下のスクリプトとなります。
<script type="text/javascript">
<!--
var ranimg = new Array();
ranimg[0]="63/0d/143886433.jpg";
ranimg[1]="f6/d0/143886434.jpg";
ranimg[2]="cc/58/143886436.jpg";
var mai = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(mai)];
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header{background:url("http://stat.ameba.jp/user_images/' + ranimg +'") no-repeat;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
上記はコピーペーストで利用できます。
さてここでは、アメブロに合わせて、横800ピクセル、そして私がここ数日
作っている、高さ300ピクセル(800×300)の画像についての説明を。
上記スクリプトの、赤色文字と、青色文字を、自分のBlogにあったものに
変更しないと、もちろん表示はされません。
仮に ranimg[0]= という部分に、以下の画像を挿入する場合↓
この画像は、私のフォルダに入っている為、
http://stat.ameba.jp/user_images/03/45/10145103762.gif
という内容になっています。
この後ろ半分を切り取り、利用するので・・・
ranimg[0]="03/45/10145103762.gif";
赤い部分のソースを↑↑のように黄色いソースへと書き換えました。
このように
ranimg[0]=
ranimg[1]=
ranimg[2]=
3枚の画像を用意して、ランダムにさせるなら３つ組み入れます。
ranimg[0]=
ranimg[1]=
ranimg[2]=
ranimg[3]=
４枚にしたいと思えば、４つめのタグ(水色)の部分を増やすだけです。
これは、私の画像フォルダ内のプロパティを利用したタグを組んでるので
800×300ピクセルの画像は、一旦自分のフォルダに持ち帰り、組んで
下さい。
("http://stat.ameba.jp/user_images/' + ranimg +'")
↑
この青文字とセットで、他人のフォルダ等から強制的に画像を呼び込む
方法もありますが、これをすると直リン(じかリンク)と言って、相手に迷惑
かかりますので、【自分のフォルダ画像を利用する】←これが最低限の
マナーとなります。
続いて、少し難しくなりますが、TOP画像を綺麗に表示させるためのテク
を紹介します。
まず
この画像を持ち帰ってみてください。
これは800×300のダミー画像となります。
これを利用する理由はあとで書きますが、上記画像を
上記④の部分に、入れてみてください。
これで完璧です！！
これは800×300ピクセルのTOP画像を使うケースでの説明ですが
TOPの３枚をランダムに表示するまでに
読み込みのタイムラグ
が発生します。
この間に「とりあえず表示させておく画像」という意味で、ダミーと
いう言葉を使いましたが、これはかなり重要です。
・タイムラグ中に『仮表示される』
・このダミーを入れておかないと、空白になる時間帯がある
・そして空白時間帯に高さ100ピクセル等に、表示が一瞬おかしくなる
この３つのデメリット部分をフォローしており、特に最後の部分・・・
トップ画像(上記説明④)に、何らかのダミーを入れておかないと、
Blogのデフォルトとなる、100ピクセル(以下)の高さへと、縮小され、
ランダム画像が読み込まれた直後、300ピクセルに引き伸ばされるという
「伸びたり、縮んだり」と表示不安定となるからです。
この説明は、導入した人にしか「なんのこと？」と伝わりにくいかも
しれませんが、やってみて「表示がおかしければ」ココだ！と考えて
頂ければｏｋです。
さて、うまくできたでしょうか？
まぁ一番の問題は
800×300 のトップ画像を２枚以上(複数枚)もってないと始まりませんが；；
【追加記述】
TOP画像の少ない人だと、配置する画像足りないので、ちょい追加で作って
おきました。(※必要に応じて、お持ち帰りください。)
モコさんの青魔は上のサンプル。
続いてモコさんの赤魔ＡＦバージョン。
琴さん侍ＡＦ
琴さん水着
ブレさんのホバ
ブレさんの・・・なんか？ｗ