AFFINGER6 カスタマイズ

【AFFINGER6】アドセンス広告を横並び表示する方法+αカスタマイズあり

alt=Googleadsense 広告横並び ダブルレクタングル

WordPressテーマ「AFFINGER6」で設定する「Googleアドセンス広告を横並び(ダブルレクタングル)で表示する方法」を解説していきます。

こんにちは。WordPressテーマ研究家SHINです。

 

AFFINGER5はたくさんのウィジェットが実装されているので、簡単にアドセンス広告を横並び表示できます。表示可能な場所は王道の3箇所。

ダブルレクタングル表示箇所

  1. 投稿記事の上下
  2. 固定記事の上下
  3. 各途中見出し前

この3箇所へ横並び表示する方法を解説していきます。

 

アドセンス広告コードを「AFFINGER5管理」「ウィジェット」2つの指定箇所に貼り付けるだけで、アドセンス広告を横並び(ダブルレクタングル)で表示が可能です。

投稿記事で広告コードを都度貼り付けるようなアナログ作業は一切なく、全て「自動化」で広告を表示できます。

 

また当記事では、アドセンス横並び広告の下に「リンク広告」を表示する方法も解説していきますので、特に記事下にお試し下さい。

広告ユニット完成イメージ

アドセンスリンク広告 (2)

 

では早速実装していきましょう。

 

Googleアドセンス広告コードを準備

横並び表示用アドセンス広告コード取得方法

まずレクタングル広告(横並び)用の広告ユニットを準備します。

 

step
1
GoogleAdSenseにログイン後「広告」>「サマリー」>「広告ユニットごと」>「ディスプレイ広告」と進みます。

alt=googleアドセンス 広告作成

 

step
2
ここで「広告ユニット名」を入力し、広告サイズは「固定」を選択して、幅を「336」高さを「280」と入力して「完了」で進みます。

alt=googleアドセンス 広告作成2

設定補足

  1. 広告ユニットの名前…「記事下レクタングル広告」など分かりやすく名前を入力。
  2. 広告サイズ…「固定」を選択して「幅336」「高さ280」と入力。
  3. 最後に「作成」をクリックして進みましょう。

 

step
3
これで幅336px × 高さ280pxサイズのアドセンス広告コードが無事発行。下にある「コードをコピー」をクリックして「完了」に進みましょう。

alt=googleアドセンス 広告作成3

 

AMPページの場合

alt=googleアドセンス広告 amp

AMP専用コードを使用する場合

AMPコードはAMPページでしか広告が表示されないので、記事(投稿・固定)もAMPページにする必要があるので注意です。

またAFFINGER5には、ステップ1にある「コード入力」をする必要はありません。「AFFINGER5管理」内にある広告コード入力箇所へ記述するだけでOK。

alt=AFFINGER5 AMP広告コード入力

 

投稿・固定記事上下に横並び表示する方法

アドセンス広告コードを取得したら、さっそくAFFINGER5で投稿ページ、固定ページの記事上または下に広告を横並び(ダブルレクタングル)表示する手順を見ていきましょう。

 

step
1
まずWordPressダッシュボードから「AFFINGER5管理」へ進みます。

alt=AFFINGER5 ダブルレクタングル設定3

 

step
2
メニューから「投稿・固定記事」>「PC閲覧時に~」にチェックを入れておきます。最後は右上「保存」を忘れずに。

alt=AFFINGER5 ダブルレクタングル設定4

 

step
3
次にメニューから「デザイン」へ進み、PC閲覧時のサイトの幅を「1114px」へ変更します。右上の「保存」を忘れずに。

alt=AFFINGER5 ダブルレクタングル設定5

 

step
4
まずWordPressダッシュボードから「外観」>「ウィジェット」へ進みます。

alt=AFFINGER5 ダブルレクタングル設定

 

step
5
左側に並ぶウィジェットの「カスタムHTML」を選択し、「広告・Googleアドセンス用336px(A)」を選び、ウィジェットを追加します。さらに右側でストックされたカスタムHTMLへアドセンス広告コード貼り付けます。

alt=AFFINGER5 ダブルレクタングル設定2
SHIN
SHIN
「広告・Googleアドセンス用336px(A)」は、左右横並びの右側にあたります。

