2106bpm for Photo-blog ■コスプレ・脚フェチ写真多め■

PC版のTOPバナーを変えてみました。ブログをリフレッシュ(リロード/再読込み)させる度に、あらかじめ仕込んだ複数枚の画像がランダムに表示されます。JavaScriptを使ってるので、ブラウザの設定でJavaScriptをOFFにしている場合はランダムな表示にはなりません。アフィリエイトバナーなどを仕込んでアクセスする度に異なるアフィリエイトサイトへ誘導するなどにも使うことができますが、今回はうちのブログがフォトブログということもあり、TOPの画像をランダムに表示させてアクセスした方が楽しんでもらえればいいかなーと思ってやってみました。やり方にについてはコチラのサイトを参考にさせて頂きました。うちのブログで実際にやってみた内容も加え以下にメモがてらに書いておきます。

　
　
まず、管理画面→「テンプレートの設定」→「編集」の「HTML編集」にある</head>の直上に以下のタグを記述します。

<script type="text/javascript">
<!--
function RandomBanner(){
var url = "http://自ブログのURL" + Math.ceil
(Math.random()*1000000); location.replace(url);
}
// -->
</script>
</head>

http://自ブログのURL部分に自分の(設置する)ブログのURLを記述します。今回の場合は、このブログなので「http://2106bpm.blog60.fc2.com/」を記述しました。


次にインデックスエリアやフリープラグイン(プラグインの設定)など、バナーを設置したい場所に以下のタグを記述します。

<script language="JavaScript">
<!--
　　var rNam;
　　rNam = Math.ceil(Math.random()*100000);
　　if(rNam % 5 == 0){
　　document.write('バナーのタグ');
　　} else if(rNam % 5 == 1){
　　document.write ('バナーのタグ');
　　} else if(rNam % 5 == 2){
　　document.write ('バナーのタグ');
　　} else if(rNam % 5 == 3){
　　document.write ('バナーのタグ');
　　} else if(rNam % 5 == 4){
　　document.write ('バナーのタグ');
　　}
//-->
</script>
<noscript>
バナーのタグ(JavaScript非対応のPCのために)
</noscript>

今回はTOPバナーで利用するため、「HTML編集」のheader部分に上記タグを挿入しました。JavaScript非対応、もしくはOFFに設定しているPC用に1枚画像を設定できます。なので、このブログのテンプレートでは「スタイルシート編集」にheaderの画像を指定するURLを記述していたのですが、一応そちらは削除しておきました。


バナーのタグは<a href="http://～～～"><IMG SRC="http://～～～" width="数字" height="数字" border="0"></a>をそのまま記述します。

<a href="http://～～～"></a>はリンクする先を指定するタグです。今回は自ブログ「http://2106bpm.blog60.fc2.com/」を記述しました。なので、TOP画像をクリックすると再読込みします。アフィリエイトで使う場合はアフィリエイト先のSHOPや商品のURLを記述してください。アフィリエイトでなくても何かしら宣伝したいブログやサイトへのリンクバナーとしても使えます。リンクをさせたくない(画像表示のみの)場合は、<a href="http://～～～"></a>の記述自体を削除すればokです。

<IMG SRC="http://～～～" width="数字" height="数字" border="0"></a>は、画像を表示させるタグです。数字の部分は横と縦のサイズを指定するのですが、うちのTOP画像のサイズは530×200なので、そのサイズの画像を作成し、数字部分にも530と200を記述しています。


また、表示させる画像の枚数ですが上記のタグだと5枚になっていますが変更することは可能です。
例えば3枚にしたい場合は

<script language="JavaScript">
<!--
　　var rNam;
　　rNam = Math.ceil(Math.random()*100000);
　　if(rNam % 3 == 0){
　　document.write('バナーのタグ');
　　} else if(rNam % 3 == 1){
　　document.write ('バナーのタグ');
　　} else if(rNam % 3 == 2){
　　document.write ('バナーのタグ');
　　}
//-->
</script>
<noscript>
バナーのタグ(JavaScript非対応のPCのために)
</noscript>

となります。逆に増やしたい場合は

else if(rNam % 合計の枚数 == ナンバリング){
　　document.write ('バナーのタグ');
　　}

の記述を追加することでできます。ナンバリングの数字は0から始まっているので、合計枚数より1つ少ない数字を記述します。


今回、参考にさせて頂いたサイトはこちら！
･ランダム画像・バナーを作るには？(初心者でもできる簡単FC2ブログの作り方)
FC2IDの登録からブログのカスタマイズ、アフィリエイトに至るまで色々な内容が分かりやすくまとめられています。初心者はもちろんちょっとした小技を仕込んでみたい方にもおすすめですので是非ご覧下さい。


関連記事
･☆TOPバナーを作ってみた☆
･☆リンク用バナー☆
･☆モバイル版☆

関連リンク
･初心者でもできる簡単FC2ブログの作り方
･FC2ブログではじめるこだわりブログ 第3版 (FC2ブログ公式ガイド) (FC2 BLOG公式ガイド)
･SEO 検索上位サイトの法則
･みるみるマスター HTML&スタイルシート 作れる!わたしのWebサイト―ホームページで何を伝える?どう作る?
･月に100万稼げるドロップシッピング
･しょこたんぶろぐ 超貪欲デイズ
･ツイッター 140文字が世界を変える (マイコミ新書)
･「ツイッター」でビジネスが変わる! Twitter Power
･ありえない稼ぎ方。
･携帯アフィリエイトで給料の3倍稼ぐ方法
･大人が知らない携帯サイトの世界 ~PCとは全く違うもう1つのネット文化~ (マイコミ新書)


- トップバナー -
- HTMLタグ -
- ブログカスタマイズ -
- アフィリエイト -