【STORK(ストーク)】アドセンス広告を貼る方法

有料テーマ【STORK(ストーク)】を使用している方で、『Googleアドセンスに合格したけど、広告を入れる方法が分からない！教えて欲しい！』という方に向けた内容です。

1 広告の配置を決める

Googleアドセンスを貼る配置は主にホーム画面の記事一覧、記事の中の2カ所です。当ブログ(sholife)での広告は以下のように配置しています。

図で示すと下のような配置です。(H2タイトルは黄色の部分)
　

上記の位置にアドセンス広告を貼る方法を説明します。

2 広告を作成→コードの取得

インフィード広告と記事内広告の2種類のコードを取得します。

インフィード広告(記事一覧で使用)

Googleアドセンスの管理画面を開き、『広告ユニット』を開き、『インフィード広告』を選択。

『手動で広告スタイルを作成する』を選択。(『自動で広告スタイルを作成する』を選ぶとモバイル、desktopにそれぞれ馴染むように設定できますが、次の工程で調整するため、手動で作成します。)

下のような画面になったら『広告ユニット名』を入力し、グローバルオプション、イメージなどの設定をします。

インフィード広告の設定

設定する項目は以下のとおりです。下の画像を参考に調整してください。

設定が終わったら、右下の『保存してコードを取得』を選択すると下のような画面になるので、『コードスニペットをコピー』を選択。

記事内広告

メニューから『広告ユニット』を選択し、『記事内広告』を選択。

『広告ユニット名』・・・広告の名前をつける。(どこに入れる広告なのか記載しておくと管理しやすいです。)
『グローバルオプション』・・・『選択したディスプレイ広告を表示する』をオン(青い状態)にする。

『選択したディスプレイ広告を表示する』・・・広告を入れるスペースによってディスプレイ広告と記事内広告をうまく収まるように自動で選択される！

『スタイル』で文字のフォントや色を設定し、『Googleで最適化されたスタイルを使用する』をオン(青い状態)に切り替える。

記事一覧に表示されるので、明らかに『ここにあります！』というようなものならないようにフォントや色を調整しましょう！

『Googleで最適化されたスタイルを使用する』ってどういうこと？

これをオンにすれば、広告の配色やフォントが自動で最適化される(Googleに判断してもらえる)ようになるんだよ！

フォントの調整は、じっくり時間をかける必要がないんだね！

3 広告を貼り付ける(手動)

WordPressの投稿から記事を開きます。『Classic Editor』というプラグインを使用している場合は下のような画面でテキストモードに切り替えます。

テキストモードになったら、2 広告を作成→コードを取得でコピーした広告のコードを貼り付けます。

貼り付けた後のプレビュー画面が以下のとおりです。

以上で広告の貼り付けが終了です。記事ごとに配置を変えたい場合は、任意の場所にコードを設置。

4 広告を自動で貼るように設定

記事ごとに手動で広告を挿入することは面倒ではありませんか？また、広告を入れ忘れてしまう可能性もあります。全ての記事の同じ場所に広告を入れるためにプラグイン(Advanced Ads)を使用します。すごく便利なプラグインなのでインストールすることをおすすめします。1 広告の配置を決めるで決めた位置に自動で配置する設定をします。

Advanced Adsの設定

設定するのは一カ所です。『Advanced Ads_設定_一般』で『広告を無効にする』のチェックを全て外します。

広告の設置

1.Advanced Ads_広告を選択。

2.『新しい広告』を選択。

3.『タイトルを追加』に広告のタイトルをつける。(『〇〇用の広告』『〇〇の〇〇に設置する広告』など)

『広告タイプ』は『プレーンテキストとコード』を選択。(下部に『アドセンス広告』の項目があるが、入力が面倒。『プレーンテキストとコード』の方が分かりやすいのでおすすめです。こちらで入力できるようになれば、アフィリエイトなどのリンクを設置するときも同様に作業ができます。)

　

4.広告のコード(記事内広告)を貼り付ける。

5.『表示条件』・・・どこに表示させるのかを設定する。記事に表示させたいので『投稿タイプ』を追加する。

投稿タイプが表示されたら『投稿』を選択。

訪問者条件・・・『モバイル』か『デスクトップ』を選択。訪問者が使用している端末によって表示する広告を分ける場合に選択。何も設定しなければ、全ての端末で広告が表示されるので設定しなくても良い。スマートフォンにだけ表示させたい場合は『モバイル』、PCにだけ表示させたい場合は『デスクトップ』を選択。

新しい条件で『デバイス』を追加する。

デバイスが表示されたら『デスクトップ』か『モバイル』を選択。ブログをPCで見たときに表示させたいなら『デスクトップ』、スマートフォンで見たときに表示させたいなら、『モバイル』を選択。

デバイスを分けることで、アドセンスの管理画面から何を使っている人が広告をクリックしたのか分析できるね！

分析して、配置を工夫できるようになるね！

広告の設置

1.Advanced Ads_設置を選択。

2.『配置の新規作成』を選択。

3.配置の種類を選択。

4.『コンテンツの前』または『コンテンツの後』を選択。

配置名を入力。

『H2タイトル3つ目』など、どこに配置するのかを入力していると分かりやすい！後から配置を変えるとき、パッと見て分かるね！

『広告またはグループを選択』で広告の設置で設定した広告を選択。

