【はてなブログ】目次上に2つの広告ユニットを横並びで表示させる方法

f:id:utautan:20180504114555p:plain

ブログ開設4年目、PVはいまだに月間3万PVの弱小ブロガーうたこです。

先人の成功者たちをならって少しでもブログを改善していこうと頑張っています。

はたさんの雑記ブログで月間30万円稼ぐアドセンスの貼り方を参考に、「目次上に300×250広告を横並びで貼る」をやってみようと思ったのですが、はたさんが使っているのはWordPress……はてなブログでどうやったらいいのか、検索しても全く出てこないんです！！！

ということで、いろんな方のブログを参考になんとかして「目次上に300×250広告を横並びで貼る」を成し遂げました。せっかくなのでその方法をまとめます。

目次上に300×250広告を横並びで貼る
- 広告を横並びにする
- 目次上に広告を表示する
完成したコード
- 参考ブログ
まとめ

目次上に300×250広告を横並びで貼る

アドセンスを貼るためのコードを公開してくださっている他ブログを参考に、2つのコードとアイデアを組み合わせることにしました。

広告を横並びにする
目次上に挿入する

以上の2STEPです。

広告を横並びにする

2つの広告ユニットを横並びにするために、ゆきひーさんのブログを参考にしました。

theme-naked.hatenablog.jp

このコードを使えば、記事下に2つ並んだ広告を作成することももちろん可能です。

目次上に広告を表示する

目次上に表示する方法がどこにもなかったので、まずは記事中に表示する方法を探しました。

uxlayman.hatenablog.com

こちらのブログを参考にすれば、記事中の見出しの上などに自由に広告を挿入することができます。

しかし……目次の上、については記述がありませんでした。「見出しの上」になっている部分を「目次の上」に変えればいいだけなのですが、はてなブログ上で「目次の上」がどういう言葉で表現されているのか分かりません。

その答えはこちらのブログにありました！

www.jpneet.com

ページを検証すればなんとか分かるそうなのですが、私にはさっぱりです。このブログの方がページを検証した結果、

すると、はてなの目次は

<ul class="table-of-contents">

なるもので作られていることがわかります。

ということが分かったそうです。ということは、h3,h4,h5なる部分を<ul class="table-of-contents">って感じに変えればいけるということですね！！

完成したコード

何度か変更を加えて、なんとかきちんと表示できるようになったコードがこちらです。

<script>
var adsenseCode = (function () {/*

<div style="display: inline-block; width: 300px; margin-bottom: 10px; vertical-align: top">
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<!--左ここから-->

<!--左ここまで-->
</div>
<div style="width: 300px; margin-bottom: 10px; vertical-align: top" class="right-ads">
<!--右ここから-->

<!--右ここまで-->
</div>
<style>
.right-ads {
    display: inline-block;
}
@media screen and (max-width: 680px) {
.right-ads {
    display: none;
}
}
</style>
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.table-of-contents');
    $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>