WordPressテーマ「AFFINGER6」で設定する「Googleアドセンス広告を横並び(ダブルレクタングル)で表示する方法」を解説していきます。
こんにちは。WordPressテーマ研究家SHINです。
AFFINGER5はたくさんのウィジェットが実装されているので、簡単にアドセンス広告を横並び表示できます。表示可能な場所は王道の3箇所。
ダブルレクタングル表示箇所
- 投稿記事の上下
- 固定記事の上下
- 各途中見出し前
この3箇所へ横並び表示する方法を解説していきます。
アドセンス広告コードを「AFFINGER5管理」「ウィジェット」2つの指定箇所に貼り付けるだけで、アドセンス広告を横並び(ダブルレクタングル)で表示が可能です。
投稿記事で広告コードを都度貼り付けるようなアナログ作業は一切なく、全て「自動化」で広告を表示できます。
また当記事では、アドセンス横並び広告の下に「リンク広告」を表示する方法も解説していきますので、特に記事下にお試し下さい。
広告ユニット完成イメージ
では早速実装していきましょう。
Googleアドセンス広告コードを準備
横並び表示用アドセンス広告コード取得方法
まずレクタングル広告(横並び)用の広告ユニットを準備します。
step
1GoogleAdSenseにログイン後「広告」>「サマリー」>「広告ユニットごと」>「ディスプレイ広告」と進みます。
![alt=googleアドセンス 広告作成](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/qwqwqwqqwqw_optimized.png?resize=1032%2C560&ssl=1)
step
2ここで「広告ユニット名」を入力し、広告サイズは「固定」を選択して、幅を「336」高さを「280」と入力して「完了」で進みます。
![alt=googleアドセンス 広告作成2](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/trtrtrtrtrr_optimized.png?resize=1060%2C557&ssl=1)
設定補足
- 広告ユニットの名前…「記事下レクタングル広告」など分かりやすく名前を入力。
- 広告サイズ…「固定」を選択して「幅336」「高さ280」と入力。
- 最後に「作成」をクリックして進みましょう。
step
3これで幅336px × 高さ280pxサイズのアドセンス広告コードが無事発行。下にある「コードをコピー」をクリックして「完了」に進みましょう。
![alt=googleアドセンス 広告作成3](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/yuyuyuyuyuyuy_optimized.png?resize=797%2C637&ssl=1)
AMPページの場合
![alt=googleアドセンス広告 amp](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/rhrhrhrhrrhrh_optimized.png?resize=752%2C671&ssl=1)
AMP専用コードを使用する場合
AMPコードはAMPページでしか広告が表示されないので、記事(投稿・固定)もAMPページにする必要があるので注意です。
またAFFINGER5には、ステップ1にある「コード入力」をする必要はありません。「AFFINGER5管理」内にある広告コード入力箇所へ記述するだけでOK。
投稿・固定記事上下に横並び表示する方法
アドセンス広告コードを取得したら、さっそくAFFINGER5で投稿ページ、固定ページの記事上または下に広告を横並び(ダブルレクタングル)表示する手順を見ていきましょう。
step
1まずWordPressダッシュボードから「AFFINGER5管理」へ進みます。
![alt=AFFINGER5 ダブルレクタングル設定3](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/wswswswwsws_optimized.png?resize=744%2C215&ssl=1)
step
2メニューから「投稿・固定記事」>「PC閲覧時に~」にチェックを入れておきます。最後は右上「保存」を忘れずに。
![alt=AFFINGER5 ダブルレクタングル設定4](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/erereerererereerererererrer.png?resize=975%2C203&ssl=1)
step
3次にメニューから「デザイン」へ進み、PC閲覧時のサイトの幅を「1114px」へ変更します。右上の「保存」を忘れずに。
![alt=AFFINGER5 ダブルレクタングル設定5](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/mkmkmkmkmk_optimized.png?resize=935%2C215&ssl=1)
step
4まずWordPressダッシュボードから「外観」>「ウィジェット」へ進みます。
![alt=AFFINGER5 ダブルレクタングル設定](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/rthgrghrrt_optimized.png?resize=762%2C259&ssl=1)
step
5左側に並ぶウィジェットの「カスタムHTML」を選択し、「広告・Googleアドセンス用336px(A)」を選び、ウィジェットを追加します。さらに右側でストックされたカスタムHTMLへアドセンス広告コード貼り付けます。
![alt=AFFINGER5 ダブルレクタングル設定2](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/edededededed.png?resize=829%2C516&ssl=1)
![SHIN](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png?resize=100%2C100&ssl=1)
同じ要領で左側にもウィジェット「カスタムHTML」を追加し、全く同じ広告コードを貼り付けます。以上!これで横並びダブルレクタングルが完成です。
指定の見出し前に横並び表示する方法
AFFINGER5には、投稿記事・固定記事それぞれに1~5までの見出し前へ広告を自動表示できる機能があります。
この便利な機能を使って、指定する見出し前にアドセンス広告を横並び(ダブルレクタングル)表示する方法を見ていきましょう。
step
1まずWordPressダッシュボードから「AFFINGER5管理」へ進みます。
![alt=AFFINGER5 ダブルレクタングル設定3](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/wswswswwsws_optimized.png?resize=744%2C215&ssl=1)
step
2左メニューの「Google連携/広告」に進み、見出し前に広告挿入欄へ広告コードを貼り、記事・場所をチェックで選択して「保存」で完了です。
![alt=AFFINGER5 見出し ダブルレクタングル設定](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/hjjjjjjjjhg_optimized.png?resize=972%2C296&ssl=1)
<div class="clearfix responbox50">
<div class="lbox">
アドセンス広告コード(左)
</div>
<div class="rbox">
アドセンス広告コード(右)
</div>
</div>
![SHIN](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png?resize=100%2C100&ssl=1)
注意したいのは「1見出し以上間隔を空ける」ことです。全見出しに表示すると・・かなり"ウザく"なりますので要注意です…。
横並び広告下へリンク広告をセットで表示する方法
最後に、アドセンス広告横並びの下に「リンク広告」もセット表示する方法です。
このセット広告は「記事上」もしくは「記事下」限定で表示することをおすすめします。各見出しで表示するのは、かなり"広告臭"が強いのでおすすめできません…。
step
1GoogleAdSenseにログイン後「広告」>「サマリー」>「広告ユニットごと」>「リンク広告」と進みます。
![alt=AFFINGER5 リンク広告セット表示設定](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/wewwdwdwdwwdw_optimized.png?resize=1060%2C388&ssl=1)
step
2ここでは「広告ユニット名」を入力し、広告タイプを「横長タイプ」にし、広告サイズは「レスポンシブ」を選択して「作成」へ進みます。
![alt=AFFINGER5 リンク広告セット表示設定2](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/nmnmnmnmn_optimized.png?resize=1060%2C600&ssl=1)
設定補足
- 広告ユニットの名前…「ダブルレクタングル下リンク広告」など分かりやすく名前を入力。
- 広告タイプ…「横長タイプ」を選択。
- 広告サイズ…「レスポンシブ」を選択。
- 広告のスタイル…テキスト色はクリック色に近いカラーがベター。背景色は白ベースがおすすめ。
step
3リンク広告も作成後は広告コードが発行されるので、こちらをクリップボードにコピーしておきます。
![alt=AFFINGER5 リンク広告セット表示設定3](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/dededede_optimized.png?resize=817%2C639&ssl=1)
step
4ウィジェット「広告・Googleアドセンス用336px(A)」にセットしたダブルレクタングル用広告コードを、「投稿記事の下に一括表示」のウィジェットへ移動し、更にその下へリンク広告コードを貼った「テキスト」を追加します。
![alt=AFFINGER5 リンク広告セット表示設定4](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2020/03/wdwwddwdwdw_optimized.png?resize=867%2C488&ssl=1)
![SHIN](https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png?resize=100%2C100&ssl=1)
これでダブルレクタングル+リンク広告のセット表示ができます。
まとめ
今回は、アドセンス広告王道の横並び表示(ダブレクタングル)を投稿記事・固定記事の上下と各見出し前、またその下へ横幅を合わせて「リンク広告」を表示する3つの方法を解説しました。
AFFINGER5はウィジェットが豊富なので、いろんなタイプのアドセンス広告も表示場所がたくさんあります。ぜひ一度ウィジェットを確認してみてください。
ps.アドセンスの基本イロハが掲載されている書籍「Google AdSense マネタイズの教科書」はおすすめ。
アドセンス広告最適化の基本・クリック解析・ブログデザイン別広告表示最適化など、アドセンス入門として手元に持っておきたい書籍。アドセンス戦略をもっと知りたい方は、ぜひチェックしてみてください。