おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

スマホ表示もOK! 記事下にアドセンスのダブルレクタングルを設置する【Sentence】

www.okigaru-migaru.net

はてなブログテーマ Sentenceは、記事下におけるダブルレクタングル広告を前提としたデザインです。

しかし、スマホ表示ではダブルレクタングルが禁止されています。そこでCSSを使ってスマホ表示の時は広告1枚を非表示にして対応させます。

他に記事最下部、サイドバー(ブログトップのみ)にレスポンシブ広告を貼り付け、最初の見出し上に記事内広告、記事下に関連コンテンツユニットを設置します。

用意するアドセンス広告

今回いくつかの場所にアドセンス広告を設置しますが、用意する広告は以下の6つです。

  1. レスポンシブ広告(1枚目):ダブルレクタングル左側
  2. レクタングル(大)(336x280px)広告:ダブルレクタングル右側
  3. レスポンシブ広告(2枚目):記事最下部
  4. レスポンシブ広告(3枚目):サイドバー
  5. 記事内広告:記事中、最初の見出し上
  6. 関連コンテンツ:記事下、関連記事一覧の代わり

レスポンシブ広告は3ヶ所分を1枚で担ってもいいのですが、広告のパフォーマンス分析をしたいのならば分けた方が便利です。

スマホ表示もOKな記事下ダブルレクタングルの設置

参考にした記事

chipspd.hatenadiary.jp

広告を記事直下(記事下のはてなスター、SNSシェアボタン、関連記事一覧よりも上)に広告を配置するため、id:chipsforestさんの【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常で紹介されていたスクリプトを使います。

SNSシェアボタンを記事直下に設置した時と同じコードです。既に設置されている方は、my-footerのdivタグをそのまま使うことができます。

ez-net.jp

アドセンスのレスポンシブ広告をレクタングルや縦長、横長といった形で指定する方法はこちらの記事を参照しました。

フッタ

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

記事直下に広告を設置するためのスクリプトです。

既に記述されている場合は省略してOKです。また、1行目のscript要素も他の用途で記述していれば省略OKです。

記事下

<div id="my-footer">
  <div class="ad-align">
    <div class="ad-l">
<!-- ここからレスポンシブ広告1つ目 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告の設定名(任意)  -->
<ins class="adsbygoogle ad-res"
     style="display:inline-block"
     data-ad-client="ca-pub-*****************"
     data-ad-slot="**********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ここまでレスポンシブ広告1つ目 -->
    </div>
    <div class="ad-r">
      <!-- ここから336x280pxのレクタングル広告 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告の設定名(任意) -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-*****************"
     data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
      <!-- ここまで336x280pxのレクタングル広告 -->
    </div>
    <p style="font-size: 70%; display: block;">スポンサーリンク</p>
  </div>
  <!-- ここにSNSシェアボタン -->
</div>
<!-- ここにSNSフォローボタン -->
<div class="ad-align">
<!-- ここからレスポンシブ広告2つ目 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告の設定名(任意)  -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-*****************"
     data-ad-slot="**********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ここまでレスポンシブ広告2つ目 -->
<p style="font-size: 70%; text-align: center;">スポンサーリンク</p>
</div>

それぞれ「ここから◯◯広告」「ここまで◯◯広告」とコメントを入れていますので、そこにアドセンスで作った広告コードを挿入してください。これらのコメントは消してもOKです。

アドセンスは貼り付け方を間違えたらアカウントを停止させられるリスクもありますので慎重且つ自己責任でやってくださいね。

my-footerのdivタグ内にあるコードは記事直下(記事下のはてなスター、SNSシェアボタン、関連記事一覧より上)に表示されます。

表示される順番は上から、

  1. 記事
  2. 1つ目のレスポンシブ広告
  3. 336x280pxレクタングル広告
  4. スポンサーリンク
  5. SNSシェアボタン
  6. 関連記事一覧
  7. SNSフォローボタン
  8. 2つ目のレスポンシブ広告
  9. スポンサーリンク

のように作っていきます。

※2017/09/27 追記

上記のコードに一部記述ミスがございましたのでお知らせ致します。

30行目…pタグの閉じタグがspanタグになっていた。
修正前:<p style="font-size: 70%; display: block;">スポンサーリンク</span>
修正後:<p style="font-size: 70%; display: block;">スポンサーリンク</p>

31行目…ad-align(1つ目)のdivタグの閉じ忘れがあったため閉じタグを追記。
修正後:</div>

1つ目のレスポンシブ広告の設定

1つ目のレスポンシブ広告はコードの記述を3ヶ所、以下のように変更します。

元の記述 変更後の記述
class="adsbygoogle" class="adsbygoogle ad-res"
style="display:block" style="display:inline-block"
data-ad-format="auto" data-ad-format="rectangle"

3つ目のdata-ad-format="auto"→"rectangle"については、他のレスポンシブ広告も同じように変更しています。

※2017/09/27 追記

