Bloggerブログで注目の投稿ガジェットの次にアドセンスのサイト広告を表示する

ブログのテンプレートをContempoに変えたらトップページの先頭に注目の投稿ガジェットが付いていた。調べると公式テーマに同時に追加されたSohoとEmporioとNotableも同じなんだけれども注目の投稿ガジェットをトップページに使うとアドセンスのサイト広告の出方が変わってしまうんだ。レイアウトのブログの投稿から記事下だけではなくトップページを含めてインデックスページの複数の記事の抜粋にどのくらい間隔を開けて表示するかを決められるのが一つずれる。修正して注目の投稿ガジェットの次にアドセンスのサイト広告か出るようにした草地に座って温和な表情を浮かべながら考える女性

A woman thinking in grassland by cuncon / Pixabay

テーマのHTML編集かバックアップ／復元からカスタマイズを行う。Blogのtypeのwidget内のmainのidのincludable内にアドセンスの記事下のソースコードをトップページだけに振り分けて追加しておく。Contempoのソースコード<b:includable id='main'> 中略 <b:if cond='!data:view.isPreview and data:view.isHomepage'><div class='desktop-ad mobile-ad'><div class='inline-ad'><b:include name='defaultAdUnit'/></div></div></b:if>     <b:include name='super.main'/> 中略 </b:includable>※太字の部分が追加するソースコードだ。スマホで下の余白が付かなくて他のサイト広告でも消えてしまうので、cssも二ヵ所を修正しなくてはならない。head内の通常のCSSのためのskin内の「.inline-ad{margin:16px}」を削除するか、値を「0」にする。そしてアドセンスのソースコードにインラインstyleのCSSを追加する。body内のBlogのtypeのwidget内のdefaultAdUnitのidのincludable内の「/* Done in css. */」（withタグに記載されている）を「margin-bottom:16px;」に書き換える。するとスマホで全てのアドセンスのサイト広告に従来通りの下の余白が付くようになってパソコンでも変わらずに表示される。Sohoのソースコード<b:includable id='main'>   中略   <b:if cond='data:posts.any and data:view.isHomepage'>   <b:if cond='!data:view.isPreview'><div class='inline-ad' style='margin-bottom:50px;'><b:include name='defaultAdUnit'/></div></b:if>     <h3 class='title'><data:messages.latestPosts/></h3>   </b:if> 中略 </b:includable>※太字の部分が追加するソースコードだ。
※divタグでインラインstyleの「margin-bottom:50px;」を追加して下の余白を上の余白と合わせた。代わりにclassを付けてhead内にCSSを追加しても構わない。Emporioのソースコード<b:includable id='main'>   中略 <b:if cond='!data:view.isPreview and data:view.isHomepage'><div class='inline-ad' style='display:block;'><b:include name='defaultAdUnit'/></div></b:if>     <b:include name='super.main'/>   中略 </b:includable>※太字の部分が追加するソースコードだ。
※divタグでインラインstyleの「display:block;」を追加して表示した。代わりにclassを付けてhead内に通常のCSSを追加しても構わない。Notableのソースコード<b:includable id='main'>   <b:include cond='not data:posts.any' name='noContentPlaceholder'/>   <b:if cond='!data:view.isPreview and data:view.isHomepage'><div class='shown-ad'><div class='inline-ad'><b:include name='defaultAdUnit'/></div></div></b:if>   中略 </b:includable>※太字の部分が追加するソースコードだ。カスタマイズする位置はインデックスページの記事の抜粋や記事ページの記事などの真上なんだ。トップページで注目の投稿ガジェットが使われているとその次にコンテンツが追加されるので、考え通りになる。他のページでは出ないように振り分けて記載している。追加するソースコードにはBloggerの記事下のアドセンスの独自タグを使ってデザインがテーマのブログの投稿から付けられたままに表示されるようにした。inlineAdのnameのincludeタグだけれども他のインデックスページや記事ページなどのアドセンスと同じになる。Bloggerの収益でアドセンスのアカウントを「はい」とブログに登録してないと反映しない。独自ドメイン／カスタムドメインで、非ホスト型のライセンスだとBloggerの収益で登録しなくても使えるから注意しなくてはならない。アドセンスの独自タグの<b:include name='defaultAdUnit'/>を通常の広告コードと置き換えて記載しても表示される。 Bloggerのガジェットだとテキスト広告とディスプレイ広告とリング広告だけで、ネイティブ広告のインフィード広告と記事間広告、または関連コンテンツも設定できない状況だからアドセンスのタイプを変えるには独自タグよりも通常の広告コードを記載すると良いと思う。トップページ以外のインデックスページではテーマのブログの投稿から記事下のアドセンスの間隔を開けて設定しても一つ目の記事の抜粋の後に必ず出てしまう。なのでトップページで注目の投稿ガジェットを使って次にアドセンスのサイト広告を出せるとバランスが取れるからやってみたくなったんだ。もう一つサイト広告の間隔を開け易くなるのも嬉しい。インデックスページで上の方に出すために記事下のアドセンスを一つ目とか二つ目なんて設定すると同様の間隔で複数を出せる。しかし反対に三つ目とか四つ目なんて間隔を離そうとすると最初の一つを上の方に出せなくなってしまうのがもどかしいんだ。トップページ以外のインデックスページは一つ目に必ず出るから大丈夫だけれどもトップページで注目の投稿ガジェットの次にカスタマイズで追加できると上手く行く。