Bloggerブログでスマホのインデックスページへ記事下のアドセンスのサイズを小さくして振り分けて載せる

Bloggerブログのスマホのインデックスページの記事下のアドセンスはサイズが大き過ぎるので、HTML編集のカスタマイズでページを振り分けてサイズを小さくしてモバイルバナーの320×100で表示するように変更したんだ。Contempoなどの新テーマは記事下のアドセンスがスマホのインデックスページでも表示される。記事の抜粋のスニペットに挿入される。それ以前のシンプルなどの旧テーマではウェブバージョンのパソコンやタブレットだけで、モバイルバージョンのスマホでは無理だったので、明らかに改善されていると感心する。新テーマの記事下のアドセンスはブログの投稿ガジェットから設定するとテンプレートのBlogのwidget内のinlineAdのincludableタグで出力されるけれどもソースコードはdefaultAdUnitのincludableタグで定義付けられていて個々に共通したデザインを保ちながらページ毎の振り分けやサイズ変更が簡単にできるようになっているのが助かる。defaultAdUnitのincludableタグのカスタマイズ新テーマのContempoとSohoとEmporioとNotableのソースコードのBlogのwidget内に記事下のアドセンスを定義付けるdefaultAdUnitのincludableタグが記載されている。<b:includable id='defaultAdUnit'>  <b:with value='"/* Done in css. */"' var='style'> <b:include name='super.defaultAdUnit'/> </b:with> </b:includable>実際にアドセンスのサイト広告をブログのインデックスページや記事／追加ページの記事下に表示するのはinlineAdのincludableタグだけれどもそこから呼び出される大本のデザインが決められているのはdefaultAdUnitのincludableタグだからカスタマイズで振り分けやサイズ変更を加えるのに向いている。記事下のアドセンスのサイズを小さくする方法

defaultAdUnitのincludableタグはアドセンスの広告コードにデザインを付けるCSSのインラインstyleを追加できるマークアップが取られている。元々のソースコードの「/* Done in css. */」の部分にCSSを記載するとアドセンスの広告コードにインラインstyleとして適用される。モバイルバナーの320×100のソースコード<b:includable id='defaultAdUnit'>  <b:with value='"width:320px;height:100px;margin:0 auto;"' var='style'> <b:include name='super.defaultAdUnit'/> </b:with> </b:includable>CSSの横幅の「width」と縦幅の「height」でサイズを指定するとアドセンスの広告コードにインラインstyleの「style='width:320px;height:100px;'」のマークアップが追加されてデザインが変わる。注意点としてサイズがデバイスの画面幅よりも小さくなって左右に余白ができると位置取りがずれるので、変わらずに中寄せを保つためには「margin:0 auto;」も同時に指定しておかなくてはならない。defaultAdUnitのincludableタグの「/* Done in css. */」の部分は値によって色んなサイズを指定できるし、または他のCSSのマークアップを追加してアドセンスの広告コードのデザインを変えられるから便利なんだ。スマホのインデックスページとその他に振り分ける方法Bloggerブログの記事下のアドセンスのサイズをモバイルバナーへ小さくするのはスマホのインデックスページだけに止めたいので、スマホとインデックスページの二つの条件からデザインを切り替えるように指定しなくてはならない。モバイルバナーを振り分けるソースコード<b:includable id='defaultAdUnit'>  <b:with value='data:blog.isMobileRequest == "true" and data:view.isMultipleItems ? "width:320px;height:100px;margin:0 auto;" : "/* Done in css. */"' var='style'> <b:include name='super.defaultAdUnit'/> </b:with> </b:includable>記事下のアドセンスにインラインstyleを追加するためのBloggerの別名の変数の独自タグのwithにスマホとインデックスページの振り分けの条件の「data:blog.isMobileRequest == "true" and data:view.isMultipleItems」を三項演算子の「?」付きで使っている。判定が当て嵌まると「:」の前、当て嵌まらないと「:」の後の値を取るので、前だけをモバイルバナーのデザインにして後はカスタマイズせずにデフォルトのマークアップにしている。ページ毎の振り分けの条件はBloggerの条件分岐の独自タグのifのcondの内容と同じで、スマホのインデックスページ以外のパターンも一つか複数の項目を組み合わせて様々に作れる。またはifタグでwithタグを囲って記事下のアドセンスを全体的に振り分けると通常の広告コード（アドセンスの管理画面の広告の設定から新しい広告ユニットを使用する）も記載できるから広告タイプまで変えられるようになる。インフィード広告のモバイルバナーを使う<b:includable id='defaultAdUnit'>  <b:if cond='data:blog.isMobileRequest == "true" and data:view.isMultipleItems'> インフィード広告のモバイルバナー <b:else/> <b:with value='"/* Done in css. */"' var='style'> <b:include name='super.defaultAdUnit'/> </b:with> </b:if> </b:includable>※インフィード広告のモバイルバナーは通常のインフィード広告の広告コードに「style="width:320px;height:100px;margin:0 auto;"」を追加してカスタマイズして記載する。インフィード広告にかぎらず、他の全ての広告タイプの通常の広告コードでも振り分けて使えるし、さらにデザインもモバイルバナーではなくてページ毎に広告タイプを変更するだけにも使える。Bloggerの独自タグの<b:include name='super.defaultAdUnit'/>はBlogのwidget内で記事下のアドセンスの広告コードをレイアウトのブログの投稿から付けたデザインで出力する。広告タイプは一つしか選択できないから記事下のアドセンスに複数の広告タイプをページ毎に振り分けて出すには条件分岐の独自タグのifで通常の広告コードを追加して記載するのが適している。

コメント