【THE THOR ザ・トール】アドセンス広告をキレイに貼る方法

【THE THOR】アドセンス広告の貼り方・設定方法

ネット上の広告も楽しく見たいものです。
katsuです。

今日はサイトへのGoogle Adsense（グーグルアドセンス）広告の貼り付け方・設定方法について説明します。

この「活ノート！」はWordPressのTHE THOR（ザ・トール）というテーマで作成しています。サイトを設定する中で、広告の貼り方はとても苦労しました。アドセンス広告がスマホ表示ではみ出してしまったり、画面いっぱいに広がってしまったり。そもそもどこにどんな広告を貼るべきなのか・・・。

そんな悩みを少しずつ解決している途中経過ではありますが、備忘録として残しておきたいと思います。THE THORを使用されている方に限らず、アドセンス広告を利用される方全てにお伝えしたい技術です。

また、これから広告を使用される方にも「Googleアドセンスってこんな感じなのか～」って感触をつかんでもらえると思います。それでは詳しく説明します。

当サイトにおけるGoogle Adsenseの考え方

この「活ノート！」は、広告を実装し収益を得ようとしているサイトです。読む方のことを考えると、広告は邪魔なものだと思います。もちろん書き手側も広告を好んで貼りたくはないのです。

しかし、こういったブログを運営していく上でどうしても費用はかかります。それに、僕のように「何とか物書きで生活できないかな！」と夢見るサラリーマンにとっては、広告は必須なものとなります。

そもそもネット上の広告は、非常に合理的で便利なものです。「広告主」「Google」「サイト運営者」「ユーザー」の関係がしっかりと成り立っており、商売として成立します。誰から見てもメリットがあるのです。（一部ひどい広告もあるのでしょうが・・・）

ブログを開設して約４ヶ月。僕の場合、残念ながら収益はゼロに等しいですが、これからも根気よく「人の役に立つ記事」を目指して記事を書き続けたいと思います。そして収益を得て更に人のお役に立つことが目標です。

活ノートで利用している広告会社（ASP）

さて、僕が利用している広告会社は以下の３種類です。

・Googleアドセンス
・A8.net
・楽天アフィリエイト

今回はGoogleアドセンスに特化して説明します。アドセンスはいわゆる「クリック型」の広告です。広告がクリックされることで収益が発生します。ただし適当にクリックされれば良いというわけではなく、クリックによる宣伝がしっかりと行われた時点で収益が発生します。

そのため、いかにユーザーの方に興味を持っていただくかが非常に重要になります。広告の中身は自動的にGoogleが設定します。問題はその広告を、どのような形でどのようにサイトに設置するかです。

広告の種類やどの位置に貼り付けるかについては、この記事では差し控えたいと思います。なぜならサイトによってその基準はまちまちだからです。広告の種類をたくさん作り、貼り付け位置によって名称を変え、どの広告が最も効果的かを検証する。そんな作業が必要となります。

僕自身も、やっと広告の使い方がわかってきたところです。ユーザビリティ最優先で、これからもじっくりと研究を勧めていきたいと思います。それでは、現段階でご紹介できるアドセンス広告の設定方法を説明していきましょう。

THE THOR（ザ・トール）におけるアドセンス広告の設定方法

さて、前述した通りアドセンス広告の貼り付け方には少しコツがいります。「有料テーマのTHE THORなんだから、うまくサイズとか調整してくれるかな～」と油断していたら大変な目にあいます。

スマホで広告が画面からはみ出したり、右側が途切れたり。意外と簡単に修正できますのでご紹介しましょう。

広告のサイズ調整例

まずは広告のサイズの調整例です。レクタングル広告の場合を例に挙げてみます。コードを取得すると以下のようになります。

この例は、レクタングル広告の336✕280pxサイズの広告挿入例です。（１～9数字の羅列部分は、各ユーザーによって異なります）このままTHE THORの記事内に挿入すると、スマホ表示したときに右側が途切れてしまいます。

そこで、僕の場合はサイズ指定のレクタングル広告を使用しないことにしました。どうしてもサイズ感がうまくいかないのでレスポンシブ広告を使います。コードはこんな感じです。

しかしこのまま貼り付けると・・・今度はスマホの画面サイズいっぱいまで広告が広がってしまいます。そこで、上記コードの1行を変更します。

data-full-width-responsive=”true”を“false”に変更するのです。

この1行は画面サイズをいっぱいにするかどうかの設定です。「false」とすることで、キレイに枠内に収まってくれます。簡単ですよね。

広告タイプの調整例

さて、次は広告のタイプの調整方法です。レスポンシブ広告を使うのは良いのですが、このままでは広告のタイプ（形状）を自由に変更することができません。そこで、先ほどのコードのこの部分に注目です。

data-ad-format=”auto”

この1行は広告のタイプの設定です。「auto」にしていると、基本的にはレクタングル（四角い広告）が表示されることが多いと思います。この部分を変更することで、広告のタイプをある程度限定することができます。

いずれも「優先して表示」されるというだけで、異なるタイプの広告も表示される場合があることに注意してください。

最終的にアドセンス広告はこう設定する

最終的には、「レスポンシブ広告」を「レクタングル表示」指定とし、画面サイズ一杯表示設定を「false」とするのがTHE THORを使う上でベストの設定になると思います。つまりコードは以下の通りです。

レスポンシブ広告を取得し、赤文字の部分を書き換えてくださいね。

ネイティブ広告への移り変わり

さて、ここまではアドセンス広告の「テキスト広告とディスプレイ広告」について説明してきました。この技術はネイティブ広告にも応用することができます。

ネイティブ広告とは、記事の間やアーカイブサムネイルの間に「しれっ」と表示されるタイプの広告のことです。今後はこのネイティブ広告の割合が増えてくるでしょう。

例えば「記事内広告」もネイティブ広告です。レスポンシブタイプの広告のため、今回ご紹介した技術をそのまま使うことができます。僕も最近は記事内広告を使いだしています。

問題は「インフィード広告」です。THE THORではPC・スマホそれぞれで設定が可能なものの、タブレットでの設定ができません。ウィジェットを使えばうまく設定することも可能でしょうが、今のところここまでは設定ができていません。

さて、以上が現段階での僕のアドセンス術です。広告を貼ることがサイト経営の目的ではありませんが、知っておいて損は無い立派な技術だと思っています。

備忘録の意味合いが強いため乱文になりました。サイト経営者の方に少しでもヒントをつかんでいただければ最高に嬉しいです。今後もさらに広告の研究を続けたいと思います。

↑24いいやん！されています。良い記事でしたら「いいやん！」クリックお願いします。

下のSNSボタンから記事拡散にもご協力お願い致します。

読み込み中...