今回は「サイドバー」と「記事上部（目次＆最初のh2見出しの上）」、「記事の下」に広告を掲載することにしました。
なおこのブログはQooQテンプレートを使用しているので、QooQを想定した書き方になっています。
また、アドセンス審査に通過しておりBloggerとリンクできている前提です。
１ サイドバー
サイドバーに貼るのは簡単です。
Bloggerのレイアウト＞サイドバー の「ガジェットを追加」から「AdSense」を追加します。
これだけでサイドバーに表示されます。
アドセンス側での設定は特に不要でした。
（アドセンス側に自動で新規の広告ユニットが出現します）
＊＊＊
なお、Bloggerのガジェットから追加する場合、
「AdSense」ではなく「HTML/JavaScript」を追加し、そこに直接アドセンス側で作成した広告のコードを記述する方法もあると思います。
アドセンス側で「ディスプレイ広告」の「レスポンシブ」広告を作成しその方法も試してみたのですが、自分で確認した限りでは両者に大きな違いはないように見えました。
（その方法のほうが広告のカスタマイズ等はできるのかと思いますが）
今回は「AdSense」で入れています。
＊＊＊
２ 「最初のh2見出しの上」と「記事下」
QooqのテンプレートではHTMLのなかにあらかじめ
<!-- アドセンス広告1.start -->
<!-- アドセンス広告1.end -->
のようにわかりやすく記述がされていて、この中にコードを貼ることで簡単に広告を掲載することが可能です。
この欄が２つあり、１つ目（広告1）に記述したコードは「記事の最上部」に、２つ目（広告2）は「記事の下」に自動で表示されます。
ただ、個人的な好みで、最初に表示される広告は「記事の最上部」ではなく「最初のh2見出しの上」（目次の上）に表示したかったのですね。
何か方法はないかと探しまして、こちらの記事を拝見しました。
こちらの方法を使用させていただきました。ありがとうございました。
記事の通りに、
① <data:post.body/> のタグを置き換える
② 所定の位置に、h2見出しの上に貼る用の広告コード（自分でアドセンスで用意）を貼る
③ 所定の位置に、記事下に貼る用の広告コード（自分でアドセンスで用意）を貼る
④ JavaScriptコードを</html>の上に貼る
以上の手順を踏むことで無事、「最初のh2見出しの上」と「記事の一番下」の両方に広告を掲載することができました。
記事上部
記事下部
なお、Bloggerの「テーマ」からHTMLを確認したところ「<data:post.body/>」のタグが２つありました。
（デフォルトでそうだったのか、過去の自分がカスタマイズしたからかはわかりません）
自分の環境では「１つ目」のほうを置き換えれば大丈夫でした。
QooQテンプレートにおいて <!-- アドセンス広告1.end --> と <!-- アドセンス広告2.start --> の間に挟まれている位置です。
最終的には下記のような形になりました。
※ <!-- ここから広告用に改変 --> や <!-- ここからは記事下広告 --> などは自分でメモとして入れたものです。
【補足①】
記事本文に掲載したのは両方ともアドセンスの「記事内広告」です。
【補足②】
Javascriptの記述は上記記事に掲載されていた内容から変更していません。
（元々、「１番目」の「h2見出し」の上に挿入するという設定になっているものかと思います）
【補足③】
目次については以下のプラグインを使用させていただいています。
特に何か追加で設定せずとも、こちらの目次＋上記の方法を組み合わせることにより目次の上に広告を表示できていました。
３ モバイルで確認
ここまでの広告はすべてレスポンシブに設定されています。
最後に、自分のスマホでどのように表示されているか確認してみました。
記事上部
記事下部
サイドバー
おおむね問題はないですが、画面上横幅いっぱいに表示されているのが少し気になります。（どうやらこれはGoogleの仕様らしいです）
あと、上の文章との間にもう少し余白がほしいです。
スマホで見る場合「記事下広告」の下にまたすぐ「サイドバー」の広告が出てきてしまうので、これもできればスマホの場合はサイドバーの広告を消すとか、何か対処したいですね。
これらはいずれ余力があったら検討しようかと思います。
0 件のコメント:
コメントを投稿