Stinger5で効果的なアドセンス設置方法と位置

前回WordPressにGoogleアドセンス広告を貼り付ける方法を紹介しましたが、スティンガー系のテーマを使っている場合には設定、設置方法が違うので、今回はStinger5をサンプルにして効果的なアドンセンスの貼り付け方を色々紹介してみます。

「基本的な設置」と「貼り付け位置の変更」の仕方なども説明していきます。貼り付け位置の最適化をする事でもっとアドセンス収入は増える可能性があるので、一応覚えておいておきましょう。

Googleアドセンスの登録や審査が終わっている前提なので、まだ準備できていない場合や広告の作成方法が分からない方はこちらの記事からどうぞ。
Googleアドセンスの始め方。申請や審査から設置までのまとめ

また、Stingerを利用している方のサイトで時々「ラベル(スポンサーリンクなど)」の表記がないサイトもよく見かけます。アドセンス広告に関してはラベルが無くて警告を受ける場合もあるので、ラベルについても解説していきます。

Stinger5でアドセンスの貼り付け【基本編】

まずは基本的な部分から紹介すると、Stinger5の場合は簡単にアドセンスを設置する事ができます。

WordPressの管理画面から「外観」⇒「ウェイジェット」と進むと、「Googleアドセンス用336px」という項目と「Googleアドセンス300px」という項目がありますよね。

Stinger-1

まずは「Googleアドセンス用336px」という項目の右の「▼」マークをクリックして開いて「テキスト」をドラッグ&ドロップ。

Stinger-4

「Googleアドセンス用336px」に追加した「テキスト」にはアドセンスの広告「336×280(レクタングル大)」の広告コードを入れます。タイトルは適当でOK(サイトには反映されない)。

Stinger-3

コードを入れたら保存するのを忘れずに。

同じ要領で「Googleアドセンス用300px」に「300x250px」のアドセンス広告(レクタングル)」の広告コードを入れます。

後は保存すれば設定は完了。ブログにアドセンス広告が表示されます。ただ、ラベル(スポンサーリンク)などの表記ができていないので、これはこの記事の後半で設置方法を紹介していきます。

表示される場所としてはPCの場合は次の通り。個別ページに3箇所。

  • サイドバーの一番上
  • 記事下に2つ

Stinger-6

アドセンスのユニット広告は1ページに3つまで貼れる訳ですが、Stingerではスマートフォンでも3箇所表示されます。ただ、PCとは表示される場所が違うのでそれも把握しておきましょう。

まず、スマートフォンでサイトを見ると記事下は2つではなくて1つだけ広告が表示されています。これはスマートフォンの1ビュー、つまりスクロールせずに見える1画面の範囲にはアドセンス広告は1つだけというルールがあるため

WordPressアドセンス-1

なのでPCでは記事下に2つありますが、スマートフォンでは1つしか表示されないように工夫されているという訳です。

また、レスポンシブデザインなので、PCでの「サイドバー」はスマートフォンではコンテンツの下に潜り込むような形になっているので、サイドバーの一番上に設置した広告も、スマートフォンで見るとコンテンツの下の関連記事の下という位置に来ます。

Stinger-8

つまり、スマートフォンページでは記事下に1つ。その下の関連記事の下に1つ(サイドバーのアドセンス)。残りの1つはサイドバーのさらに下の方に1つ。という訳で3箇所表示されるはずです。

これでも問題はないのですが、スマートフォンページでは広告がだいぶ下の方にあって、かなりスクロールしないとアドセンス広告まで辿りつけません。そのため、記事下以外のアドンセンスはスマートフォンページではほとんどクリックされません。

なので、これを位置変更してもっとクリックされやすい位置に変更しよう!というのが今回の記事の目的です。

効果的なアドンセンス広告の位置

まず、上記の基本的な部分を踏まえて効果的なアドンセンスの位置を紹介しておきます。ただ、サイトのジャンルや内容によって効果が違う部分があるため、それぞれのサイトで検証してみる事をおすすめします。

最近人気のスタイルとして定着しているスタイルが、「記事下」に2つと「記事中」に1つというスタイルで、これは多くのブログでも採用しているスタイルになります。

設置-1

前述したように1ページに貼れるアドセンスのユニット広告は3つまでなので、「サイドバー」「記事中」「記事下に2つ」入れると4つになってしまいますよね。そのため、サイドバーにはアドセンス以外の広告を設置する場合が多いです。

ちなみに記事下の広告は縦並びでもいいですし、横に並べる方法もあります。記事下のアドセンスを横並びにする方法は次回紹介するので、リンクを記事の最後に貼っておきますね。

また、スマートフォンページでは下の方にある広告はクリックされないので、「ヘッダー」に1つ。「記事中」に1つ、「記事下」に1つという設置を目指します。

