今日は早速ですがGoogleアドセンスのビッグバナーをタイトル下に設置してみました。「アドセンスをやっている方のヒントになればいいな」と思って書いていきます。
通常は何も考えずに＜デザイン＞→＜コンテンツ＞で自由形式のコンテンツを設置しても、タイトルのイラストに重なってしまって見栄えがよくありません。
どこを弄ったかだけメモしていきますので、皆様で自分の環境に合うように改変してください。
調整中にタイトルの位置がずれましたので、合せるために調整しました。
h1 {
margin:0px;
padding-top:150px;
padding-bottom:0px;
padding-left:30px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
}
タイトルの白が見にくかったので「どうせ見にくいなら！」と、背景のイメージに合わせて薄いピンクにしてしまいました。
h1 a{
color:#ffcccc;
text-decoration: none;
font-weight:bolder;
}
次は肝心の「#banner」領域の調整です。バナー領域を下に拡大することで、本文や左カラムに重ならないように設定し調整しました。
#banner{
background-image:url(http://blog.seesaa.jp/img/bg/memories/head.jpg);
background-repeat:no-repeat;
background-position:50% 0%;
padding-left:30px;
margin:0px;
text-align:left;
height:310px;
}
タイトル下のブログの説明部分もタイトルに合わせて薄いピンクに変更し、書き出しの位置をタイトルに合わせて調整しました。
.description {
color:#ffcccc;
font-family:Verdana;
font-weight:bold;
padding:0px 10px 0px 30px;
}
CSSを弄ったのは以上です。次にレイアウトが崩れないように、「コンテンツ」でアドセンスのバナーを設置します。
私は次のように「#banner」領域に『自由形式』のコンテンツボックスを使って設置しています。
まずスペース調整用のコンテンツの中は、こう書いています。
<center>
<a href="http://*********.up.seesaa.net/image/*****.gif" target="_blank">
<img border="0" alt="spacer.gif" src="http://**********.up.seesaa.net/image/*****-thumbnail2.gif" width="1px" height="38px">
</a>
</center>
これは幅:1px、高さ:38pxの透明な gif画像がブログ説明の下に入って、アドセンスのバナーを押し下げている感じです。
元の画像もこのサイズで作ればいいのでしょうが面倒です。そこで「縦×横」が「1px×1px」の画像を作って縦に拡大しています。つまり、heightの数字を弄れば、1px単位の微調整が可能ということです。
そしてアドセンス用の自由形式コンテンツを作って、アドセンスのタグを挿入します。
<center><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ******************* -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-****************"
data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center>
これで完成です。今回弄った領域の高さやデザイン調整用の透明gifブロックの大きさを調整すれば、自分好みのレイアウトに近づくと思います。
あとは試行錯誤しながら頑張って、自分のサイトに合ったレイアウトにしてください。
