MOB CHANNEL

細々と更新しています…ネットの片隅のヒトリゴト。

「はてブロ」でバナーを複数枚表示する方法。

f:id:mob-channel:20150509222801j:plain

f:id:mob-channel:20150509222812j:plain

はてなブログをやっていて、広告を入れたいなと思った時に「毎回同じ広告じゃなくて表示の度に違うものにしたい…。」と思ったことはありませんか?私もそう思いいろいろ調べて、試しに試して簡単にできるようになったのでお裾分けです。

 

この件に関して検索していて一番参考になったサイトがこちらのサイトのこのエントリーです。

 

rgrg.blog61.fc2.com

 

しかし、これを見ただけだと「はてなブログ」にどう入力していいのかイマイチわからないと思われます。そこで簡単に解説を。

 

 

 

f:id:mob-channel:20150509223023j:plain

ブログのデザインの部分のカスタマイズを選んで、今回はサイドバーにそれを入れてみます。

 

 

f:id:mob-channel:20150509223212j:plain

サイドバーのところから「モジュールの追加」を選び「HTML」のタブをひらくとこの画面になります。ここに初心者でもできる簡単FC2ブログの作り方さんの以下の部分をコピーしペーストします。

 

<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非対応のパソコンのために)
</noscript>

 

 これで青色のバナーのタグのところにそれぞれの広告のリンクを入れるだけ。実は「ヘッダーには何も入れなくても大丈夫」なのです。

 

 

こうすることで毎回訪れてもらった際に違うバナーが表示されます。もっと枚数を増やしたいよ!って思う方。出来なくはないのですが、効率が悪くなるようですので、5枚くらいがちょうどいいのかと。どうしても増やしたい方は初心者でもできる簡単FC2ブログの作り方さんを見ていただくとわかりやすく解説されていますので是非。

 

 

こうやってデザインいじっているだけでも結構楽しめてしまいます。私、こういうの大好きなんです。皆さんも是非楽しんでください。

 

XHTML/HTML+CSSスーパーレシピブック

XHTML/HTML+CSSスーパーレシピブック

  • 作者: エ・ビスコム・テック・ラボ
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2009/12/19
  • メディア: 単行本(ソフトカバー)
  • 購入: 9人 クリック: 187回
  • この商品を含むブログ (11件) を見る