楽天モバイルスマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。読み込み中・・・こんにちは、NAEです。はてなブログのカスタマイズでほぼ手つかずな記事一覧(アーカイブ)ページ。テーマを作る一部の人以外で、記事一覧ページの見た目やカスタマイズについて考えたことのある方はごく一部ではないでしょうか。そんな記事一覧ページ、実はカスタマイズができます。その代表例として、記事の間にAdSenseの広告をよしなにはさみこむ方法をご紹介したいと思います。参考記事まとめ:記事一覧ページだっていじれる記事一覧(アーカイブ)ページ記事一覧(アーカイブ)ページとは、URLに「archive」の含まれているページを指します。http://www.naenote.net/archive/2016/9というように、何らかの括りで記事を一覧表示するものです。記事一覧(アーカイブ)ページはあまりカスタマイズされていないそんな記事一覧ページですが、記事本体のページと比べると非常に存在感が薄いです。そのせいか、はてなブログのカスタマイズ系の記事で記事一覧について触れているものはほとんどありません。記事一覧ページヘのアクセス数は記事本体と比べると少ないですし、そもそもブログのメインコンテンツは記事なので、あまり手を入れる必要はないのかもしれません。実際に記事一覧ページを見てみると実にコンテンツの量が多いんですね。記事の一覧が出てくるんですから、記事の数が増えるほどページ内のコンテンツ量は増えていきます。(ちなみに50記事ごとにページネーションされます)これだけコンテンツがあるなら多少広告が入っていてもユーザ体験は損ねないはず。記事一覧(アーカイブ)ページの記事間にAdSenseを入れるそこで、記事一覧(アーカイブ)ページの記事間にAdSenseを入れるカスタマイズをしてみました。具体的な見え方は下記リンク先を見ていただければわかると思います。NaeNoteよりユーザの目に触れやすい上部を中心に合計3枚のAdSenseをはさみこみました。フッターに入れたものをあわせると5枚になります。AdSenseの3枚上限が撤廃されたからこそできる使い方ですね。カスタマイズ方法それでは、実際のカスタマイズ方法をご紹介します。前提事項:レスポンシブデザインのみ動作確認しています以下方法はレスポンシブデザインにて動作確認しています。はてなブログProでスマホ向けに別デザインをされている方はご留意ください。事前準備として、はさみ込みたい数ぶんのAdSenseの広告枠を準備しておいてください。以下、広告タイプはレスポンシブを使うことを前提に進めます。AdSenseまた、本カスタマイズではjQueryを利用します。jQueryライブラリをどこかで読み込んでいない場合、以下コードを追加してください。src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;jQueryライブラリの読み込みを爆速化したい場合はこちらをどうぞ。NaeNoteカスタマイズする場所フッターをカスタマイズします。追加してもらうとよいかと思います。(DOMContentLoadedする手間が省ける)2箇所、のちほど編集する箇所があります。AdSenseを挿入する。]]&gt;&lt;/script&gt;自分用に編集する場所ひとつ目はこちら。'ca-pub-自分のアドセンスのID';変数に格納する値をca-pubからはじまる自分のAdSenseアカウントIDに置きかえてください。AdSenseのコピペコードでdata-ad-client="ca-pub-XXXXXX"の部分です。['広告ID#4',35]];編集する部分は以下のとおりです。スキップするようになっています。そのため適当に10記事ごとくらいの数字を入れておけばOKかと思います。記事一覧ページに表示される記事数の上限は50なので、51以上の数字を入れるとエラーになりますのでご注意ください。※2016-10-28追記:検証の結果、2つめ以降の広告は全くクリックされなかったため外しました。これにてカスタマイズは完了です。した解説この方法のミソはすべてのページで表示・処理されるフッターを利用している実際に処理を行うかをURLで判別しているの2点です。フッターは、トップページにも記事ページにも記事一覧ページにも表示されるユーティリティプレーヤー。そのため、フッターをうまく活用すれば記事ページ以外でも自由にカスタマイズすることができます。やろうと思えばaboutページだって自由にカスタマイズできてしまいます。いえ、対象ページによってカスタマイズする内容は変えたいし、カスタムしたものが意図しないページで適用されるのは困る。そのためURLでカスタマイズ処理を行うかを判別させています。今回はURLにarchiveという文字が含まれているかという条件の正規表現にかませて分岐させています。ページへのAdSense挿入の元祖はすなばいじりさんです。GitHubに上げてくださっていたJavascriptコードの中身からヒントをもらいました。psn.hatenablog.jpすなばいじりさんのコードでは1箇所にしか挿入できない、という課題認識はゼロつくさんのこちらの記事からの着想です。zerotsuku.hatenablog.comなお、本カスタマイズではJavscript内でHTMLを組んで挿入させているため、とまじぃさんが指摘されたアクティブビュー視認率が無駄に下がる問題は起こりません。www.toma-g.netまとめ:記事一覧ページだっていじれる以上、はてなブログの記事一覧(アーカイブ)ページにAdSenseを挿入する方法でした。記事ページと比べるとアクセス数の圧倒的に少ない記事一覧ページですが、記事が増えればコンテンツは多いため、一定数の広告を挟み込んでも読者の邪魔にはならないものと思います。記事一覧ページのみならず、フッターをいじればどのページも自由にいじれてしまうのでは・・・遊びゴコロがはかどりますね。そんな遊びゴコロを全開にした記事がこちら。すべてのJavaScriptをフッターに書いてしまうという、玄人向け魔改造です。(id:nice_and_easy)外資コンサルでIT戦略やってるアラサー管理職です。余計なことを考えず、気楽に生きるアイデアを発信しています。