【図解】WordPressにアドセンス広告を貼る方法と効果的な設置場所

WordPressにアドセンス広告を設置する方法 Googleアドセンス
2019.10.23

今回は効果的なGoogleアドセンスの貼り付け位置と貼り方を解説していきます。

アドセンスの登録や審査が終わって広告コードの作成までできる前提で進めますが、まだ登録や審査が終わってない方は先に済ませておいて下さい。

【図解】Googleアドセンスの申込み・登録申請方法から審査までの流れ
今回は実際にGoogleアドセンスに申込みして登録する流れを紹介していきます。 ...
affiliate150.com
2022.08.19
もしもへ https://affiliate150.com/important-point
Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由
Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...
affiliate150.com
2023.01.24

効果的なアドセンスの貼り付け位置

アドセンスは設置する場所によってアドセンス広告の収入はとても大きな違いがでてきます。設置場所を変えるだけで収入が２倍になったりする場合もあります。

これはブログのジャンルやレイアウトによってそれぞれのベストな位置があるためベストな位置というのはブログの内容やジャンルによって違いますが、個人的な定番の掲載位置について紹介します。

PC版個別ページのアドセンス効果的な位置

サイトのジャンルによって効果的なアドセンスの位置は変わりますが、個人的に色々試して効果的だったのがこちら（PCページの場合）。

  • ヘッダー周辺に１つ（リンクユニットor横長広告）
  • 記事中に１つか２つ（レクタングル大or記事内広告orリンクユニット）
  • 記事下に１つ（レクタングル大or記事内広告）
  • サイドバーの一番上（レクタングル）

※（）内はおすすめの広告サイズ。レスポンシブでも可

こんな感じですが、もちろんサイトごとに結果も違ってくると思いますので、色々試してみる事をおすすめします。

アドセンスの配置PC

MEMO

個人的にPCページのヘッダー周辺の広告は「パンくずリスト」の上にリンクユニットを設置する事が多いです（スマホではモバイルバナー）。

それから記事下に２つ横並びに設置する（ダブルレクタングル）も試しましたが、私の多くのブログの場合は縦に２つ並べる方が効果があったので横に２つ並べるなら縦に２つ並べた方が良いと思っています（最近は記事下は１つだけにしてます）。

記事下などに２つ並べる場合の注意点としては前述したスマートフォンの1ビュー問題。PCページで記事下に２つ並べたりする場合は、スマートフォンでは記事下に１つだけ表示させるように条件分岐する必要があります。これはまた後から説明しますね。

スマートフォンページのアドセンス効果的な配置

  • ヘッダーのタイトル周辺（モバイルバナー）
  • 記事中に１つ（レクタングルor記事内広告orリンクユニット）
  • 記事下に１つ（レクタングルor記事内広告）

スマートフォンページの場合、ヘッダーのタイトル下に設置する広告はモバイル用（320×100）の物を使用します。

モバイルバナー300

ここにレクタングル（300×250）のような大き目のサイズの広告を貼ると、コンテンツを押し下げる広告になってしまい、これもあまり良くありません。検索順位に影響する可能性もあるので注意。

WordPressへアドセンスを設置する方法を3通りの中から選ぶ

WordPressへアドセンス広告を貼り付ける方法は大きく３つあります。

  1. アドセンスの自動広告におまかせ（自分で設置場所を決めない）
  2. アドセンス広告を簡単に設置できるテーマを選ぶ
  3. 自分でPHPファイルを編集して埋め込む

１つ１つやり方を説明していきます。

1.アドセンスの自動広告におまかせ（自分で設置場所を決めない）場合

アドセンスには自動広告機能があります。

自動広告を利用する場合はWordPressに１つのコードを追加するだけで自動で広告が表示されるようになります。

コード１つ設置するだけなのでとても簡単ですし、アドセンスが自動で判断した場所に自動で判断したサイズの広告を表示してくれます。

デメリットとしては意図しない場所（文の途中など）にも広告が出てくるのでユーザー的にはちょっとうざい場合もあります。

ただ、表示したくないページの設定や、表示数のコントロールもある程度可能です。

自動広告でもいいよって方は自動広告を使うのが一番簡単です。

【図解】Googleアドセンスの自動広告の使い方。自動広告の設置と設定方法、広告の種類についても紹介
かなり今更感があるのですが、Googleアドセンスの新機能「自動広告」が追加され...
affiliate150.com
2019.10.12

2．アドセンス広告を簡単に設置できるテーマを選ぶ

