上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 広告配置についてのチュートリアルです。
 Googleアドセンスを貼ることと仮定して進めていきたいと思います。





サイドバーの広告配置について



 実は、サイドバーへの効果的な広告配置には、今回解説している「3FaithBlack」には向いていません。
 サイドバーに効果的な広告展開をしたい方は、原型がほとんど同じで、広告配置に最適化し、広告の訴求効果も高い「3フェイス・ブラックCE」をお勧めします。
 今回解説している「3FaithBlack」とほとんどの部分を共用しているので、[3Faith徹底改造]連載のカスタマイズも色々出来ると思います。

 で、「3FaithBlack」で広告展開を考えるならば、プラグインにそのまま追加するのが一番綺麗に配置でき、馴染むのではないかと思います。
「160px」(多くの日本製ブログパーツの採用している横幅です)の広告が、「ピシッ」と綺麗に収まります。

■サイドバーの訴求効果は?

 特殊な状況、例えば、訪問者がスゴイ食いつくタイプのネタを展開しているブログで、サイドバーに正にそれに関連した広告が出るような状況でない限りは、プラグイン内に収まる小さいタイプの広告だと、どうしても効果が薄れると考えられます。
 基本的に、訪問者はサイドバーをみないと思われます。(少なくとも、私はネットでブログを見ているとき、サイドバーはまず見ません。)

 サイドバーで効果を上げるのが、やはり右上の300px以上の広告を、「信頼性の高い多くのニュースサイト、情報サイト」と同じように、同じ場所に配置することだと思います。
 ネットを見る人は、違和感なくその「当たり前の場所にある広告」を不快感もなく(少なく)「見ない」と思います。しかし、大きい上に、綺麗に配置されていれば、訪問者の興味があるものが表示されたとき、自然に目がいくと思います。






本文中に配置



 と言うわけで、サイドバー右上(左上)以外で訴求効果が高そうなのが、本文中に挿入することです。
 まずは、一番訪問者に嫌われるリスクが少なく、訴求効果が高そうな、記事直下です。

 アドセンスの場合は、ページ内に3個までと言う決まりがあり、4個目からは表示されないように出来ています。
 そのため、記事中であれば、「追記文内」に入れるのが無難です。「追記文内」に入れれば、「個別記事ページのみでの表示」となり、トップページでズラズラと表示され、利用規約違反事項に抵触しそうな事態は防げます。(実際はアドセンス側で3個以上表示しないように出来ていますが…気味が悪いので、出来れば避けたい…)



記事直下に入れる場所

 ベストな配置は、記事フッターの手前、本文最後だと思います。
 その場所に配置する場合は、以下の場所に挿入します。

HTML
<!--more_link-->
<div class="more_link">
<a href="<%topentry_link>"><%template_extend></a>
</div>
<!--/more_link-->
<!--追記-->
<!--more-->
<div id="more"><%topentry_more><ここ></div>
<div class="bookmarks">
<a href="http://twitter.com/home?status=<%topentry_enc_link>" target="_blank" title="ツイッターでこの記事のことをつぶやく"><img src="http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/default-icon-16x16-twitter.png" alt="Twitter" /></a>
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" target="_blank" title="はてなブックマークに追加"><img src="http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/default-icon-16x16-hatena.png" alt="はてなブックマークに追加" /></a>
</div>
<!--/more-->



※注意

 アドセンスの場合、「追記文に見せかける」のは規約違反に当たります。広告の近くに「追記」等の文字を入れなければ大丈夫だと思うのですが…
 このカスタマイズに関しては責任は持てませんが、一例として、本文と広告の間隔を十分開けるカスタマイズをするなら、以下のようなスタイルを当てる方法を取ることが出来ます。

<div style="padding:48px 0 16px;">
<広告のタグ>
</div>


 この場合の「padding」(或いは「margin」)の値の意味は

padding:「上の空白サイズ」 「左右の空白サイズ」 「下の空白サイズ」;

 こう言う意味になります。数値を調節してみて下さい。
 ちなみに、「16px」は、フォントの標準サイズと同じ値です。16px開ければ、改行一行分に近い間隔が開きます。




追記文上部へ滑り込ませる

 この場合は、広告タグは、先ほどの「記事直下に入れる」のと全く同じ場所に入れ、スタイルを書き換えます。

<div style="float:left;padding:0 5px 5px 0;">
<広告のタグ>
</div>

 「float」の値は「left」であれば、追記文ブロックの左上に配置されます。
 「float」の「right」右上バージョンのサンプルは、以下。

<div style="float:right;padding:0 0 5px 5px;">
<広告のタグ>
</div>


 paddingの値が「left」「right」で違うのは、文章と広告の位置関係が反対になるため。
 広告と本文文字がくっつくのを防ぎます。

■paddingの詳細は以下、「パディング(余白、文字の周りの空間、隙間)」の項目を参照して下さい。
スタイルシートで遊ぶ part.1(<span>タグ編)


今回はアドセンスに関しての記述がありますが、あくまで私が個人的に規約を解釈したもので、正確な記述ではありません。内容に関しての責任は取れませんので悪しからず…



■メニューに戻る
3FaithBlack徹底攻略・はじめに
このエントリーをはてなブックマークに追加
Tue.06.28.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。