はてなブログでレスポンシブデザインを利用されている方で最初のタグ上にアドセンス広告を2つ横並びに(ダブルレクタングル)入れたい方に読んでいただきたい記事です。
はじめに
この記事は下記のような方にお役に立てると思います。
- 「ファーストビューにアドセンスが入ることを避けて広告を2つ横並び(ダブルレクタングル)に入れたい！」
このことはつまり、
- 「最初のタグ上に自動配置でアドセンスを入れる」
- 「はてなのレスポンシブデザインでPCとスマホでアドセンスの表示数を変える
この2つを実現しましょうということです。
ソースコードを記載していますのでぜひ利用してください。こういう記事の性質上必ず自己責任でご利用下さいね。
参考記事
- 「はてなのレスポンシブデザインでPCとスマホでアドセンスの表示数を変える」
上記にについては下記の記事を参考にしました。
- 「最初のタグ上に自動配置でアドセンスを入れる」
上記については下記の記事を参考にしました。
これらの素晴らしい記事を元にレスポンシブデザインでダブルレクタングルを自動配置する方法を実現していきましょうね！
ダブルレクタングルが自動配置される位置
レスポンシブデザインで記事下にダブルレクタングルを自動配置する方法については前項のよなかさんの記事にありますので参照してください。
下記のように「タイトルタグ→読者ボタンやシェアボタン→写真や記事本文→ダブルレクタングル→最初のタグ」のように表示させることができます。
つまり、「最初のタグ上にダブルレクタングルを表示させる」ことを実現させるということですね。
それでは行きましょう。
アドセンスコードを変更する
まずは入手したアドセンスコードを変更します。
今回は「レスポンシブ広告」を選択します。
後でデザインCSSコードを貼り付けていただきますが、このレスポンシブにすることでPCでダブルレクタングルを表示させた場合にレクタングル大(336×280)を2つ横並びに表示させ、またiPhone5などでレクタングル(350×250)など最適な大きさで表示させることができます。
はじめからレクタングル大(336×280)でよいという方はそちらを選択してください。
gistf5f8d2a9476f05e0a2dffdaa7bcb35f8
- 1行目の</script>を</scrip>に変更
- 7行目の"auto"を"rectangle"に変更
- 10行目の</script>を</scrip>に変更
なお、7行目の"rectangle"につきましては広告を「レスポンシブ広告」にした場合のみ変更してください。レクタングル大(336×280)やレクタングル(350×250)を選択された場合は変更せずそのままにしてください。
HTMLコードを作成する
ダブルレクタングルを実現させるためのHTMLコードを作成します。
giste1a53169f409e81fee1cbddb480bd5f3
- 10行目と16行目の<!-- ここに変更後のアドセンスコードを挿入 -->の代わりに先ほど作成したアドセンスコードを貼り付ける
アドセンスコードを貼り付けた後のHTMLコードは下記のようになります。
gistf31b1a5e8e8a52c2327273b908eae1ed
HTMLコードをデザイン設定に貼り付ける
先ほど作成したHTMLコードをはてなブログ設定画面の記事下に貼り付けてください。
- 「デザイン」→「カスタマイズ」→「記事」→「記事下」に貼り付ける
デザインCSSコードを貼り付ける
下記コードをはてなブログ設定画面のデザインCSS欄に貼り付けてください。
gist7219bca560fbdd8ec30738d59eee5807
- 「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付ける
おわりに
これで完了です。
記事内タグ一番最初の上部分にダブルレクタングルが実現しましたでしょうか？
説明が足らないことが多くありましたので下記をご参照下さいね。
- </scrip>としていただいたのは「UXエンジニアになりたい人のブログ」さんの記事によるものです。
- アドセンスコード内を"rectangle"に変更していただいた理由は、アドセンスコードがレスポンシブの場合、左右広告の大きさを揃えるためです。
- 自動配置の位置は「最初のタグ上」としましたが、タグの種類はh2、h3、h4、h5で対応可能なコードになっています。
それでは以上です！
