はてなブログで記事一覧ページにAdSenseを挟みこむカスタマイズ

並んでいるパズルに新しいピースを挿入する

こんにちは、NAEです。

はてなブログのカスタマイズでほぼ手つかずな記事一覧(アーカイブ)ページ

テーマを作る一部の人以外で、記事一覧ページの見た目やカスタマイズについて考えたことのある方はごく一部ではないでしょうか。

そんな記事一覧ページ、実はカスタマイズができます。その代表例として、記事の間にAdSenseの広告をよしなにはさみこむ方法をご紹介したいと思います。

スポンサーリンク
スポンサーリンク

はてなブログの記事一覧(アーカイブ)ページとは

記事一覧(アーカイブ)ページとは、URLに「archive」の含まれているページを指します。

たとえば、

  • 全体の記事一覧 https://www.naenote.net/archive
  • カテゴリー内の記事一覧 https://www.naenote.net/archive/category/%E3%83%96%E3%83%AD%E3%82%B0
  • 月別アーカイブ https://www.naenote.net/archive/2016/9

というように、何らかの括りで記事を一覧表示するものです。

※2017-02-22 WordPressへ移行したため上記リンクは切れています

記事一覧(アーカイブ)ページはあまりカスタマイズされていない

そんな記事一覧ページですが、記事本体のページと比べると非常に存在感が薄いです。

そのせいか、はてなブログのカスタマイズ系の記事で記事一覧について触れているものはほとんどありません

記事一覧ページヘのアクセス数は記事本体と比べると少ないですし、そもそもブログのメインコンテンツは記事なので、あまり手を入れる必要はないのかもしれません。

しかしですね。

実際に記事一覧ページを見てみると実にコンテンツの量が多いんですね。
記事の一覧が出てくるんですから、記事の数が増えるほどページ内のコンテンツ量は増えていきます。(ちなみに50記事ごとにページネーションされます)

これだけコンテンツがあるなら多少広告が入っていてもユーザ体験は損ねないはず

記事一覧(アーカイブ)ページの記事間にAdSenseを入れる

そこで、記事一覧(アーカイブ)ページの記事間にAdSenseを入れるカスタマイズをしてみました。

具体的な見え方は下記リンク先を見ていただければわかると思います。

記事一覧 – NaeNote

よりユーザの目に触れやすい上部を中心に合計3枚のAdSenseをはさみこみました。フッターに入れたものをあわせると5枚になります。

AdSenseの3枚上限が撤廃されたからこそできる使い方ですね。

カスタマイズ方法

それでは、実際のカスタマイズ方法をご紹介します。

前提事項:レスポンシブデザインのみ動作確認しています

以下方法はレスポンシブデザインにて動作確認しています。

はてなブログProでスマホ向けに別デザインをされている方はご留意ください。(記事一覧ページなのでそこまで大変なことはないと思いますが念のため・・・)

事前準備:AdSenseとjQueryの準備

事前準備として、はさみ込みたい数ぶんのAdSenseの広告枠を準備しておいてください。以下、広告タイプはレスポンシブを使うことを前提に進めます。

Google AdSense

また、本カスタマイズではjQueryを利用します。もしjQueryライブラリをどこかで読み込んでいない場合、以下コードを追加してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQueryライブラリの読み込みを爆速化したい場合はこちらをどうぞ。

はてなブログでjQueryの読み込み時間をゼロにする方法(はてなブログの高速化)
はてなブログのカスタマイズでほぼ必ずお世話になるjQuery。読み込み時間をゼロにして、ブログをさらに軽くしていきましょう。

カスタマイズする場所

フッターをカスタマイズします。

設定 → デザイン → フッター

コピペコード

フッターに追加するコピペコードはこちらです。一番最後、末尾部分に追加してもらうとよいかと思います。(DOMContentLoadedする手間が省ける)

2箇所、のちほど編集する箇所があります。

<!-- カテゴリページ用Adsense挿入 -->
<script>// <![CDATA[
    function insertAdSense (slotID, index) {
        // AdSense用のHTMLを組み上げ
        var elmDiv = document.createElement('div');
        var spsLink = document.createElement('div');
        // スポンサーリンク表記
        spsLink.innerHTML = 'SPONSORED LINK'; 
        spsLink.style.fontSize = '12px';
        elmDiv.appendChild(spsLink);
        var adsIns = document.createElement('ins');
         adsIns.className = 'adsbygoogle';
         adsIns.style.display = 'block';
         adsIns.dataset.adClient = 'ca-pub-自分のアドセンスのID';
         adsIns.dataset.adSlot= slotID;
         adsIns.dataset.adFormat = 'auto';
        var adsGgl = document.createElement('script');
        adsGgl.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
        elmDiv.appendChild(adsIns);
        elmDiv.appendChild(adsGgl);
        
        // 中央寄せにしておく
        elmDiv.style.textAlign = 'center';
        // AdSenseを挿入する。記事数が挿入箇所より少なければスキップ
        var $target = $('.archive-entry');
        if(index <= $target.length) $target.eq(index).before(elmDiv);
    }
    
    jQuery(function(){
        // 記事一覧系のページでなければスキップ
        if(!/archive/.test(location.href)) return;
        // 広告IDと挿入箇所(何番目の記事の前に挿入するか)を指定する
        var adSlots = [
            ['広告ID#1',5],
            ['広告ID#2',15],
            ['広告ID#3',25],
            ['広告ID#4',35]
        ];
        
        // 順番に挿入していく
        $.each(adSlots, function(){
            insertAdSense(this[0], this[1]);
        });
    });
