はてなブログのトップページ記事一覧にアドセンスを挿入する方法2016-01-30はてなブログのトップページ記事一覧にアドセンスを挿入する方法はてなブログはてなブログの記事一覧やカテゴリーページである「archive-category」の記事の間にどうしてもアドセンスを設置したい。そんな想いでとうとう完結編まで来る事ができた。Googleアナリティクスでカテゴリーページのアクセスが多いことに気付き、ググりまくって、コードを変えたりしてやっとできた・・・。前置きは長くなるのでこれくらいにします。僕ははてなブログproなので、無料の方は厳しいかもしれません。導入はこのブログではなく、違うやつでやっています。コードは、はてな記法じゃなくgitからでもなくてすみません。【前編】はてなブログで記事一覧やカテゴリー記事にアドセンスを導入するメモ【中編】はてなブログでトップページやカテゴリー一覧に特定のHTMLを挿入するスマホ記事一覧にアドセンスを挿入するコードすなばいじりさん(id:psne)の記事を元に作成しました。現在はレスポンシブで無いため、スマホのみの表示としています。【確認】「head」にアドセンスを呼ぶjavascriptが書いてあるか?「設定」>「詳細設定」>「headに要素を追加」に下記のコードがあるか確認する。複数のアドセンスを設置している場合はこの方法で毎回読み込まなくてよくなる。今回の下記コードに追加します。src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>「デザイン」>「フッター」に設置するコード下記のコードを新規アドセンス広告から、「自分のID」「広告ID」を持ってきて書き直してください。広告の大きさによって<style>を変更すると良いと思います。PC表示場合は、@mediaを使って切り替えるようです。これは元記事を参照してください。僕は広告は真ん中に表示するために、<center>を入れました。上記のコードを設置したことで、アドセンスを表示することが出来ました。上から2つ目の所に挿入されます。表示できるまで、色々と試行錯誤することになりましたが、副産物として勉強になったこともありました。失敗してからの過程を振り返ります。1中編ですなばいじりさんのコードをそのまま利用してアドセンス表示できず(他人のせいにするな!!)アドセンスを動的に生成し、archive-categoryに挿入できないか考え始める2アドセンスをDOMオブジェクト生成(Javascriptで動的に生成)して、挿入することを調べて考える。勉強が足らず、表示するコードが分からずググりまくる旅にでる。副産物として、記事中のアドセンスは多くの方のように「はてなブログで「文中にアドセンス広告を入れる」を自動化する方法」を利用していたが、1回記事下or上に表示してから、移動されるのに不満があり、こちらの改善をする。(id:bulldra)さんの記事からgithubに行き、コードを眺めてみる。・はてなブログのアーカイブページやプロフィールページにアドセンス広告を表示させるプラグイン・はてなブログのカテゴリーや記事一覧にアドセンスなどを表示させるやつもう1度すなばいじりさんのコードに立ち返り分析した中編の記事で出力されなかったコードをもう1度見直すと、改善点が見つかったのでもう1度やってみる。src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>間違え2:アドセンスコードから<ink></ink>をそのまま抜き出しているため、styleがある間違え3:PC表示しないのに、@media以下がstyleにかいてある。今回は、結局すなばいじりさんのコードをgitから利用しているため、「記事一覧の2番目」にアドセンスを挿入するしか無かった。自分のブログにはタイトル下にアドセンスがあるため、4とか5番目くらいに挿入できると都合が良い。記事中でも「3つ目のh3の前」などと指定ができるので、これを記事一覧でもできないか考えて改善していきたい。最終的には他人のgithubコードを利用せずに、DOMオブジェクト生成して、自分で場所を決めて出力したいな。色んな方の記事やコードに出会いお世話になりました。ありがとうございます。【追記】Wordpressでは多く行われてるカスタマイズのようです。アイデアは形にしないと意味がない。月別アーカイブはてなブログをはじめよう!makio1186さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。