Bloggerで関連コンテンツを挿入する


Bloggerでアドセンスのネイティブの関連コンテンツが使えるようになったので、早速試してみました(自動広告のモバイル限定の関連コンテンツではありません)。今回は3種類の挿入方法を試してみました(使用しているテーマはContempoです)。

まず『広告の設定』→『広告ユニット』→『新しい広告ユニット』の画面で『広告ユニット名』を入力し、『サイズ』の『レスポンシブ』を確認して『保存してコードを取得』を押してコードを取得します。もし、カスタマイズの必要がなければそのまますべてのコードを使用します。

カスタマイズする場合はレスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法のページでカスタマイズを行います。以下は3×3の配置にカスタマイズしたコードで、すでに取得したコードから『data-ad-client』の『ca-pub-xxxxxxxxx』と『data-ad-slot』の10桁の数字を入れ替えます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="1234567890"
data-matched-content-rows-num="3"
data-matched-content-columns-num="3"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

注:)PCとモバイルで行数と列数を下記のようにそれぞれの別の数字で指定する場合、レイアウト パラメーターもそれぞれ指定する必要があります。

data-matched-content-rows-num="4,2"
data-matched-content-columns-num="1,2"
data-matched-content-ui-type="image_stacked,image_stacked"

1. <body>と</body>の間に挿入する

Googleで推奨されている方法ですが上記のコードを</body>の直前に挿入すると、モバイルでは画面に収まっているもののPC画面では以下のようにブログ本文の幅を大きく超えて最下部に表示されます。カスタマイズの知識があれば修正可能かもしれませんが、あまり見栄えが良くありません。



2. サイドバーに配置する:

『HTML/JavaScript』のガジェットに作成したコードを貼り付け、任意の場所に配置します。参考までにガジェットは以下のようにブログ本文の領域に移動させることが可能です。『ページの本文』の最下部に挿入した場合は1と同じ位置に表示されますが、アドセンスユニットの幅はブログ本文の幅と同じになります。



3. <data:post.body/>の直後に挿入する

3種類の中ではこの方法がベストであると思います。PCもモバイルも同じように表示され、ブログのテキスト直下に挿入されます。ちなみにブログのテキストとアドセンスユニットが近すぎる場合、<br/>をコードの上に挿入してスペースを調整することができます。

ココをClick→記事タイトルとURLをコピー

コメント

投稿総数:

2012年~2019年の投稿

もっと見る