Blogger カスタマイズ

【Blogger】記事タイトル下と記事下に広告を表示させる

Bloggerでは通常、アドセンス広告などを表示する場合、ガジェットを用いて簡単に表示することができますが、この方法では記事タイトル下や記事下に広告を挿入することができません。

なので、こういった場所に表示したい場合は、少し手間ですが、HTMLの編集で直接広告のコードを書き込む必要があります。

※この操作はHTMLを編集しますので、念のためバックアップをとってからの作業をおすすめします。

広告コードをHTML内に書き込む前に必要なこととして、コードを実体参照化します。 HTML内では「’」「”」「＞」「＜」などの文字はエラーになるので、別な文字列に変換します。 元の文字 変換後の文字 ’ &apos; " &quot; < &lt; > &gt; & &amp; 広告コード内の記号を手作業で変換するのは大変なので、今回はHTML2TEXTを使います。

①「元の文章」に変換したい広告コードを貼りつけます。 ②「空白も変換する」のチェックを外します。 ③「上から下へ変換↓」をクリックすると、実体参照化されたコードが生成されます。 次に、HTML編集画面で、広告コードを貼りつける場所を探します。 探すのは下記の文字列です。 ～記事タイトル下に広告を挿入したい場合～ div class='post-header-line-1 ～記事下に広告を挿入したい場合～ data:post.body ※HTML編集画面で特定の文字列を検索する方法も記事にしていますので良かったらどうぞ。 うまく検索ができたら、探した文字列の下に改行で空白を作り、先ほど変換した広告コードを貼りつけます。 最後にテンプレートを保存して終了です。 ちなみに私の使っているシンプルテンプレートには、上記のコードが２か所ありました。 １つ目：モバイル用 ２つ目：パソコン用 と分かれている様ですので、それぞれに見合ったコードを貼ってください。 また、PC画面の場合、トップページで複数記事が表示される設定にしている場合、広告の規約に抵触する場合があります。 トップページでは広告を表示せず、個別ページのみ広告を表示させる場合は 広告コードの上下に以下のコードを追加します。 <b:if cond="data:blog.pageType == &quot;item&quot;"> 変換した広告コード </b:if>