「Lion Blog」でアドセンスを設定する方法｜AMPページも簡単に設置できる

このブログでは「Lion Blog」というワードプレスの無料テーマを使っています。

これまで利用したことが無かったのですが、ほぼカスタマイズしていないこのブログでもかなり見やすい良テーマです。

そして「Lion Blog」の良さは見た目だけではありません。

設定のしやすさも特徴の1つです。

今回は多くのブロガーが導入するであろうグーグルアドセンスを「Lion Blog」で設定する方法を紹介したいと思います。

アドセンスも簡単に設定できちゃいますよ、そう、「Lion Blog」ならね！

Lion Blogのアドセンス設定

この記事はグーグルアドセンスのアカウントを開設しているのを前提に書いていきます。

ワードプレスのダッシュボードとアドセンスの管理画面を別タブで表示して読み進めてみてください。

まず最初にワードプレスのダッシュボードから「外観」⇒「カスタマイズ」に入ります。

カスタマイズ画面に入ると、画面左にカスタマイズメニュー、画面右に自分のブログが表示されます。

ここでカスタマイズメニューの「広告設定」をクリックしてください。

広告設定画面を上から順番に設定していくことで、アドセンスの設定はそれだけで終了です（場所にこだわらなければ）。

1つ1つ見ていきましょう。

ヘッダー用広告

ヘッダー用広告はロゴの右側に表示される広告です。

スマホで見ると結構大きく見えるので、邪魔に感じる人はスマホのみ広告をなしにすることもできます。

さて、設定の方法ですが、まずグーグルアドセンス管理画面からの「広告の設定」⇒「広告ユニット」をクリックしてください。

すると、以下のような画面になります。

ここで上部にある「新しい広告ユニット」をクリック。

次に表示されるのがこちらの画面。

ここでは一番右側にある「テキスト広告とディスプレイ広告」をクリックしてください。

次の画面ではまず、一番上に任意の広告名を設定します。

ここは好きな名前でOK（「一想一書　ヘッダー広告」など）。

次に広告サイズですが、ヘッダー広告はレスポンシブのままで良いでしょう。

広告をつけるだけなら特に他もいじる必要はありません。

最後に「保存してコードを取得」をクリックしてください。

次の画面に切り替わった時、中央に出てくる文字列がアドセンスを貼り付けるためのコードです。

こちらを全てコピーしてワードプレスのカスタマイズ画面に戻りましょう。

ワードプレスのカスタマイズ画面は「広告の設定」になっていますか？

この画面の一番上にあるヘッダー用広告に先ほどコピーしたコードを貼り付けてください。

スマホで表示したくない時には、コードを入力部分の下にあるチェックボックスにチェックを入れてください。

最後にカスタマイズメニューの一番上にある「公開」をクリックすることで、コードがブログに反映されます。

広告が表示されるまでには割と時間がかかるので、気長に待ちましょう。

これでヘッダー用広告の設定は終了です。

残りの広告も要領は同じです。

サクサク設定していきましょう。

記事内広告

記事内広告はその名の通り、記事の中に表示する広告です。

こちらはグーグルアドセンス管理画面で、「新しい広告ユニット」をクリックした後、「記事内広告」をクリックします。

すると↓のような画面が出てきます。

先ほどの広告とはまた違った設定画面ですが、やることは変わりません。

広告ユニットに名前を付けて、「保存してコードを取得」をクリック、出てきたコードをコピーして、ワードプレスの「記事内広告」のエリアに貼るだけです。

ただ、こちらはこれだけでは広告が表示されません。

記事内広告はワードプレスで記事を書く時に適当な場所に自分で広告を設置しなければならないのです。

広告の設置はテキスト編集画面で「記事内広告」を挿入することで、その場所に広告が表示されるようになります。

（もしくは[ adchord ]と打ち込んでもOK）

アーカイブ用のインフィード広告

アーカイブ用のインフィード広告はトップページの記事一覧に紛れ込ませる広告です。

アドセンスが自動でアーカイブのサイズに合わせた広告を配信してくれるので、一覧に溶け込みやすく、形が崩れるようなことはありません。

こちらの広告はアドセンス管理画面で、「新しい広告ユニット」をクリックした後、「インフィード広告」をクリックします。

すると今度は↓のような画面が出てきます。

この画面で自サイトのトップページを入力し、スキャンを実行すれば自動でアーカイブページを分析、サイズの判定が行われるようです。

モバイルとデスクトップが選べますが、私がやったところデスクトップで分析したものだけでモバイルも適切なサイズになっていました。

さすがはグーグルの技術力です。

分析が終わったらそのまま「次へ」をクリックして、次の画面で同じように広告ユニット名を入力し「保存してコードを取得」をクリック。

コードをワードプレスの広告設定にある「アーカイブ用のインフィード広告」にコピペすれば広告設定終了です。

なお、コードを貼り付けた下に広告を貼る場所を設定する項目があります。

