« 自作テンプレート その後 | トップページ | 三点リーダー 何となく解決 »

2011年11月15日 (火)

バナー背景画像

 お蔵入りした自作テンプレは、17枚のバナー背景画像をランダムに変更して表示するようになっていますが、せっかくなので今のテンプレで使う事にしました。

 取りあえず、レンタル・テンプレのバナーサイズに合わせて作り直した画像ファイルは12枚。テンプレのデザインに合わせて右下を丸く ( 1/4 角丸 ) してあります。背景色で塗りつぶしただけですが……。

 css の

#banner-img{
    display: none;
}

 を

#banner-img{
}

 と、{}で囲まれた指定を全部消し、下記の JavaScript を ブログのサブタイトル欄に貼り付けます。下記には6枚分しか指定してありませんが、12枚なので実際は photo[0] から photo[11] まであります。パソコンなので、最初は [1] ではなく [0] ね。
 貼り付け方はコチラの記事を参照して下さい。
※ブログのサブタイトル欄に貼り付けると、テンプレを変更してもこのバナー画像が表示されてしまうので、今回は時計のメモリストに貼り付けて、表示項目に追加しました。Memo_01

 これなら、他のテンプレで時計を表示させなければ大丈夫です。ただし、メモリストでJavaScriptがうまく実行出来るかは不明。

<script type="text/javascript"><!--

photo = new Array();

photo[0] = '画像のURL';
photo[1] = '画像のURL';
photo[2] = '画像のURL';
photo[3] = '画像のURL';
photo[4] = '画像のURL';
photo[5] = '画像のURL';

r = Math.floor(Math.random()*photo.length);

document.write('<style type="text/css">');
document.write('#banner {background: url("'+photo[r]+'") no-repeat; border:0; height: 画像の高さpx; padding:0;}');
document.write('</style>');
//--></script>
<noscript>
<img src="代替え画像のURL">
</noscript>

 JavaScript をオフにしてあるブラウザの為に、noscript の記述もしてありますが、JavaScriptをオフにしてこのブログを表示すると、わたしのPCでは画像が二重に表示されるので、 <noscript> 以下の部分は削除しました。代わりに css で表示するようにしましたが、バナーが下にズレて表示されます。

 JavaScript オン

Random_01

 
 JavaScript オフ

Nonscript

 明日、明後日と連休なので気が向いたら修正します。なるべくなら、JavaScript をオンにして頂くと助かります(^_^;)

 と、ここまで書いてハッと気づきました。多分、またコイツから電話が掛かってくる。

※掛かってきました→背景画像一覧の試作

 

|

« 自作テンプレート その後 | トップページ | 三点リーダー 何となく解決 »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/507657/53255569

この記事へのトラックバック一覧です: バナー背景画像:

« 自作テンプレート その後 | トップページ | 三点リーダー 何となく解決 »