それぞれ1つ1つ解説していきます。

サイドバーの広告をアドンセンス以外の広告に変更する

サイドバーのアドセンスはアドセンス以外の広告に変更します。ここは自分のサイトのターゲットに合わせた広告を探す必要があります。

例えば若い女性の訪問者がターゲットのサイトなら「脱毛関連」や「エステ関連」みたいな感じでもいいし、季節物の商品や商材でもOK。

紹介する広告に関しては「A8.net」や「afb」のようなASPに無料登録して広告を利用する事ができます。

特に「afb」のアフィリエイトリンクには全て「no follow」タグ(リンク先に評価を渡さないタグ)が入っているのでおすすめです。要はリンク先に自分のブログのパワーを渡さないアフィリエイトリンクになってます。

afbの無料登録のやり方やリンク作成は別記事で紹介しているのでそれも参考に。
afbの登録方法から使い方まで

先に登録を済ませて広告を用意しておくとスムーズに進むので、自分のサイドバーのサイズに合う広告のサイズを用意してね。

サイドバー(sidebar.php)の編集

これから色々PHPファイルを編集していきますが、編集する前にはバックアップしていつでも元に戻せるようにしておくこと(コレ重要!)。

また、子テーマを作成していない場合には子テーマを先に作成して有効化しておく事をおすすめします。子テーマについては別記事で解説しておいたので参考に。

WordPressの管理画面から「外観」⇒「テーマの編集」と進み、右側に並んだファイルからサイドバー (sidebar.php)を選択。

Stinger-9

sidebar.phpの一番最初の部分にある次のコードを削除します。

アドセンス貼り付け位置-1

これでサイドバーの一番上のアドセンスは表示されなくなるので、削除した部分に「アドセンス以外の広告コード」を入れます。

アドセンス貼り付け位置-2

それから同じくsidebar.phpにはもう1つアドセンスを表示させるコードがあります。スマートフォンのみ表示される広告で、スマートフォンページの一番下の方に出現するアドセンスですね。

これはほとんどクリックされないので、これも削除しておきます。代わりに後でスマートフォンのヘッダーに広告を設置するので。

sidebar.phpの下の方に「スマホだけのアドセンス」というコメントに囲まれた部分があるので、それを削除。

アドセンス貼り付け位置-3

「スマホだけのアドセンス」の中身が空白になっていればOKです。

アドセンス貼り付け位置-4

これでsidebar.phpの編集は完了です。続いて記事中にアドセンスを入れる方法を紹介します。

記事中にアドセンスを入れる方法

記事中のアドセンスは1記事ずつ入れるのは面倒なので、全記事の記事中に自動でアドセンスが表示されるようにしていきます。

仕組みとしては記事中の最初の見出しタグ「h2」を検出してその見出しの直前にアドセンスを入れるような感じになるので、記事中に見出しがある事が前提です。

手順としては広告を表示するだけのPHPファイルを作成してそれを最初の見出しタグの直前で自動で表示させるようにします。これだと追加したPHPファイル内の広告変更するのも簡単ですし手間もかかりません。

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

ロリポップユーザー専用ページに移動して「webツール」⇒「ロリポップFTP」と進みます。

子テーマ-1

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

ワードプレス構造-3

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

ワードプレス構造-4

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

子テーマ-2

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

テーマフォルダ-1

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

テーマフォルダ-2

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

テーマフォルダ-3

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

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

テーマフォルダ-4

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

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

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

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

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

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

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

例えばラベルと広告を中央に寄せたい場合には次のコード(子テーマのスタイルシートの一番下に追加)。

他にも「margin-top:10px;」とか「margin-bottom:10px;」とかそれぞれに記述を加えれば「上の余白」や「下の余白」も調整できますし、中央寄せが嫌なら「text-align:center」を消して「margin-left:15px」とかでも左に余白を作る事もできます。

スマートフォンのヘッダーに広告を設置

上記までの手順でPCなら記事中に1つと記事下に2つのアドセンスがあるので合計3つになっていますが、スマートフォンでは記事中に1つと記事下に1つで合計2つしか表示されません。

そのため、スマートフォンだけはヘッダーの部分に広告を設置していきます。

ただ、注意点としてはヘッダーの広告はファーストビューで画面を占有しないように、広告のサイズは縦幅の小さい「320×100」か「320×50」のサイズを選択しておきましょう。

スクロールしなければ見えない位置にコンテンツを押しやるサイト レイアウトは避けてください。こうしたレイアウトは、ユーザーにとってコンテンツと広告の区別が難しくなります。

参考:広告の配置に関するポリシー

設置方法は子テーマの「header.php」から次の記述を探します。

これの直後に次のコードを追加。

この部分は明らかに広告と分かる位置なのでラベル(スポンサーリンク)は入れていないサイトがほとんどなので省略。