1にすると最新記事の下、2にすると2記事目と3記事目の間に広告が挿入されます。

記事下用ダブル広告

記事下用ダブル広告は、それぞれの記事の下に横並びで2つの広告が表示されます。

こちらの設定方法はヘッダー用広告とほぼ同じ。

「新しい広告ユニット」から「テキスト広告とディスプレイ広告」を選択します。

広告の形はレスポンシブもしくは、長方形バナーにある「レクタングル（大）」を選択すると良いでしょう。

（私はレクタングル（大）で設定しています）

後は同じようにコードを記事下用ダブル広告の2か所に貼り付ければOK。

同じコードを貼り付けてもいいですし、左右どちらがクリックされるのかを分析したいなら、別々に名前を付けたコードを取得して貼り付けてもいいです。

他の場所にコードを貼り付けたい場合

以前はグーグルアドセンスの広告は１ページに3つまでという制限があったのですが、今はこのような制限は撤廃されています。

ですから、上で設定した広告以外にも広告を設置することが可能です。

他の場所に広告を設置する場合、カスタマイズではなく、ダッシュボードの「外観」⇒「ウィジェット」から設定します。

Lion Blogではウィジェットエリアがサイドバー、TOPページ上部、記事上、記事下、関連記事に用意されており、これらの場所であれば上で紹介したアドセンスの設置の仕方とほぼ同じように簡単に設置できます。

やり方は「テキスト広告とディスプレイ広告」で適当なサイズの広告コードを取得し、そのコードをコピーして、ウィジェット画面に移動。

ウィジェット画面で広告を貼りたいエリアに画面左にある[LION広告]を移動させ、[LION広告]内にコードをコピーすれば完成です。

私はリンク広告を記事上に置いています。

ただ、広告を沢山貼りすぎるとアドセンス停止となる可能性もあるようなので、ご利用は計画的に。

ここまででひとまずのグーグルアドセンスの設定は終了です。

Lion BlogでAMPページ用のアドセンスを設定する

Lion BlogではプラグインなしでAMPページを設定することができます。

AMPページとはモバイルでの表示速度が早くなる技術を使ったページのことで、Lion BlogではAMPを有効にするだけで自動的に作成可能（モバイルページとは別の存在です）。

AMPページがあるサイト・ブログではURLに?amp=1 をつけることでAMPページを表示できます。

さて、そんなAMPページでは一般的なwebページに比べて使えるタグに制限があり、上で紹介したようなグーグルアドセンスの普通のコードも使えません。

一般ページとは別にAMPページ用のアドセンス設定をしなければならないのです。

ここからはそんなAMPページ用のアドセンス設定を紹介していきます。

こちらはちょっとだけ難易度が上がりますよー。

まず最初にアドセンス管理画面で「新しい広告ユニット」から「テキスト広告とディスプレイ広告」を選択します。

そして、レクタングル（中）の広告コードを取得してください。

広告コードはとりあえずメモ帳などに貼り付けておくといいでしょう。

広告コードが取得できたら、ワードプレスの「カスタマイズ」⇒「広告設定」で一番下にあるAMP用広告を見ます。

ここになにやら説明がありますね。

AMPページで表示する広告タグを入力
入力例：
<amp-ad
width=”300″
height=”250″
type=”adsense”
data-ad-client=”ca-pub-0000000000″
data-ad-slot=”0000000000″>
</amp-ad>

まずこの<amp-ad～</amp-ad>までを下の2つのボックスにコピペしてください。

このコード内にあるca-pub-0000000000″という部分と、data-ad-slot=”0000000000″という部分を書き換える必要があります。

次に先ほど取得したアドセンスのコードを見てみます。

アドセンスコードの中に”ca-pub-と書かれている箇所はありませんか？

まず、アドセンスコードにあるca-pub-に続く数字を0000000000と置き換えます。

次にアドセンスコードからdata-ad-slot=”と書かれている箇所を見つけ、同じように続く数字を0000000000と置き換えます。

これがAMP用のアドセンスコードとなります。

最後に公開をクリックすれば、数時間後にはアドセンス広告が配信されているはずです。

AMP用の広告は、記事の上（私のブログで言えばリンク広告がある位置）と記事の下（記事下用ダブル広告の位置）に1つずつ表示されます。

説明は大変だけど、やってみると簡単！

思ったよりも随分長い記事になってしまいました…。

これは決して難しいからではなく、PC初心者でもわかるようにと丁寧に書いたからです。

実際にやってみるとめちゃくちゃ簡単ですからね。

ただ、上でも書きましたが、広告が配信されるまでには結構時間がかかります。

需要がない（見られていない？）記事には1日経っても広告が付いてなかったりもしますし…。

「何か間違ってるんじゃ…」と心配になるかもしれませんが、そういうものだと割り切って気長に待ってみてください。

設定した箇所に「Advertisement」の文字が表示されていれば、設定自体はできていると思っていいです。