Help us understand the problem. What is going on with this article?

はてなブログのインデックスをリスト化して、記事数件ごとにgoogle ADを挿入する

More than 1 year has passed since last update.

はてなブログのインデックスは記事がが数件ならぶことが多い。これを通常のWebメディアのように記事をリスト化して、ユーザーの回遊性を高めたい。
仕組みは簡単で、インデックスに来たら強制的にアーカイブのページに飛ばすようにするだけです。

いくつか方法はあるようですが、私はこちらのサイトで紹介されているPHPのものを使用しました。

http://dokuwohaku.hateblo.jp/entry/2015/10/11/080000
※ 今回の件でJSのものに変更しようと思いました。

これで、インデックスがリスト化されます。

Google AD Sence を挿入する

ここからが本番である。/archive は50件ほど表示されています。そこで、jQueryを使用して、リストの合間に広告を挿入していきたいと思います。
こちらが最終形態になります。

<script type="text/javascript">
$('document').ready(function(){
        var adsCode = '<div style="margin:16px 0px;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-6759455255419772" data-ad-slot="9553718485"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script></div>'

      $('.archive-entry:nth-child(5n)').each(function(){
          $(this).append($(adsCode));
      });
});
</script>

こちらがデモです。
http://noriyasu-katano.hatenablog.com/archive

ここまでくるのが結構大変でした。
まずは、google adsence のタグを一行にして、「adsCode」に値を入力するのですが、scriptタグを値に入れる場合、普通に記述したらうまくいかないのです。「\(バックスラッシュ)」を閉じたぐの前に入力しないと機能しないのです。それぞれ含まれているscriptタグにバックスラッシュを入れます。
そして、5件ごとに表示させるようにします。
jQueryで「:nth-child(5n)」を設定するとターゲットのタグやクラスに指定の数ごとに要素を追加することができます。「(5n)」の部分を変更すると件数が変更されます。
最後に「adsCode」を「$()」で囲みます。
この設定をhead内に記述します。

課題

これで、5件ごとに表示されますが、いくつか課題を感じています。
リスト表示をPHPで処理しているので、それをJSにしたいと思います。PHP自体問題はないのですが、せっかくJSでまとめているので気分的な問題です。
そして、現時点ではhead内に記述しているので、全てのページで作動しています。たまたまページ内にターゲットのクラスがないだけなので、ここのページ認証を行えるようにしたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away