後は保存すればOK。これでスマートフォンページだけヘッダーに広告が表示されるようになりますが、設置した直後だと表示されるのに時間がかかる場合があるので、時間を置いてからチェックしてね。

アドセンス広告にラベルを追加する

さて、アドセンス広告を表示させる場所には広告とハッキリ分かるようにラベルを付けておく必要があります。

サイトのユーザーに誤解を与えないようにし、ユーザーがコンテンツと Google 広告を簡単に区別できるようにすることは重要です。AdSense のポリシーでは、「関連情報」や「関連リンク」といった誤解を招く見出しの下に広告を配置することは禁止されています。広告ラベルには、「広告」または「スポンサーリンク」のみを使用するようお願いいたします。それ以外のラベルは許可されません。

参考:広告の配置に関するポリシー

という訳なので、ラベルの設置をしていきましょう。先ほど記事中に追加した広告に関してはラベルを付けたので、後は記事下の広告にラベルを付けますよ。

子テーマの「single.php」を開いて次の記述を探します。

この「div style=”padding:20px 0px;」という部分の直後に次のコードを入れます。

こんな感じになるよ。

アドセンス貼り付け位置-5

追加できたらこれで保存しておきましょう。

さて、このラベルには「bottom-label」という名前を付けておいたので、後はスタイルシートでこのラベルの色や位置も調整できます。

今度は子テーマの「スタイルシート」の一番下に次のコードを追加。

これはお好みで調整して下さい。

以上Stinger5でのアドセンスの貼り付け位置の変更とラベル設置は終了。

最終更新日:2018/06/20

Stinger5で効果的なアドセンス設置方法と位置”に18件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. よし

    はい、そのまま下に追加したら真っ白になりました。

    僕のやり方が悪かったのかもわかりません。

    もう一度チャレンジしてみます。

  2. しげぞう 投稿作成者

    よし様

    返信ありがとうございます。子テーマにfunctions.phpがあるんですね。なるほど、それならその子テーマのfunctions.phpの記述の一番下に記述をすればOKのような気がします。functons.phpで記述をして保存。それで広告表示用のphp(ad-in-body.php)を作成して子テーマに追加したら行けそうな感じがしますが、functions.phpに記述を追加した段階で真っ白になります?

  3. よし

    しげぞうさん、おへんじありがとうございます。

    アフィンガーの子テーマにfunctions.phpが元々含まれていました。

    そして、前回のコメントに貼り付けた記述がもともとある状態でした。

    よろしくお願い致します。

  4. しげぞう 投稿作成者

    よし様

    コメントありがとうございます。アフィンガー2は使った事がないので詳しくはないのですが、アフィンガーの子テーマを作成してfunctions.phpファイルを作成されたのでしょうか?それとも最初から子テーマにfunctions.phpが含まれているのでしょうか?

    基本的に親テーマのfunctions.phpと同じ記述を子テーマにすると真っ白になります。なので、他の子テーマとは違ってfunctions.phpの子テーマ作成には注意が必要です。
    子テーマにfunctions.phpを追加する時の注意点

    なので、一度確認して頂きお手数ですが、再度コメント頂ければ助かります。どうぞよろしくお願い致します。

  5. よし

    アフィンガーの子テーマのfunctions.phpには、もともとこのような記述があります。
    <?php
    // 直接アクセスを禁止
    if ( !defined( 'ABSPATH' ) ) {
    exit;
    }

    if (locate_template('/st-kanri.php') !== '') {
    require_once locate_template('/st-kanri.php');
    }

    if (locate_template('/st-af-kanri.php') !== '') {
    require_once locate_template('/st-af-kanri.php');
    }

    if (locate_template('/st-rankcss-kanri.php') !== '') {
    require_once locate_template('/st-rankcss-kanri.php');
    }

    if (locate_template('/st-theme-customization.php') !== '') {
    require_once locate_template('/st-theme-customization.php');
    }

    // ASP管理画面のWYSIWYGエディタ化
    if (locate_template('/st-af-kanri-wysiwyg.php') !== '') {
    require_once locate_template('/st-af-kanri-wysiwyg.php');
    }
    この下に

    なのか、

    これは無しでそのまま上記記述の貼り付けなのかわかりません。

    それとも、上記のfunctions.phpに貼り付ける記述自体がアフィンガー2の場合は異なるのでしょうか?

    よろしくお願い致します。

  6. よし

    しげぞうさんいつも参考にさせていただいています。

    この記事のアドセンスの貼り方なのですが、アフィンガー2でも同じ貼り方で問題ないのでしょうか?

    実際試して見ると、「functions.php」を書き足すと、真っ白になりました。

    もし記述方法が違うのであれば、ご教授願います。

    よろしくお願い致します。