下のような画面が出てきますが、この設定は不要なので『OK』を選択。

7.『配置オプションを調整』を選択。

8.『広告の設置』に保存されたので、『オプション』を設定する。

配置：◯番目の〇〇の前or後に設置

今回は1つ目のH2タイトルと目次の間、3つ目のH2タイトルの前に設置します。そのため、1つ目のH2タイトルの前、3つ目のH2タイトルの前という2つに分けて設定(下の画像のようなものが2つある状態にする)。

広告のラベル・・・どちらも『既定』でOK!

以上で広告の設置が終了です。3つ目のH2タイトルの上に広告が設置された状態が下の画像です。

『3つ目のH2タイトルの上』に広告が自動で入るようになったら、記事にH2タイトル2つしかないとき、広告は表示されるの？

H2タイトルが2つ以下の時、『3つ目のH2タイトルの上』に設定した広告は表示されません。

つまり、Advanced Adsで設定してしまえば、記事のH2タイトルの数に影響を受けないっていうことだね！

Advanced Adsって便利だね！今回の説明で貼った広告をアドセンス以外にも他のスポンサーリンクを貼れば、同じように好きな位置に設置できるんだよ！

設定を取り消したい場合

『広告の設置_削除→配置を保存』で配置の設定を消すことができます。

5 記事一覧に広告を貼る

1   広告の配置を決めるの位置に2   広告を作成→コードを取得でコピーしたインフィード広告のコードを貼り付ける設定を行います。

有料テーマ”STORK”や”SWALLOW”の方はこちらのサイト(OPEN CAGE)を参考になります。(記事一覧にインフィード広告を一つ入れる方法)

OPEN CAGEで公開されている方法とは別の方法で、トップページの記事一覧にアドセンス広告を複数貼る方法があります。

記事一覧のレイアウトが『シンプル』の場合を例として紹介します。

子テーマ(jstork_custom)内にあるparts_archibe_simple.phpを開きます。子テーマ(jstork_custom)はOPEN CAGEのサイトでダウンロードします。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>を書き換える方法です。

私の記事一覧では以下のように入力しています。

<!– 広告コード –>は取得したコードを入力。同じの広告を2つ入れることも違う種類の広告を入れることも可能です。

今回は記事一覧の4番目と8番目ですが、<?php elseif ($count == ◯): ?>の◯を別の数値に置き換えることで、広告を移動させることが可能です。また、<?php endif; ?>の前に<?php elseif〜広告コード–>を追記して表示させる広告を増やすこともできます。

参考サイト：アキスタイルフォト『アドセンスのインフィード広告を、ストーク の記事一覧に複数設置してみた』

6 『ads.txtが含まれていないファイルがあります。』の対策

アドセンスに合格して、数日後にアドセンスの管理画面で『要注意-ads.txtが含まれていないファイルがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。』と警告されることがあります。

ads.txtってなに？何かしなきゃいけないの？でも、よく分からない・・・

という疑問から解決している記事(pasolack.com)があるので下のボタンから移動して確認してください。

ざっくりとした内容は、ads.txtを作成し、サーバーにアップロードする流れを説明している内容です。

7 ダブルレクタングルの記事を貼る方法

「ダブルレクタングル」と配置を見たことがありませんか？下の画像のように2つ並んでいるものです。

『ダブルレクタングルは古い！』という声もありますが、『やり方だけ知りたい！』という方に向けてAdvanced Adsを使用した方法を紹介します。

ダブルレクタングル用の広告を作成(コードの作成)

広告の作成方法はアドセンス_広告ユニット_ディスプレイ広告を選択肢、広告サイズを336×280に固定して作成します。

広告ユニットの名前のつけ忘れに注意してね！

参考にしたサイト：【コピペでOK】ダブルレクタングルのやりかた!記事下にレクタングルを横並びにする方法をCSSなしで実現する

記事の幅を調整する

広告と記事の幅って関係ないじゃん！

画面分割してレクタングル広告を見てみたらこうなってんだ！右の広告が見切れてしまって・・・

追加したCSSは下の通り。コピーして追加すれば同じように記事の幅が変わります。

【CSS/WordPress】ブログの記事幅を参考にする方法！フォントや余白の調整までを参考に作成しました。具体的な変更点は線の色を#dddから#ffffffに変更、幅を740pxから800pxに変更しました。また、『@media (max-width: 1020px) and (min-width: 768px)}』を追記することで、レスポンシブの設定にしました(PC画面の場合のみ記事の幅を大きくし、スマートフォンの表示は以前と変わらないように設定)。

下の画像のように変わります(画面分割で右に寄せて半分表示した時)

　　

まとめ

アドセンス広告のコードを取得してから記事に貼り付けるまでの解説をしました。Advanced Adsで設定することで記事ごとに広告を入れる手間を省略できます。記事によって文字数やタイトルの数は異なります。基本的にはAdvanced Adsで設定してしまえば広告を入れることができますが、『1万字でタイトルを10個ほど入れた』など、例外の場合に手動で任意の場所に広告を入れることができるため、手動の方法を説明しました。また、配置を変更したい時に、Advanced Adsで変更すると全ての記事に反映されます。一つ一つ手動での作業に比べて格段に作業効率が高いので、ぜひ使いこなしてください！