上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 テンプレートを、ページを開く度に、数種類の画像がランダムで表示されるようにするカスタマイズの方法です。FC2ブログであれば、「ページ種」ごとに画像を替えることが出来ます(ページ種ごとにヘッダー画像を替える)が、今回のようにランダムに表示を変える場合は、「Javascript」を利用します。




リンクバナータイプのヘッダー画像の場合



 ヘッダーバナーをクリックすると、トップページへリンクする、「バナー画像」をヘッダーに利用している場合のカスタマイズのソースサンプルです。

<div id="header">
<a href="http://ブログトップ.html">
<span id="HeaderRandamChange"><img src="http://デフォルトURL.jpg" alt="ブログのタイトル" /></span>
</a>
</div>

<script type="text/javascript">
<!--
RANDAMimageURL = new Array();
RANDAMimageURL[0]="http://画像1";
RANDAMimageURL[1]="http://画像2";
RANDAMimageURL[2]="http://画像3";

Rndm = Math.floor(Math.random()*RANDAMimageURL.length);
document.getElementById("HeaderRandamChange").innerHTML="<img src="+RANDAMimageURL[Rndm]+" />";
//-->
</script>


●赤字の画像URLを、用意した画像のURLに置き換えるだけです。
●画像の数を増やす場合は、緑の行、「[1],[2]」等の数値を増やし、同じように行を追加していきます。
●青字の部分は、HTMLで必ず必要な場所です。




ヘッダー背景画像の場合



 ヘッダーブロックの背景画像を丸ごとランダムで変えるタイプです。

<div id="header">
<a href="">タイトル</a>
</div>

<script type="text/javascript">
<!--
RANDAMimageURL = new Array();
RANDAMimageURL[0]="http://画像1";
RANDAMimageURL[1]="http://画像2";
RANDAMimageURL[2]="http://画像3";


Rndm = Math.floor(Math.random()*RANDAMimageURL.length);
document.getElementById("header").style.background="url("+RANDAMimageURL[Rndm]+") no-repeat left top";
//-->
</script>


●赤字の画像URLを、用意した画像のURLに置き換えるだけです。
●画像の数を増やす場合は、緑の行、「[1],[2]」等の数値を増やし、同じように行を追加していきます。
●青字の部分は、HTMLで必ず必要な場所です。
このエントリーをはてなブックマークに追加
Tue.02.01.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。