初心者講座　-　リンクユニットの設置その2

前回から少々時間が空いてしまいましたが第2回

リンクユニットの見栄えをよくする方法です。

本題に入る前に以前Googleから警告が来た例を紹介しておきます。

どちらもナビメニューに見立て過ぎた事が原因かと思います。
この様にはしない方が賢明です。

例1：タブを付けた

例2：サイト自体のメニューと合体

本題に戻りまして、リンクユニットに限らずAdsenseの広告ユニットはサイズが決まっておりますので全てのブログに当てはまるものではありません。

特に今回紹介いたします横長のリンクユニットはブログのデザインにマッチさせるのが難しいユニットとなります。

ブログの横幅が728あるいは468ピクセルならばいいのですが、そのサイズのものはほとんど見つかりません。

横長のリンクユニットの場合メニューっぽく見せる必要があるのですが背景色をブログ背景色と違ったもの（そのほうがメニューっぽく見えます）にした場合どうしても下図のようになってしまいます。

リンクユニットの横に空白が・・・

せっかくなら下図のように端から端まで同色にしたいものです。

方法としてはテーブルを組んでAdsenseコードを貼り付けるあるいはスタイルシートに要素を追加して、「div」タグを使って装飾するという方法が考えられます。

ブログ自体がスタイルシートで装飾関係を制御していますので、今回はスタイルシートのカスタマイズでの方法を紹介します。

１．スタイルシート編集ページを開く

Seesaaの場合：デザイン→デザイン一覧→選択中のテーマをクリック

FC2の場合：環境設定→テンプレートの設定

２．下記タグを追加する

#adsection{
background-color:#BE0C0C;
height:15px;
}

※adsectionという名前にしてありますが、同名のものがある場合は別の名前にして下さい。
※background-colourは本ブログのリンクユニットを例にしております。任意のものに変更して下さい。
※height（高さ）はリンクユニットと同サイズにしていますが、15px以上の高さで任意に変更して下さい。

３．HTMLの編集

上記で修正保存後、Adsenseコードに以下のようにタグを追加します。

<div id=”adsection”><script type=”text/javascript”><!–
google_ad_client = “pub-1234567890″;
/* 728×15, 作成済み 07/01/01 */
google_ad_slot = “1234567890″;
google_ad_width = 728;
google_ad_height = 15;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script></div>

あとは以前の記事を参考に設置してみましょう。

FC２ブログへの設置→FC2ブログAdsense広告　配置まとめ
Seesaaブログへの設置→SeesaaブログAdsense広告　配置まとめ

トラックバック&コメント

この投稿のトラックバックURL: