はてなブログのカテゴリーや記事一覧にアドセンスなどを表示させるやつ

一覧ページに「固定ページ」のリンクとか貼りたい

記事のヘッダやフッタ、サイドバーに色々リンクを付ける事ができるけど、記事一覧の中に入れたいよね。ランキング表示とか時々そういうやつ有るじゃない。

どうやるの？

やってみよう、大はてな実験　で。

<a href="http://suzukidesu23.hateblo.jp/entry/google-adsense1105" data-mce-href="http://suzukidesu23.hateblo.jp/entry/google-adsense1105">はてなブログでカテゴリーページ等にアドセンスを表示させる方法ってあるのかな？ - 鈴木です。</a>
こちらの記事が上がっていて、「出来るけど無くても良いかな？」と思っていましたが、

多分できるけど、adsenseの広告コードをいじった時のペナルティが見えないので手を出してない部分。Amazonとかa8とかの画像単純リンクなら安全にできるかな。 / “はてなブログでカテゴリーページ等にアドセンスを表示させる方法…” http://t.co/UzhK7GBi9T
— 池田仮名 (@bulldra) 2014, 11月 5

id:bulldra (池田仮名)氏が反応したので、

@bulldra 書きますか/書きましょう
— PSN(psne.jp) (@psne) 2014, 11月 5

お互いに書いてみたというエントリー(二回目)

書きますか/書きましょう　という表記にしたのは、コード書きであれば何となく察しが付くと思います。*1

使ってみる

AdSense等の広告を貼り付ける場合は、はてなブログや広告配信システムの規約をよく読んでから行ってください。→ はてなブログPro

※Proに設定していないという諸事情の為、いつもの場所とは少し違います。
設定→詳細設定→「headに要素を追加」に貼り付けます。

<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('表示させたいHTML', '');
</script>

どんな感じに表示されるの？

コードのカスタマイズ例

<script>
Htnpsne.PushHTML.init('<div class="section"><span class="date "><time datetime="2038-11-07T07:18:45Z" title="2038-11-07T07:18:45Z"></time></span><div class="entry-title"><a href="http://psn.hatenablog.jp/entry/discover-hatena">大はてな実験</a></div><div class="entry-body"><div class="entry-content"><p>大はてな実験！</p></div></div></div><span class="entry-footer-time"><a href="#"><time data-relative datetime="2038-11-07T07:18:45Z" title="2038-11-07T07:18:45Z" pubdate class="updated">2038-11-07 07:18</time></a></span>', 'HatenaTime');
</script>

上記の例のように貼り付けると、

f:id:psne:20141111213314p:plain

PC版

f:id:psne:20141111213315p:plain
スマホ版

このようになります。

AdSenseの場合は

f:id:psne:20141111213316p:plain

<ins> ～ </ins> までの部分を1行で入力します。
第二引数には「googleads」を入力します。

<script>
//このコードはそのまま利用しないでください。
Htnpsne.PushHTML.init('<ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="  " data-ad-slot="  "></ins>', 'googleads');
</script>

AdSenseのスタイルについては、別途貼り付けると良いでしょう。

<style>.my_adslot{width:320px;height:50px;}@media (min-width:500px){.my_adslot{width:468px;height:60px;}}@media (min-width: 800px){.my_adslot{width:550px;height:90px;}}</style>