今回はAFFINGER5で記事内にGoogleアドセンス広告を表示させる方法を紹介します！
他のGoogleアドセンス広告の設置方法はこちらの記事で紹介していますので他の広告も設置したい方はご覧ください！
ちなみに記事内広告とは下の図の様な広告です。
記事の中に貼れる広告として2種類方法があります。
- ショートコードを使用して任意の場所に広告を表示させる方法
- 見出し前のみに広告を表示させる方法
それぞれについて、広告のコード取得から紹介していきます！
この記事を読むと以下のことがわかります。
- 広告のコード取得方法
- ショートコードを使用した広告の表示方法
- 見出し前広告の表示方法
もくじ
ショートコードを使用してGoogleアドセンス広告を表示させる方法
こちらではショートコードを使用して任意の場所に広告を貼る方法を紹介していきます！
広告のコード取得方法
- Google AdSenseのサイトを開きます。
- 「広告」→「サマリー」をクリックします。
- 「広告ユニットごと」をクリックして"記事内広告"を選択します。
ポイント
今回は記事内広告で紹介しますが、ディスプレイ広告でもいいと思います。ディスプレイ広告のコード取得方法はこちらの記事で紹介しているので参考にしてください！
- 広告ユニット名は後から見てわかりやすいような名前にしましょう。
- グローバルオプションを選択して"選択したらディスプレイ広告を表示する"をONにします。
スタイルを選択すると
- フォントの種類
- タイトルの色
- 説明文の色
- 背景色
の４つが選べます。違和感がないようにしたいのであれば、文字色と背景色はブログで使用しているのと同じのにするのをおすすめします！
最後に「保存してコードを取得」をクリックします。
このコードをコピーしたらコードの取得は完了です！
記事内への広告の表示方法
ショートコードを使用するためには広告・Googleアドセンス広告のスマホ用に広告コードを入力する必要があるため、まずその紹介をします！
- 外観からウェジェットを選択します。
- 00_STINGERカスタムHTMLを選択します。
- 広告・Googleアドセンス広告のスマホ用を選択して「ウェジェットを追加」をクリックします。
内容に先ほどコピーしたコードを貼り付けて「保存」をクリックします。
ポイント
広告を確認した際に画面の左に寄ってしまうことがあります。そんなときはdata-ad-slot=の下にdata-full-width-responsive="false"と入力してください！
「タグ」→「その他パーツ」→「アドセンス」を選択すると広告を挿入できるため、広告を表示させたいところでこれらの操作を行えば広告を好きなところに表示させることが出来ます。
これらの操作を行って下の図のような「adsense」というショートコードがでてきたら広告の設置は完了です！
見出しの前に広告を表示させる方法
これまでは任意の場所に広告を表示させる方法を紹介してきましたが、ここからは見出しの前に自動的に広告を表示させる方法を紹介していきます！
広告のコード取得方法は上で紹介しているので割愛させてもらいます。
見出し前広告の表示方法
- 「AFFINGER5管理」をクリックします。
- 「Google連携/広告」をクリックして、「見出し前に広告挿入」を選択します。
- 記事内広告のコードを入力します。
- 投稿記事を選択します。
- 1~5番目までありますが、この意味は何個目のh2の前に広告を表示させるかという意味です。
- 設定が完了したら「save」をクリックして完了です！
上記の通り見出し前広告の表示はとても簡単にできます！
【AFFINGER5】Googleアドセンス広告を記事内に表示させる方法を紹介！のまとめ
今回は
- ショートコードを使用した記事内広告の表示方法
- 見出し前広告の表示方法
の2種類を紹介しました。
記事の文中に広告を入れる際は記事が見づらくならないように気を付けて行ってください。
では、また次の記事で会いましょう！！