WordPressの広告を設置する場合、phpを編集して全てのページの記事下とか記事中などに広告設置できます。ただ、テーマが山のようにあって編集する場所やファイル名も全部違います。

なので「利用しているテーマ名　アドセンスの貼り方」のような感じで検索して調べる必要があります。

ただ、最近は無料のテーマでもアドセンスを自分の好きな位置に設置できるテーマが結構あります。

特におすすめなのは無料のテーマ「Cocoon」です。無料とは思えないほどのクオリティーです。

初心者の方でもコードなど分からなくても簡単にカスタマイズや設定、広告の貼り付けまでできてしまいます。

無料テーマCocoonを使った場合にアドセンス設置の例

無料テーマCocoonでアドセンスの広告を貼り付け方、設置の例を紹介してみます。

Cocoon設定から⇒「広告」と進み、「全ての広告を表示」にチェック。

Cocoonに忍者AdMaxを貼る方法5

アドセンス設定という部分の「広告コード」という部分にアドセンスのレスポンシブの広告コードを設置（事前にアドセンスで広告作成が必要です）。

Cocoonでアドセンスを設置する手順1

「リンクユニットのコード入力」もクリックしてリンクユニットのコードも入力しておきます（事前にアドセンスで広告作成が必要です）。

Cocoonでアドセンスを設置する手順2

次にアドセンスの表示方式を決めます。

  • アドセンス自動広告のみ利用：おまかせ
  • 自動広告とマニュアル広告を併用：自動広告&自分で位置を決める
  • マニュアル広告設定：自分で位置を決める

おすすめは自動広告とマニュアル広告の併用ですが、自動広告も入っていると思わぬ所に広告が表示されたりもします。

私はマニュアル広告設定（自前で位置を設定）にチェックを入れてます。

Cocoonに忍者AdMaxを貼る方法2

後はアドセンス広告表示したい場所にチェックを入れていくだけなのでとても簡単に広告が設置できます。

Cocoonに忍者AdMaxを貼る方法3

おすすめの位置はは「タイトル下」「本文中（全てのH2見出し手前に広告を挿入）」「記事下」です。

それぞれの設置場所で詳細が設定できます。「AUTO（おまかせ）」や「ダブルレクタングル（２つ横並び）」など選択できます（私はautoにしてます）。

最後に保存を忘れないように。

Cocoonにアドセンを貼る方法4

広告を表示させたくないページには「広告を除外する」という設定も可能ですし、「広告」設定からカテゴリごとの設定も行えます。

Cocoonでアドセンスを設置する手順3

という感じでCocoonの場合は好きな場所に好きな広告を設置することができるのでとても簡単です。

【図解】Cocoonでアドセンス広告を設置する手順とその他広告の設定方法
Cocoonでは管理画面からアドセンス広告の設置ができます。自分の好きな位置にチ...
affiliate150.com
2022.09.24

3.自分でphpファイルを編集して埋め込む場合

自分でphpファイルを編集してアドセンスを設置する方法も紹介します。ある程度HTMLやCSSなどの知識も必要になります。

また、前述したようにWordPressのテーマによって編集するphpファイル、設置場所も違ってきます。

今回は公式テーマの場合で紹介してます。

WordPressにアドセンス設置する場合に役立つ条件分岐

WordPressに広告を設置する場合はPCページ、スマホページで広告を使い分ける場合には条件分岐なども使います。

別に覚える必要はないので、一応知っておくだけでOKです。

１．もし個別ページなら広告を表示

<?php if ( is_single() ) : ?>
ここに広告のコード
<?php endif; ?>

２．もしスマートフォン（モバイル）ページなら広告を表示

<?php if (wp_is_mobile()) :?>
ここに広告のコード
<?php endif; ?>

３．PCページだけ広告を表示（スマートフォンでは非表示）

<?php if (!wp_is_mobile()) :?>
ここに広告のコード
<?php endif; ?>

＊条件分岐の部分に「!」を入れる事で「それ以外」という条件分岐ができる。
４．PCページとスマートフォンページでサイズを分ける場合

<?php if (wp_is_mobile()) :?>
ここにスマートフォン用の広告のコード
<?php else: ?>
ここにPC用の広告コード
<?php endif; ?>

とりあえず基本的な物は以上ですが、２つの条件をミックスする事もできます。

<?php if (wp_is_mobile() && is_single()) :?>
ここに広告のコード
<?php endif; ?>

このように「&&」を入れて条件を繋げると「スマートフォンページ」で「個別ページ」なら広告を表示という風にもできます。

