knakaガジェット情報: Bloggerブログのモバイルサイトにガジェットを表示、カスタマイズする方法

　上記記事でBloggerブログのモバイルサイトでもウィジェットを表示する方法を紹介しましたが、さらにPCサイトとモバイルサイトとでウィジェットの内容を変更したい場合があります。

　よくあるケースとしては、AdSenseのビッグバナー広告をヘッダ部分に表示する場合です。

AdSenseのビッグバナー広告をヘッダ部分に表示するには、以下の部分にAdSenseウィジェットを設定し


以下の通り、[レポート形式]に[ビッグバナー(728x90)]を選択します。

すると、以下のとおりPCサイトのヘッダ部分にビッグバナーのAdSense広告が表示されます。

上記記事の方法でモバイルサイトをカスタマイズする設定にした場合、このAdSenseのビッグバナー広告はモバイルサイトでは以下のとおり画面をはみ出してしまいます。


これを避けるためには、モバイルサイトでは横がはみ出さないような小さいサイズの広告を表示する必要があります。

　本記事では、上記のようなモバイルサイトでの広告のはみ出しを防ぐために、PCとモバイルサイトとで異なるAdSense広告を表示する方法を紹介します。


■設定方法


[テンプレート]　＞　[HTMLの編集]をクリック。


[ウィジェットへ移動]から該当のAdSenseウィジェットをクリックし、対応するソースコードへ移動。


AdSenseはこんな感じのソースコードになっていると思います。

        <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
          <b:includable id='main'>
            <div class='widget-content'>
              <b:if cond='data:blog.disableAdSenseWidget != &quot;true&quot;'>
                  <data:adCode/>
              <b:include name='quickedit'/>
            </div>
          </b:includable>
        </b:widget>

AdSenseウィジェットでは、<data:adCode/>の部分が広告コードに置き換わって表示されますので、この部分を以下のとおり、<b:if cond='data:blog.isMobile'>のタグを使ってPCサイトとモバイルサイトの場合分けをすることで、広告表示を変更できます。

<b:if cond='data:blog.isMobile'>
モバイルサイトの場合に表示するコード
<b:else/>
PCサイトの場合に表示するコード。
</b:if>

以上から、次のように赤字部分のソースコードを追加することで、PCサイトとモバイルサイトとで別の広告を表示できます。

        <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
          <b:includable id='main'>
  <div class='widget-content'>
    <b:if cond='data:blog.disableAdSenseWidget != &quot;true&quot;'>
      <b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
//<![CDATA[
google_ad_client = "ca-pub-（実際の値を設定）";
google_ad_slot = "（実際の値を設定）";
google_ad_width = （実際の値を設定）;
google_ad_height = （実際の値を設定）;
//]]>
</script>
<script src='//pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
      <b:else/>
        <data:adCode/>
      </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
        </b:widget>

（実際の値を設定）の箇所はAdSenseから予めモバイルサイト用に取得した広告コードからの値を設定して下さい。
また、scriptタグの内部のコードは//<![CDATA[　～　//]]>で囲んでいることに注意して下さい。

修正後のソースコードはこんな感じになります。

コード変更後、[テンプレートをプレビュー]でエラーが出ないことを確認し、[テンプレートを保存]をクリックし保存することで設定完了です。

あとは、実際のスマートフォン、あるいは以下の[プレビュー]ボタンで


想定通り表示できていればOKです。


■まとめ

　本記事では、AdSenseウィジェットを例にしましたが、<b:if cond='data:blog.isMobile'>によるPCとモバイルサイトとの場合分けは他のウィジェットでも使えます。PCとモバイルサイトとでウィジェットの表示内容を変えたい場合に上記の方法を利用してみてください。