// ]]></script>

自分用に編集する場所

ひとつ目はこちら。

adsIns.dataset.adClient = 'ca-pub-自分のアドセンスのID';

変数に格納する値をca-pubからはじまる自分のAdSenseアカウントIDに置きかえてください
AdSenseのコピペコードでdata-ad-client="ca-pub-XXXXXX"の部分です。

ふたつ目はこちら。

// 広告IDと挿入箇所(何番目の記事の前に挿入するか)を指定する
var adSlots = [
['広告ID#1',5],
['広告ID#2',15],
['広告ID#3',25],
['広告ID#4',35]
];

編集する部分は以下のとおりです。

  1. 「広告ID#XX」の部分を、事前に準備したAdSenseのID(data-ad-slot="XXXXXX"の数字)に置き換える
  2. 5、15、25、35などの挿入箇所を変える
  3. 必要に応じて広告の数を増やすor減らす

なお挿入箇所については、記事一覧ページに表示される記事数が挿入箇所で指定する数字より小さくなる場合、挿入処理自体をスキップするようになっています。
そのため適当に10記事ごとくらいの数字を入れておけばOKかと思います。

ただし、記事一覧ページに表示される記事数の上限は50なので、51以上の数字を入れるとエラーになりますのでご注意ください。

※2016-10-28追記:
検証の結果、2つめ以降の広告は全くクリックされなかったため外しました。

これにてカスタマイズは完了です。

スポンサーリンク

ちょっとした解説

この方法のミソは

  • すべてのページで表示・処理されるフッターを利用している
  • 実際に処理を行うかをURLで判別している

の2点です。

フッターは、トップページにも記事ページにも記事一覧ページにも表示されるユーティリティプレーヤー。
そのため、フッターをうまく活用すれば記事ページ以外でも自由にカスタマイズすることができます

やろうと思えばaboutページだって自由にカスタマイズできてしまいます。

とはいえ、対象ページによってカスタマイズする内容は変えたいし、カスタムしたものが意図しないページで適用されるのは困る。

そのためURLでカスタマイズ処理を行うかを判別させています
今回はURLにarchiveという文字が含まれているかという条件の正規表現にかませて分岐させています。

// 記事一覧系のページでなければスキップ
if(!/archive/.test(location.href)) return;

参考記事

記事一覧ページへのAdSense挿入の元祖はすなばいじりさんです。GitHubに上げてくださっていたJavascriptコードの中身からヒントをもらいました。

はてなブログのカテゴリーや記事一覧にアドセンスなどを表示させるやつ - すなばいじり
一覧ページに「固定ページ」のリンクとか貼りたい 記事のヘッダやフッタ、サイドバーに色々リンクを付ける事ができるけど、記事一覧の中に入れたいよね。ランキング表示とか時々そういうやつ有るじゃない。 どうやるの? やってみよう、大はてな実験 で。 はてなブログでカテゴリーページ等にアドセンスを表示させる方法ってあるのかな? ...

すなばいじりさんのコードでは1箇所にしか挿入できない、という課題認識はゼロつくさんのこちらの記事からの着想です。

はてなブログのトップページ記事一覧にアドセンスを挿入する方法 - ゼロツク
はてなブログの記事一覧やカテゴリーページである「archive-category」の記事の間にどうしてもアドセンスを設置したい。そんな想いでとうとう完結編まで来る事ができた。 Googleアナリティクスでカテゴリーページのアクセスが多いことに気付き、ググりまくって、コードを変えたりしてやっとできた・・・。まぁ、前置きは...

なお、本カスタマイズではJavscript内でHTMLを組んで挿入させているため、とまじぃさんが指摘されたアクティブビュー視認率が無駄に下がる問題は起こりません。

「記事中広告は単価が下がる」という伝説の真実 - とまじぃさんち
そろそろポケモンGOバブルも少しづつ収まってきた感がありますねぇ。 当ブログでも大波には乗れなかったものの、周囲のさざなみ程度には乗れたようで、 普段の一週間分くらいの方が一日に来てくれてる状況でかなりバブリーでございました(笑) これがほとんど「検索経由」ですから、それなりにAdsenseのクリックもありました。 平...
スポンサーリンク

まとめ:記事一覧ページだっていじれる

以上、はてなブログの記事一覧(アーカイブ)ページにAdSenseを挿入する方法でした。

記事ページと比べるとアクセス数の圧倒的に少ない記事一覧ページですが、記事が増えればコンテンツは多いため、一定数の広告を挟み込んでも
読者の邪魔にはならないものと思います。

記事一覧ページのみならず、フッターをいじればどのページも自由にいじれてしまうのでは・・・遊びゴコロがはかどりますね。

そんな遊びゴコロを全開にした記事がこちら。すべてのJavaScriptをフッターに書いてしまうという、玄人向け魔改造です。

魔改造によるはてなブログの高速化。jQuery/JavaScriptをフッターに移動する方法
jQueryライブラリの読み込みとそれに依存するJavascriptコードをすべてフッターに寄せることでPageSpeed Insightsスコアを5ポイント改善する魔改造。副作用あり。
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

おすすめ記事

関連記事