この条件分岐はWordPressで頻繁に使うのでこれを使ってアドセンスの広告を設置していきます。

【手動】個別ページの記事下にアドセンスを入れる場合

個別ページ、固定ページは別のテンプレートになるので、まずは個別ページの記事下にアドセンスを入れる方法を解説します。

記事下にアドセンスを入れるパターンとしては以下の２つがあります。

ディスプレイ広告

  • テキスト&ディスプレイ広告
  • 記事内広告(レスポンシブ)

上記はどちらでもOKです。サイトによって効果が違ってくるので期限を１週間程度決めてどちらが効果があるか効果測定をしてみると良いです。

「テキスト広告とディスプレイ広告」を選択する場合はPC用に「336×280px」スマホ用に「300×250px」の広告を準備。

MEMO

記事下に「横並びで２つ設置したい」場合はこの記事をどうぞ。

⇒アドセンス広告を横並び（ダブルレクタングル）で設置する方法

ここはテーマによって編集するphpなどが違うのですが、一応公式テーマ「Twenty Seventeen」の場合でやってみます。

「テーマ編集」⇒「content.php」に次のように「エントリーコンテント（記事本文）の閉じタグ」がありました。

</div><!-- .entry-content -->

WordPressの記事下に広告を設置する方法1

要は本文がここで終わりという事ですので、これの直前に広告のコードを入れます。

※もしこのコードがない場合でもそれっぽい位置に「テスト」とテキストを入れて保存し、表示される場所を確認してみると確実です。

【手動】個別記事の記事下にディスプレイ広告（レクタングル大）を入れる場合のコード

レクタングル大（336×280px）を入れる場合は条件分岐をしてスマホではレクタングル（300×250px）を表示させます（はみ出すので）。

※後からCSSで位置調整できるように広告スペースに「ad-bottom」という名前をつけてます。

<?php if ( is_single() ) : ?>
<div class="ad-bottom">
<p class="ad-label">スポンサーリンク</p>
<?php if (wp_is_mobile()) :?>

ここにスマートフォン用サイズ（300x250）の広告コード

<?php else: ?>
 
ここにPC用の広告（336×280px）コード

<?php endif; ?>
</div>
<?php endif; ?>

記事下広告の位置調整（CSS）

スタイルシートCSSに以下の記述で位置調整ができます（子テーマCSSの一番下に追加）。

/* 記事下広告位置調整 */
.ad-bottom {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}
/* スマホでは広告もラベルも中央寄せに */
@media screen and (max-width:599px){
	.ad-bottom {text-align:center;}
}
  • margin-top: 20px;広告の上に20pxの余白
  • margin-bottom: 20px; 広告の下に20pxの余白
  • text-align:center;　広告とラベルを中央寄せにしたい場合に記述

という感じです。

個別記事の記事下に「記事内広告」を設置する場合のコード

「記事内広告」はレスポンシブなのでユーザーが使っているデバイスに応じてサイズが自動的に調整されます。

つまりスマホとPCのサイズを分ける必要がありません。

記事内広告

<?php if ( is_single() ) : ?>
<div class="ad-bottom">
<p class="ad-label">スポンサーリンク</p>

ここにアドセンスの記事内広告のコード

</div>
<?php endif; ?>

記事下広告の位置調整（CSS）

こちらも同じくスタイルシートCSSに以下の記述で位置調整ができます（子テーマCSSの一番下に追加）。

/* 記事下広告位置調整 */
.ad-bottom {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}
/* スマホでは広告もラベルも中央寄せに */
@media screen and (max-width:599px){
	.ad-bottom {text-align:center;}
}
  • margin-top: 20px;広告の上に20pxの余白
  • margin-bottom: 20px; 広告の下に20pxの余白
  • text-align:center;　広告とラベルを中央寄せにしたい場合に記述

上記記事下設置のコードは「個別記事だけ」表示するように条件分岐している記述のため、固定ページやトップページは表示されないので固定ページやトップページでも同じように設置してみましょう。

【手動】固定ページに広告を入れる場合

先ほどは個別ページの記事下に２つの広告を入れたので今度は同じように固定ページに入れてみましょう。

私の場合は固定ページのアドセンスは「content-page.php」に記述してます。

content-page.phpにはこのような記述があります。

</div><!-- .entry-content -->

この部分が記事の終わりの部分になるので、上記コードの「直前」に以下のコードを入れていきます。

【手動】固定ページ記事下にディスプレイ広告（レクタングル大）を入れる場合のコード

