Googleアドセンスの広告を２つ左右に並べて表示する方法を、ダブルレクタングルと言うそうです。
正方形に近い形の「レクタングル」と呼ばれる広告を２つ並べるので、その名が付いたそうです。
本ブログはWordPressのテーマ「Twenty Seventeen」ですが、記事の下にダブルレクタングルで広告を表示しています。
今回は、ダブルレクタングルの実装方法についてご紹介したいと思います。ブラウザの幅を狭くしてもデザインが崩れないようにしています。また、スマホ表示にも対応しています。コピペでOKですよ。
目次
ダブルレクタングルで注意したいこと
ダブルレクタングルにするにあたって、以下の２点について注意しなければならないと思います。今回公開するカスタマイズ方法では、以下の２点に対応しています。
ブラウザの幅が狭くなってもデザインが崩れないようにする
例えば、以下のように広告が表示されているとします。広告２つが横並びで表示されていて、見栄えがいいですね。
でも、ブラウザの幅を狭くしていくと、広告が記事幅からはみ出てしまいました。これだとあまり良い見た目ではありません。
そこで、ブラウザがある一定の幅より狭くなると、広告２つを横並びにするのではなく、縦並びにするように対応します。
スマホ表示では広告を１つにする
PC表示では広告が２つ横並びに表示されていても、スマホ表示にすると幅が足りず、縦に広告が並んでしまいます。
スマホ表示の場合に広告が２つ縦に並んでしまうと、アドセンスのポリシー違反に該当してしまう可能性があります。
スクロールしなければ見えない位置にコンテンツを押しやるサイト レイアウト
スクロールしなければ見えない位置にコンテンツを押しやるサイト レイアウトは避けてください。こうしたレイアウトは、ユーザーにとってコンテンツと広告の区別が難しくなります。
ポリシー違反に該当し、Adsenseが禁止されてしまうと元も子もありませんので、スマホ表示の場合は、ダブルレクタングルを止めて、広告を１つだけ表示するようにします。これで解決です。
ダブルレクタングル実装方法
それでは、ダブルレクタングルの実装方法を書いていきたいと思います。あらかじめ、Google AdSenseで広告ユニットを作成しておきましょう。
お勧めは、PC表示の場合は336×280のレクタングル（大）２つ、スマホ表示の場合は自動サイズレスポンシブ１つです。336×280の広告ユニットは300×250の広告ユニットも表示可能ですので、お勧めです。
修正対象ファイル
修正の対象ファイルは以下の５つです。
コード修正前に、あらかじめバックアップを取得しておきましょう。また、子テーマを用意しておきましょう。
- content.php：フォルダパス ⇒ public_html/wp-content/themes/子テーマ/template-parts/post/
- index.php：フォルダパス ⇒ public_html/wp-content/themes/子テーマ
- archive.php：フォルダパス ⇒ public_html/wp-content/themes/子テーマ
- search.php：フォルダパス ⇒ public_html/wp-content/themes/子テーマ
- style.css：フォルダパス ⇒ public_html/wp-content/themes/子テーマ
content.phpの修正
このPHPファイルでは、記事本文のダブルレクタグルを設定していきます。
以下のコードの<!– ココに〇〇用広告コードを挿入–>というコメントを広告コードに変更し、指定の場所に追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
?> <?php if (wp_is_mobile()) : ?> <div class="sponsored-link">スポンサーリンク</div> <!-- ココにスマホ用広告コードを挿入--> <?php else: ?> <div class="sponsored-link">スポンサーリンク</div> <div class="left-rectangle"> <!-- ココにPC用広告コード（左側）を挿入--> </div> <div class="right-rectangle"> <!-- ココにPC用広告コード（右側）を挿入--> </div> <?php endif; ?> <?php |
以下の場所に追加しましょう。
広告の前には、スポンサーリンクの表記が必要になりますので、注意しましょう！
index.phpの修正
このPHPファイルでは、トップページのダブルレクタグル表示を設定します。先ほどと同様に、以下のコードを指定の場所に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if (wp_is_mobile()) : ?> <div class="sponsored-link">スポンサーリンク</div> <!-- ココにスマホ用広告コードを挿入--> <?php else: ?> <div class="sponsored-link">スポンサーリンク</div> <div class="left-rectangle"> <!-- ココにPC用広告コード（左側）を挿入--> </div> <div class="right-rectangle"> <!-- ココにPC用広告コード（右側）を挿入--> </div> <?php endif; ?> |
追加する場所はこちらです。
archive.phpの修正
このPHPファイルでは、カテゴリー別一覧及びタグ別一覧のダブルレクタグルを設定します。同様に、以下のコードを指定の場所に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if (wp_is_mobile()) : ?> <div class="sponsored-link">スポンサーリンク</div> <!-- ココにスマホ用広告コードを挿入--> <?php else: ?> <div class="sponsored-link">スポンサーリンク</div> <div class="left-rectangle"> <!-- ココにPC用広告コード（左側）を挿入--> </div> <div class="right-rectangle"> <!-- ココにPC用広告コード（右側）を挿入--> </div> <?php endif; ?> |
コードは以下の場所に追加します。
search.phpの修正
このPHPファイルでは、検索結果一覧のダブルレクタングルを設定します。これまでと同様に以下のコードを指定の場所に追加します。
追加するコードは、index.phpや archive.phpに追加した内容と全く同じですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if (wp_is_mobile()) : ?> <div class="sponsored-link">スポンサーリンク</div> <!-- ココにスマホ用広告コードを挿入--> <?php else: ?> <div class="sponsored-link">スポンサーリンク</div> <div class="left-rectangle"> <!-- ココにPC用広告コード（左側）を挿入--> </div> <div class="right-rectangle"> <!-- ココにPC用広告コード（右側）を挿入--> </div> <?php endif; ?> |
index.phpや archive.phpの場合と同じような場所に追加していきます。
style.cssの修正
ここまでで、広告を表示する場所を指定できましたので、あとはデザインを調整します。
style.cssの最後に、以下のコードを追記して完了です。
余白はご自由に調整してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.sponsored-link { text-align: center; margin-bottom: 8px; } .left-rectangle { float: left; width: 336px; margin-left: 1em; } .right-rectangle { float: right; width: 336px; margin-right: 1em; } @media screen and (max-width: 1160px) { .left-rectangle { float: none; width: 336px; margin: 0 auto; } .right-rectangle { float: none; width: 336px; margin: 0 auto; } } |
内容はとてもシンプルで、１行目から５行目で「スポンサーリンク」の表記を中央寄せにしています。
６行目から11行目は左側の広告の表示設定、12行目から17行目は右側の広告の表示設定です。それぞれ、左寄せ、右寄せにしています。
18行目からはブラウザの幅が1160pxより狭くなった場合の表示設定をしています。ダブルレクタングルを止め、広告が縦並びになるようにしています。
いかがでしたか？ダブルレクタングルにするとクリック率も上がると言われていますので、参考にしてみてください。
