Bloggerでタイトルの横に広告を入れる

Bloggerではヘッダーは画面幅でレイアウトされるので、横に長いロゴ画像を置かない場合は右側に空白が出来ることになります。
この余白に広告を設定します。

1. 前提になる設定

Simple テンプレートを使っています。
レイアウトのヘッダーにてイメージ画像を設定済み。オプションは「説明を画像の後ろに表示する」に設定している。

2. ヘッダーが記載されている箇所

[テンプレート] -> [HTMLの編集]でhtmlを確認します。
の下の<a>タグと<img>タグが設定したヘッダーのイメージ画像（タイトルロゴ）を表示しています。
その後のの下では「ブログの説明」を表示しています。

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>

3. 広告のコードの用意

HTMLエスケープしたものを用意する。（ '<' や '>' などを変換したもの）
下記の広告は728x90のサイズのAmazonおまかせリンク。エスケープは変換を行ってくれるサイトで変換します。

4. 先人の知識から下記を試してみました。

4-1. <a>タグと<img>タグにある style='display: block' を両方とも削除する。
ブロックにすることで改行が入っているんですね。これを無くしてみます。
4-2. 広告のコードは</a>タグの直後に入れる。

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://ir-jp.amazon-adsystem.com/s/ads.js"></script>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>

これで右側の余白に広告が入りました。

5. レイアウトを調整する

しかし、これだとヘッダーのイメージ画像と広告が同じ高さにあり、ブログの説明がその下の行にあります。
自分の場合、ブログの説明が短いので、ここの右側にも余白を作ることになってしまいバランスが悪いです。

また、この広告のレイアウトはPC向けであり、スマホ向けは別途ウィジェットに広告設定をしてあるので、スマホ向けには表示しないように変更します。

5-1. レイアウトの調整は style='float: left' を使います。ヘッダーのdivに１つ挿入し、広告を囲むdivに１つ設定します。その後に <div style='clear: both;'/>を入れます。

5-2. PC向け／スマホ向けの分岐は <b:if cond='data:mobile'> を使います。
今回はスマホ向けの部分は空にして、<b:else/>後に広告のコードを入れる。

したがってステップ4は必要なくなりました。

<div id='header-inner' style='float: left'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
<b:if cond='data:mobile'>
<b:else/>
<div style='float: left'>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://ir-jp.amazon-adsystem.com/s/ads.js"></script>
</div>
</b:if>
<div style='clear: both;'/>

レイアウトが完成です。

これでスッキリしましたー。

2014/06/08