広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

サイドの広告を画面毎に変える

多くのブログのサイドバーは固定のため、トップページと1記事ページで同じものが表示されます。
変える事は出来ません。

私が実際に使っているブログでは、Seesaaはトップページと1記事ページでサイドバーを変えられます。しかし、FC2AmebaライブドアJUGEM、そしてファンブログでは変えられません。

でも、トップページと1記事ページで違う広告を出したい!という時に、スタイルシートでやる方法を説明します。

ちなみに今このブログでは、トップページと1記事ページで左サイドバーに違う広告が出ています。

サイドバーの設定

まず確認のために、ファンブログの場合の、サイドバーの設定方法を説明します。

管理画面の左のコンテンツ設定をクリック。

続けて、表示項目の選択/編集にある項目の追加/編集をクリック。

右側の大きな画面「項目の追加/編集」の新規追加ボタンを押すと入力画面が開くので、
そのHTML欄にソースを書き込みます。

これでわからない場合は、過去の記事「モジュールの設置方法」を見て、モジュールのコードと
なっているところをアフィリエイトのコードに置き換えて、やってください。

2つのソースを貼り付ける

表示させる広告が常に同じ場合は、コピーしたアフィリエイトのソースを、そのまま貼り付けるだけです。

今回はすでにアフィリエイトのコードがひとつ貼ってあるという前提で話を進めます。

トップページにアフィリエイトA、1記事ページにアフィリエイトBを表示させるものとします。
すでに貼ってあるアフィリエイトを、アフィリエイトAとします。

そのアフィリエイトAを、次のように変更します。

<div id="side1">
	アフィリエイトAのソース
</div>

さらに、アフィリエイトBのソースを書き加えます。

<div id="side1">
	アフィリエイトAのソース
</div>

<div id="side2">
	アフィリエイトBのソース
</div>

変更したソースを保存します。

スタイルシートの設定

このままでは、すべての画面で2つの広告が縦に並んで表示されます。
それをスタイルシートで制御して、片方だけが表示されるようにします。

まず、メインページのスキンに次の行を書き加えます。

<style type="text/css">div#side2{display:none;}</style>

書き加えるのはスキンの、次の場所の直前です。

</head>
<body id="multi">

ただし、id="multi"という部分は、私のスキンの場合です。ここはスキンによって違います。

要は、<style type="text/css">div#side2{display:none;}</style></head>の直前(真上)に書くということです。

スタイルシートは、後から書いたものが先に書いたものを上書きします。

本来のスタイルシートを読み込む前に、
<style type="text/css">div#side2{display:none;}</style>を書いてしまうと、後から読み込んだ本来のスタイルシートで上書きされる恐れがあるので、スタイルシートを読み込んだあと、つまりヘッダの最後に書いてください。

こうすることで、id="side2"のdivタグで囲まれた、アフィリエイトBは非表示になります。
display:noneというスタイルシートは、それを表示するなという指示です。

同じ要領で、今度は1記事ページのスキンに次のように書き加えます。

<style type="text/css">div#side1{display:none;}</style>

書き加えるのは、やはり</head>の直前(真上)です。

これによって、1記事ページでは、id="side1"のdivタグで囲まれた、アフィリエイトAは
非表示になります。

残りのスキンも同じように設定すれば、好きなほうの広告だけが表示されます。

スキンがページごとに分かれていない場合

ファンブログの場合は、メイン、ポータル、アーカイブ、1記事とページごとにスキンが分かれているので、ヘッダにスタイルシートを書けました。しかし、スキンがページごとに分かれていないブログの場合はどうすればよいでしょうか。

その場合は、各ブログごとに条件分岐のタグがあると思うので、それを見ながらbodyタグ中にスタイルシートを書かなくてはいけません。

参考までに、このブログはファンブログなのですが、私は実際にはヘッダに書かずに、body内に次のようにスタイルシートを書いています。

<div id="sidebarLeft">
<style type="text/css">div#side1{display:none;}</style>
{$BlogSidebarLeft$}
</div>

ファンブログの場合、{$BlogSidebarLeft$}が左サイドバーです。その直前にスタイルシートを書いています。

各ブログごとに、オリジナルのタグがあるはずですので、それに合わせてスタイルシートを書き込んでいけば、ページごとに違う広告が表示されます。


予断ですが、忍者AdMaxを使うと、画面ごとに広告が自動で切り替わります。楽天のウイジェットが出たり、MicroAdが出たりします。ただし、どの画面で何が出るかはわかりません。同じページでも、毎回違うタイプの広告が出ます。

新ブログ「Big Bang」で続きを読む