こちらもレクタングル大（336×280px）を入れる場合は条件分岐をしてスマホではレクタングル（300×250px）を表示させます（はみ出すので）。

<div class="ad-bottom">
<p class="ad-label">スポンサーリンク</p>
<?php if (wp_is_mobile()) :?>

ここにスマートフォン用サイズ（300x250）の広告コード

<?php else: ?>
 
ここにPC用の広告（336×280px）コード

<?php endif; ?>
</div>

【手動】固定ページの記事下に「記事内広告」を設置する場合のコード

「記事内広告」はレスポンシブなのでユーザーが使っているデバイスに応じてサイズが自動的に調整されます。

つまりスマホとPCのサイズを分ける必要がありません。

記事内広告

<div class="ad-bottom">
<p class="ad-label">スポンサーリンク</p>

ここにアドセンスの記事内広告のコード

</div>

ここまで設置できたら個別ページ、それと固定ページの記事下広告は完了。

記事本文中にアドセンスを自動で入れる

記事本文中のアドセンスは非常に効果的。記事途中のアドセンスは１つ１つ貼り付けてもいいですが面倒なので「最初の見出しタグ（h2）」の前に自動で設置できるコードを利用させてもらいます。

簡単に説明すると広告を表示するだけのPHPファイルを作成してそれを最初の見出しタグの直前で呼び出すようにします。これなら全ての個別ページの見出しの直前に自動でアドセンスが表示できます。

手順的には「ad-in-body.php」という新しいファイルをテーマに追加してそのファイルに広告を設置するコードを書き、「fnctions.php」をちょっと編集して記事中の見出しの前で「ad-in-body.php」ファイルを呼び出すという方法。

一応ロリポップ版で説明しておきますね。

ロリポップユーザー専用ページに移動して「サーバーの管理・設定」⇒「ロリポップFTP」と進みます。

ロリポップFTP

ここに最初独自ドメインを設定した時に作った自分のサイトのフォルダがあるのでクリック。

ワードプレス構造-3

そのフォルダの中身一覧が表示されるので、「wp-content」というのをフォルダをクリック。

ワードプレス構造-4

「wp-content」のフォルダの中かから「themes（テーマ）」というフォルダをクリック。

子テーマ-2

「themes（テーマ）」というフォルダの中から現在利用しているテーマを選択。

WordPressにアドセンス広告を設置する方法-1

この現在利用しているテーマフォルダの中に新しくファイルを作成するので、「新規ファイル作成」をクリック。

WordPressにアドセンス広告を設置する方法-2

新規ファイル名を「ad-in-body.php」として保存。ここは名前を付けるだけでOK。

WordPressにアドセンス広告を設置する方法-3

これで使用しているテーマのフォルダ内に「ad-in-body.php」というファイルができます。ファイルを追加して保存したら、WordPressの管理画面に戻り、「外観」⇒「テーマの編集」へと進みます。

テーマの編集画面で右側に先ほど追加した「ad-in-body.php」というファイルがあるのでこれをクリック。

WordPressにアドセンス広告を設置する方法-4

そのファイルを開いたら次のコードを入れます。スマートフォン用の広告とPC用の広告を用意して広告コードの部分を書き換えてね。

<p class="ad-label">スポンサーリンク</p>
<div class="mid-ad">
<?php if (wp_is_mobile()) :?>
スマートフォン用のサイズの広告のコード
<?php else: ?>
PC用の広告コード
<?php endif; ?>
</div>

これで保存したら「ad-in-body.php」ファイルは完成。後はこれを記事中で呼び出すようにしていきましょう。

先ほど作成した「ad-in-body.php」を記事中の見出しの前に呼び出すにはfunctions.php内に次の記述を入れます。

もし子テーマを利用している方でfunctions.phpを初めて作成する場合には注意点があるのでこの記事を参考に。

⇒子テーマにfunctions.phpを追加する時の注意点

functions.phpへの記述はこんな感じです。

//H2見出しを判別する正規表現を定数にする
define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン
  
//本文中にH2見出しが最初に含まれている箇所を返す（含まれない場合はnullを返す）
//H3-H6しか使っていない場合は、h2部分を変更してください
function get_h2_included_in_body( $the_content ){
  if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
    return $h2results[0];
  }
}
 