同じ要領で左側にもウィジェット「カスタムHTML」を追加し、全く同じ広告コードを貼り付けます。以上!これで横並びダブルレクタングルが完成です。

 

指定の見出し前に横並び表示する方法

AFFINGER5には、投稿記事・固定記事それぞれに1~5までの見出し前へ広告を自動表示できる機能があります。

この便利な機能を使って、指定する見出し前にアドセンス広告を横並び(ダブルレクタングル)表示する方法を見ていきましょう。

 

step
1
まずWordPressダッシュボードから「AFFINGER5管理」へ進みます。

alt=AFFINGER5 ダブルレクタングル設定3

 

step
2
左メニューの「Google連携/広告」に進み、見出し前に広告挿入欄へ広告コードを貼り、記事・場所をチェックで選択して「保存」で完了です。

alt=AFFINGER5 見出し ダブルレクタングル設定

<div class="clearfix responbox50">
<div class="lbox">
アドセンス広告コード(左)
</div>
<div class="rbox">
アドセンス広告コード(右)
</div>
</div>

SHIN
SHIN
赤字にアドセンス広告コードを貼り替えて使用できます。

注意したいのは「1見出し以上間隔を空ける」ことです。全見出しに表示すると・・かなり"ウザく"なりますので要注意です…。

 

 

横並び広告下へリンク広告をセットで表示する方法

最後に、アドセンス広告横並びの下に「リンク広告」もセット表示する方法です。

このセット広告は「記事上」もしくは「記事下」限定で表示することをおすすめします。各見出しで表示するのは、かなり"広告臭"が強いのでおすすめできません…。

 

step
1
GoogleAdSenseにログイン後「広告」>「サマリー」>「広告ユニットごと」>「リンク広告」と進みます。

alt=AFFINGER5 リンク広告セット表示設定

 

step
2
ここでは「広告ユニット名」を入力し、広告タイプを「横長タイプ」にし、広告サイズは「レスポンシブ」を選択して「作成」へ進みます。

alt=AFFINGER5 リンク広告セット表示設定2

設定補足

  1. 広告ユニットの名前…「ダブルレクタングル下リンク広告」など分かりやすく名前を入力。
  2. 広告タイプ…「横長タイプ」を選択。
  3. 広告サイズ…「レスポンシブ」を選択。
  4. 広告のスタイル…テキスト色はクリック色に近いカラーがベター。背景色は白ベースがおすすめ。

 

step
3
リンク広告も作成後は広告コードが発行されるので、こちらをクリップボードにコピーしておきます。

alt=AFFINGER5 リンク広告セット表示設定3

 

step
4
ウィジェット「広告・Googleアドセンス用336px(A)」にセットしたダブルレクタングル用広告コードを、「投稿記事の下に一括表示」のウィジェットへ移動し、更にその下へリンク広告コードを貼った「テキスト」を追加します。

alt=AFFINGER5 リンク広告セット表示設定4
SHIN
SHIN
ダブルレクタングルの「テキスト」、その下へリンク広告の「テキスト」をセットすればOK。ダブルレクタングルの横幅に合わせてリンク広告を表示できます。

これでダブルレクタングル+リンク広告のセット表示ができます。

 

 

まとめ

今回は、アドセンス広告王道の横並び表示(ダブレクタングル)を投稿記事・固定記事の上下と各見出し前、またその下へ横幅を合わせて「リンク広告」を表示する3つの方法を解説しました。

AFFINGER5はウィジェットが豊富なので、いろんなタイプのアドセンス広告も表示場所がたくさんあります。ぜひ一度ウィジェットを確認してみてください。

 

ps.アドセンスの基本イロハが掲載されている書籍「Google AdSense マネタイズの教科書」はおすすめ。

アドセンス広告最適化の基本・クリック解析・ブログデザイン別広告表示最適化など、アドセンス入門として手元に持っておきたい書籍。アドセンス戦略をもっと知りたい方は、ぜひチェックしてみてください。

  • この記事を書いた人
しん

SHIN

▶︎ブログ運営7年▶︎3サイトメディア運営▶︎大手サービス業に勤めながらブログ運営・WEBライターを兼務▶︎コーヒーとYouTubeが大好物▶︎座右の銘は「昨日の自分に勝つ」

-AFFINGER6, カスタマイズ
-