ジョー・ヒタギの止リ木 | 「ものづくり」や「ものなおし」をするブログ

色々なものを作ったり直したりするブログです。主な話題は日用品・電子機器・エアガンなど。

ジョー・ヒタギ の 止リ木

はてなブログでGoogle AdSenseをカスタマイズ~手動広告を「賢く」設置する~

f:id:Jo-Bitaki:20200810181411p:plain

前回の記事ではアドセンスの問題点と、自動広告の削除方法をご説明しました。
今回は、自動広告に代わって手動広告を「賢く」設置する方法をご紹介します。

ここでいう「賢い」とは、位置や大きさが自動で調整されるという意味です。
何も考えずに広告を貼っていくと、後の管理で地獄を見ることになります。

手動広告の設置

まずは基本的な設置方法についてご説明します。
私はこちらのサイトを参考にしました。

www.tumuji2.com

アドセンスのメニューから「広告」を開き、「広告ユニットごと」のタブを開くと手動で設置する広告を作成できます。

f:id:Jo-Bitaki:20191129001801p:plain:h300

なお、設置は「手動」ですが表示される広告内容は「自動」で選ばれます
今は亡きAmazonアソシエイトのライブリンクのようなものですね。

また、アドセンスの広告は前後にあらかじめ余白が設定されるため、自分で記事の中に改行を入れる必要はありません

広告の種類は次の3種類。

f:id:Jo-Bitaki:20191129001757p:plain

ディスプレイ広告

いわゆるバナー広告のようなものです。
アドセンスではディスプレイ広告にも3種類あります。

  • 正方形の広告が2つ並んだスクエアタイプ(実際の配信時には1つになることも)
  • 横長タイプ
  • 縦長タイプ

私は下の画像のようなスクエアタイプを、邪魔になりにくそうな記事の下と目次の下に設置することにしました。

f:id:Jo-Bitaki:20191129001824p:plain

ちなみに、アドセンスの成果レポートは作成した広告ユニットごとに表示されます。
そのため、同じタイプの広告であっても、設置場所ごとに広告ユニットを作成したほうが成果の確認がしやすいです。
私の例で言えば、「記事下用ディスプレイ広告」と「目次下用ディスプレイ広告」の2つを作成するということですね。

インフィード広告

ニュースサイトなどの記事一覧のなかにさりげなく紛れ込んでいるタイプの広告です。
記事と見間違えやすくて閲覧の邪魔なので個人的には好きではありません。

f:id:Jo-Bitaki:20191129001817p:plain

昔はもっと紛らわしいものでしたが、一時期問題になってから改善されたようです。
当ブログには設置するつもりはないので今回はノータッチ。

記事内広告

記事本文の中に挿入するための広告とのこと。

f:id:Jo-Bitaki:20191129001753p:plain:h400

正直ディスプレイ広告との違いが分かりませんが、おそらく記事との調和が重視されるのでしょう。

物は試しということで、段落の最後に設置することにしました。

手動広告を「自動」で設置する方法

タイトルが矛盾しているように見えますが、アドセンスの手動広告をすべての記事の定位置に自動で挿入するという意味です。
私は以下のサイトを参考にしました。

uxlayman.hatenablog.com

awacafe-tokushima.work

atumetaize.com

これらを使うと、例えば「すべての記事の最初の見出しの上に広告を表示する」といったことを自動でできるようになります。

特に、一番上のサイトに載っているツールは簡単かつ多機能なのでおすすめ。
そのツールでは「あるカテゴリーに属する記事には広告を載せない」という設定も可能です。
私は「noads」というカテゴリーを新たに作り、アドセンスを表示させたくない記事に割り当てています。

「noads」のカテゴリーは非表示にしています。
やり方はこちらのサイトを参考にしました。

clrmemory.com


既に手動で広告コードを貼ってしまったが自動設置に切り替えたいという場合、一度すべての広告コードを削除するのが手っ取り早いです。
詳細な方法については下の記事をご覧ください。

【はてなブログ】手動で設置したアドセンス広告を一括で削除(置換)する方法

レスポンシブ設定をカスタマイズする

もともとアドセンスには、スマホとPCで広告の大きさを変える「レスポンシブ」という機能があります。
ただ、自分で具体的な大きさを設定することはできません。せいぜい正方形か横長かといった広告の形を選べるだけです。

ところが、公式ヘルプの方法で広告コードを改変すれば詳細な設定ができます。
これを利用すれば、例えば「スマホに表示する広告は小さめにする」ということができます。

というわけで、公式ヘルプを参考にして、記事タイトルの下に表示するための広告コードを作ってみました。

<style>
.responsive_ad { width: 468px; height: 60px; }
@media(min-width: 800px) { .responsive_ad { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告ユニット名 -->
<ins class="adsbygoogle responsive_ad"
     style="display:inline-block"
     data-ad-client="xxx"
     data-ad-slot="xxx">
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

簡単にコードの説明をします。
デフォルトでは468×60のバナー型広告が表示されます(2行目)。
しかし、画面サイズが800px以上の場合は728×90の一回り大きな広告が表示されます(3行目)。
※追記:このコードでは広告の横幅が画面からはみ出すことが判明したため、2か所あるwidthの値を100%に変更すべきです。

9行目のdata-ad-clientと10行目のdata-ad-slotには表示したい広告ユニットの値を設定します。
表示する広告ユニットの「広告サイズ」には「レスポンシブ」が指定されている必要がある点に注意。

また、広告サイズには細かい規定があるのでガイドラインも併せて確認していただきたい。以下の引用部は2020年1月24日時点での情報である。

アドセンスお役立ち記事

▼前回の記事です▼
はてなブログでGoogle AdSenseをカスタマイズ~自動広告の削除編~

はてなブログ無料版からPro&独自ドメインに移行する方法と注意点のまとめ

【はてなブログ】手動で設置したアドセンス広告を一括で削除(置換)する方法