function add_ads_before_1st_h2($the_content) {
  if ( is_single() ) {//固定ページも表示する場合はis_singular()にする
    ob_start();//バッファリング
    get_template_part('ad-in-body');//広告貼り付け用に作成したテンプレート
    $ad_template = ob_get_clean();
    $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入（最初のH2を置換）
      $count = 1;
      $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

これで最初の見出し「h2」の前に自動的に「ad-in-body.php」が呼び出されるという訳なので簡単。ここでもラベル（スポンサーリンク）と広告部分に名前を付けて後からCSSで位置調整できるようにしておきます。

参考：アドセンスをWordPress記事本文中に配置できる手軽でスマートな方法｜寝ログ

記事中（見出し前）広告の位置調整

記事中（見出し前）の広告が呼び出せるようになったらCSSで位置調整をしておきます。

この広告スペースには先程「mid-ad」という名前をつけておいたので、CSSで位置調整ができます。

/* 見出し前の広告位置調整 */
.mid-ad {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}
/* スマホでは広告もラベルも中央寄せに */
@media screen and (max-width:599px){
	.mid-ad {text-align:center;}
}

【手動】スマートフォンのヘッダーにモバイル広告を入れる

最初に設置した記事下のアドセンスはPCでは２つ縦並びです。でもスマートフォンでみると１つになるようにしています。そのため、もう一箇所ユニット広告が貼れるのでヘッダー（タイトルと説明文の下）に広告を入れておきましょう。

最初にも説明しましたが、ここに大きいサイズの広告（レクタングル）を入れるとコンテンツを押し下げる広告として検索順位にも影響してしまう場合があります。入れるなら「ラージモバイルバナー（320×100）」の広告がおすすめ。

この部分に広告を入れるには子テーマの「header.php」を開いて次の記述を探します。

<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

この部分は多分使っているテーマによって違うと思いますが、通常「h1」でサイトのタイトル、「description」でサイトの説明文が書かれていると思いますのでそれが書いてある場所を探して下さい。

良く分からないって方はこの辺かな？と思う所に「テスト」とテキストを入れて保存し、どこに表示されるか確認してみて下さい。

そのタイトルと説明文の下に次のコードを追加。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<div class="ad-top">
ここにモバイルバナー
</div>
<?php endif; ?>

この部分は明らかに広告と分かる位置なのでラベル（スポンサーリンク）は入れていないサイトがほとんど。心配ならラベルを入れて書いたらOK。ここでも広告に「ad-top」という名前を付けておきます。

ヘッダー広告の位置調整

ヘッダー部分は特に位置調整も必要ないですが、marginで上下にだけ余白が必要なら追加しても良いかなと思います。

/* ヘッダー広告位置調整 */
.ad-top {
	margin-top: 5px;
	margin-bottom: 5px;
}

サイドバーにアドセンス広告を設置する

一応サイドバーにアドセンスのユニット広告とリンクユニットを設置方法も紹介しておきます。もちろんアドセンス以外の広告も同じ手順です。

WordPressの管理画面から「外観」⇒「ウィジェット」と進み、サイドバーに「テキスト」を追加します。

WordPressにアドセンス広告を設置する方法-8

「テキスト」をクリックして開きタイトルに「スポンサーリンク」を入力して「テキスト」を選択し、アドセンスの広告のコードを入れます。

後から位置調整できるように「side-ad」という名前を付けてます。

<div class="side-ad">
ここにアドセンスのコード
</div>

WordPressにアドセンス広告を設置する方法-9

サイドバーの広告位置調整

サイドバーの広告も上下の余白と中央寄せだけでOKです。CSSの一番下に追加していきます。

/* サイドバー広告位置調整 */
.side-ad {
	margin-top: 5px;
	margin-bottom: 5px;
	text-align:center;
}

スマートフォンで広告がはみ出す場合

スマートフォン用の広告は普通横幅300pxの広告を利用する場合が多いですが、スマートフォンで確認すると右に寄って画面から少しだけはみ出している場合があります。その場合にはCSSに次のコードを追加します。はみ出している広告だけ選んで記述ね。

@media screen and (max-width:599px){
.side-ad{magin-left: -10px;} 
.ad-bottom-sm{margin-left:-10px}
.mid-ad{margin-left:-10px}
}

この「@media screen and (max-width:599px)」というのがブラウザの画面が599px以下ならという条件分岐、つまりスマートフォンページならという書き方です。ここにマイナス値の「magin-left」を入れてあげると数値の分だけ左に寄るのでこれで対策できます。

以上WordPressにアドセンス広告の設置は完了です。PC、スマートフォン両方で確認して規約に違反する部分がないか確かめておきましょう。

コメント

タイトルとURLをコピーしました