上記の比較表すべてのダブルクォーテーションが全角(“”)になっていたため半角(")に修正しています。

デザインCSS

/* 広告 */
.ad-align {
  display: block;
  text-align: center;
}
.ad-res {
  width: 300px;
  height: 250px;
}
.ad-l {
  display: inline;
}
.ad-r {
  display: none;
}

@media(min-width: 768px) {
  .ad-align {
    text-align: start;
  }
  .ad-res {
    width: 336px;
    height: 280px;
  }
  .ad-r {
    display: inline;
  }
}

このコードをデザイン→デザインCSSに挿入します。

各クラスの意味を簡単に説明しますと以下の通りです。

  • ad-align:中央表示・左揃えの切り替えを行う
  • ad-res:1つ目のレスポンシブ広告の横幅を調整する
  • ad-l:ダブルレクタングルの左側の広告
  • ad-r:ダブルレクタングルの右側の広告。スマホでは非表示

サイドバー:トップは表示、記事では非表示にする

サイドバー上部にレクタングル広告を配置するスタイルは定番でしたが、モバイルからのアクセスの増加に伴ってクリック率が低いという評価が下されています。

それにページの中で上にある広告ほどクリック単価が上がります。つまりサイドバー上部に広告を貼るということは、クリック率の低いところにクリック単価の高い広告を貼ることになります。

ただ、ブログトップに何も広告がないというのももったいない。そこでブログトップではサイドバー上部の広告を表示し、記事ページでは非表示にしてやります。

HTMLモジュール

<!-- ここからレスポンシブ広告3つ目 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告の設定名(任意)  -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-*****************"
     data-ad-slot="**********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ここまでレスポンシブ広告3つ目 -->
<p style="font-size:70%;">スポンサーリンク</p>

デザイン→サイドバー→HTMLモジュールにコードを貼り付けます。

モジュールのタイトルは設定しなくてもOKです。

デザインCSS

/* サイドバーのHTMLモジュールを記事ページでは非表示 */
.page-entry .hatena-module.hatena-module-html {
  display: none;
}

デザイン→デザインCSSにこの記述を追加します。

これはSNSフォローボタンの時に説明したものと同じもので、サイドバーにあるHTMLモジュールすべてを非表示にするCSSです。

サイドバーで他にHTMLモジュールを使っている場合はおすすめしません。

SNSフォローボタンで既に記述している場合は省略してOKです。

最初の見出し上に記事内広告を表示する

アドセンスの広告の種類に記事内広告が増えました。

これは記事内に溶け込むタイプの広告とのこと。レスポンシブタイプで記事の横幅に合わせて自然な表示がされます。

そして「スポンサーリンク」や「広告」といった文言も不要だそうです。記事中にあると結構目障りなのですが、これなら幾分かマシでしょうかね。

おすすめは記事の冒頭から2段落下の位置らしいですが、僕は最初の見出しの上に表示することにします。

見出しの上にはたいてい目次を表示させています。つまり目次→広告→最初の見出しという順番で表示されることになります。

これなら冒頭のリード文から目次まで読んで「あまり読みたい内容じゃなかったな」と離脱寸前の人にも広告を見せることができますね(そうやって離脱されない記事を書くべきなんでしょうが)

参考にした記事

uxlayman.hatenablog.com

id:uxlaymanさんの【本当にコピペ一発!】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログを参考にします。

広告コードをコピペ、設定して実行したら勝手にスクリプト込みのコードを生成してくれるという親切設計です!

ありがたく使わせていただきました。

記事下

<script>
var adsenseCode = (function () {/*
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</scrip>
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content h2');
    if ($target.size() > 0) {
        $target.eq(0).before($('.insentense-adsense'));
        $('.insentense-adsense').html(adsenseCode);
    }
}, false);
</script>
<div class="insentense-adsense"></div>

デザイン→記事下にこのコードを挿入します。

Sentenceでは大見出しはh2タグを使っていますので、その設定だけ間違えないようにします。

関連コンテンツユニットを記事下に表示

アドセンス広告を貼っているブログで、ある程度まとまった記事数とアクセスがあれば関連コンテンツユニットを使うことができるようになります。

アドセンス側が用意したブログ内の関連記事一覧で、且つ広告としての収益効果もあるユニットです。

せっかく使えるならば、はてなブログの記事下の関連記事一覧の代わりに設置するといいでしょう。

各コンテンツの位置(特にSNSシェアボタン)だけ調整

生成したコードを記事下に貼り付けるだけなので、実際のコードを使った説明は割愛します。

強いて設定が必要なのはSNSシェアボタンの位置についてですかね。

<div id="my-footer">
  【ダブルレクタングル広告】
  【SNSシェアボタン】
</div>
【SNSフォローボタン】
【レスポンシブ広告】

SNSシェアボタンがはてな公式の関連記事一覧の下に表示されるのを嫌って、記事直下に表示するmy-footerの中に入れていました。

はてな公式の関連記事一覧を非表示にし、代わりに関連コンテンツユニットを導入する場合、わざわざスクリプトを使わなくても関連コンテンツユニットの上にSNSシェアボタンを設置できます。

<div id="my-footer">
  【ダブルレクタングル広告】
</div>
【SNSシェアボタン】
【関連コンテンツユニット】
【SNSフォローボタン】
【レスポンシブ広告】

こんな感じに並べ替えます。

ただし、SNSシェアボタンは記事直下から記事下に位置を変えるとデザインが乱れてしまいますのでCSSの調整が必要です。

それはSNSシェアボタンの設置に関する記事で説明していますのでよく読んでください。

www.okigaru-migaru.net

以上で広告に関するカスタマイズは終了です。お疲れ様でした!