【はてなブログ】アドセンスのリンクユニット（広告）を目次の上置く方法【AdSense】
どうも、さかせです。
ここ数日、リンクユニットと戦っておりました。
はたさんのこのツイートを見て、目次の上にリンクユニットを置きたくなったのです。
目次上にレスポンシブのリンクユニット置く実験をやってるんですけど、めちゃクリックされてる。もう1週間ほどやってみて結果はまたシェアしますね。 pic.twitter.com/qlgQX9ghX7
— はた@ブロガー (@hata_blog) 2018年5月15日
しかし、調べてみてもはてなブログで目次の上にリンクユニットを置く方法は出てきませんでした！
なのでいろんな方のブログを参考にして目次の上にリンクユニットを置く方法を見つけました！
せっかくなのでこの記事でその方法をまとめていこうと思います。
追記：もっと簡単な方法がありました。
ここで紹介するやり方よりプロセスが少なくて楽です。
下に書いてある方法たまに1回でうまく表示されなくて2回目で成功、なんてことがあるので上のやり方のほうが安定性もあるでしょう。
まず記事の好きなところに広告を置く方法
目次の上だろうが、見出しの上だろうが、基本的なコードは同じです。
しかし、その「見出しの上」というのが厄介なのです。
見出しだけは指定するコードが違います。
なので悪戦苦闘したのです。
こちらの方の記事を参考にすれば、記事の好きなところに広告を貼るコードが作れます。
今回の目次上広告も、こちらの記事から作成しました。
上のコード生成では、デフォルトでは「大見出し」「中見出し」「小見出し」の前後好きなほうに広告を挟むことができます。
「その他のタグ」か「いったん完成させたコード」をいじることでさらに別のところにも広告を張ることができます。
目次をコードで表すには
今回は「大見出しの前」に広告を張るコードを作って、そこから改造して「見出し前」に広告を張るコードにしました。
見出しがはてなにおいてどんなコードで作られているかというと、
www.jpneet.coｍ
utautan.hatenablog.com
こちらの方々の記事を参考にした結果、
見出しは
すると、はてなの目次は
<ul class="table-of-contents">
なるもので作られていることがわかります。
ということらしく、
下の方の書いたコードでは
という見出しの指定のされ方をしていました。
なので
大見出しコードの
var $targetElements = $('.entry-content h3');
を、
見出し用に
var $target = $('.table-of-contents');
と変更すれば、見出しの上にリンクユニットが表示されます！
実際にコードを作るとき
実際にコードを作るときは、
【本当にコピペ一発！】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ
- 上から1個目
- 大見出し（h3）にのみチェック
- の「前」にチェック
- アドセンスコード個数⇒僕は一番最初に320×100の広告を入れているので「2つ目」にチェック
- 挿入箇所がなかったら 「ないもしない」にしました。
- カテゴリーによる制限 よくわからなかったのでチェックは外しました。
という感じに設定していきました。
そしてできたコードの
var $targetElements = $('.entry-content h3');
を見つけ出して
var $targetElements = $('.table-of-contents');
に変更します。
最後に
結局、僕がリンクユニットの何と戦っていたのかというと、たぶん「アドセンスコード個数」のところを「1個目」にしていたからだと思います。
実際は「2個目」に入れる広告なので「2個目」にチェックを入れればよかったのです。
原因はこれだと思うのですが、もしかしたら違う原因があったかもしれないので、
その時はまた対処法を見つけて記事にします。
