こんな人におすすめ記事
- WordPressでブログを運営している
- Googleアドセンスに合格した
- インフィード広告をキレイに設置したい
ツクルカ 今回は、Wordpressのトップページに表示する記事と記事の紹介の間に設置するインフィード広告をきれいに表示する方法について解説します。
インフィード広告とは？
インフィード広告は、FacebookやTwitterなどのSNSのコンテンツとコンテンツの間（以下、フィード）に表示されるコンテンツの体裁をした広告のことです。
Googleアドセンス広告の審査に通過すると、このインフィード広告をブログのトップページなどに設置することができるようになります。
しかし、このインフィード広告を自動で作成するとページのデザインに合わない違和感のあるデザインで表示されてしまうことが多々あります。
違和感のあるインフィード広告は一目で広告であると分かってしまうため、広告収入が伸びません。
広告収入を伸ばすため、ページレイアウトに違和感なく表示するためのコツを紹介します。
※なお、今回の手法は、SEO対策に優れたWordpressのテーマ「賢威8」を使用して解説しています。
Google広告でインフィード広告を作成する
では、元になる広告ユニットを作成していきます。
Google広告にログインし、「広告」→「サマリー」→「インフィード広告」を選択します。
新しいインフィード広告を作成するためのウィザードを立ち上げ、「手動で広告スタイルを作成する」を選択します。
選択すると広告のスタイル（レイアウト）を選択できます。
賢威8のデスクトップパソコンのデフォルトレイアウトでは、「横の画像」を選択します。
スマートフォンサイトでは、「上部の画像」を選択します。
デスクトップとスマートフォンではそれぞれレイアウトが異なるため、一つずつ作成をしていきます。
今回は、デスクトップのインフィード広告から作成するため「横の画像」を選択し、「次へ」をクリックします。
デスクトップの広告スタイル作成手順
インフィード広告をキレイに表示するためには、以下の5つの箇所を調整します。
- グローバルオプション
- イメージ
- 見出し
- 説明
- ボタン
1.グローバルオプション
グローバルオプションで、インフィード広告全体のレイアウトを調整します。
レイアウトの調整は、「パディング」の数値を変更することで調整できます。
パディングを左から「上・右・下・左」の順に、ページの余白に合わせて設定します。
賢威8の場合は、すべて「０」で大丈夫です。
- パディング：0
2.イメージ
イメージの設定で、サムネイル周辺のレイアウトを調整します。
イメージでは余白の調整に加えて、画像のサイズを設定します。
賢威8では、以下のように設定します。
- 画像の縦横比：35％
- パディング：0・15・10・0
3.見出し
フィードの見出しに合うように、フォントサイズ・パディング（余白）を設定します。
賢威8での見出しは、以下のように設定します。
- フォントサイズ：16px
- パディング：0・0・10・0
4.説明
説明ではフォントのサイズとパディングに加えて、色も調整します。
賢威8での見出しは、以下のように設定します。
- フォントサイズ：14px
- 色：#333333
- パディング：0・0・10・0
5.ボタン
ボタンでは、フォントと枠線の色を調整できます。
ご自身のボタンの色に合わせると、さらにコンテンツと見た目を同じにできます。
- フォントの色：任意
- 枠線の色：任意
ボタンの設定まで終われば、「保存してコードを取得」をクリックします。
インフィード広告をフィードに設定する
インフィード広告をブログのトップページに表示する方法には、「ワードプレスのプラグイン」か、「子テーマのPHPを編集する」の2パターンあります。
今回は、子テーマのPHPを編集する方法をご紹介します。
子テーマのPHPを編集する手順
賢威8で編集するPHPは、以下の2つのファイルです。
- index.php（メインインデックスのテンプレート）
- content-archive.php (template-parts/content-archive.php)
WordPressのPHPでは、親テーマではなく子テーマを編集します。
親テーマはアップグレードされることもあるため、親テーマを編集した後にアップグレードをするとファイルが初期化されてしまいます。
ファイルの初期化を避けるため、WordpressのPHPは子テーマを編集します。
編集する前の準備として、FTPソフトを使い上記2つのファイルをサーバー上にアップしておきます。
1.メインインデックスのテンプレート（index.php）を編集する
メインインデックスのテンプレート（index.php）に、インフィード広告を表示するコードを入力します。
WordPressの管理画面で、「外観」→「テーマエディター」→「index.php（メインインデックスのテンプレート）」を選択します。
開いたファイルの16行目（get_header(); ?>の下）に、以下のコードを貼り付けます。
<?php
$ads_infeed = array( 2 , 5 );//何番目の記事の後に表示するかを指定
$ads_infeed_count = 1;
?>
arrayの中の数値を変更することで、インフィード広告の表示位置も調整できます。
2.content-archive.phpを編集する
content-archive.phpに先ほど設定した広告コードを貼り付けます。
しかし、今回はスマホとデスクトップの表示を分けるため、まずスマホとデスクトップの表示を分けるためのコードを貼り付けます。
「template-parts」→「content-archive.php」を選択し、以下のコードを52行目に設置します。
<?php if(wp_is_mobile()): ?>
スマホの広告コード
<?php else: ?>
デスクトップの広告コード
<?php endif; ?>
上記コードを設置後、「デスクトップの広告」のところに先ほど作成したデスクトップ用の広告コードを貼り付けます。
「ファイルを更新」をクリックすれば、ひとまずデスクトップの設定は完了です。
デスクトップに設置したインフィード広告（見本）
スマートフォンサイトの広告スタイル作成手順
スマートフォンサイトのインフィード広告もデスクトップと同じ手順で設定していきます。
デスクトップとの設定の違いは、主に「イメージ」のみです。
他の設定は、ほぼデスクトップと同じです。
1.グローバルオプション
グローバルオプションは、デスクトップと同じパディングを「0」に設定します。
- パディング：0
2.イメージ
スマホサイトではイメージを以下のように設定します。
- 画像の縦横比：100％
- パディング：0・0・10・0
3.見出し
見出しは、表示位置のみデスクトップと異なります。
- スタイル：中央寄せ
- フォントサイズ：16px
- パディング：0・0・10・0
4.説明
デスクトップと同じ設定にします。
- フォントサイズ：14px
- 色：#333333
- パディング：0・0・10・0
5.ボタン
デスクトップと同じ設定にします。
- フォントの色：任意
- 枠線の色：任意
ボタンの設定まで完了したらデスクトップと同様に広告コードを表示し、コードをコピーします。
コピーしたコードを先ほど設定した「スマホの広告コード」と差し替えれば、インフィード広告の設定は完了です。
スマートフォンに設置したインフィード広告（見本）
まとめ
WordPressのフィードにキレイにインフィード広告を設置する方法をご紹介しました。
それぞれのテーマによって設定する数値は異なります。
主に、画像の縦横比とパディング（余白）の調整のみで、ある程度違和感のないインフィード広告を表示することは可能です。
ご自身のフィードに合うように数値を調整し、お試しください。
WordPressのテーマが違う方は、画像の縦横比やパディングを一度リセット（１００％と0）して、ご自身のサイトレイアウトに馴染むように数値を微調整するとキレイに設定できます。
