過ぎし子育ての日々はほぼ笑い話

空を見るのが好きな、アラフォーシングルマザーの子育て雑記ブログです。

はてなブログでリンクユニットを目次の上に自動で配置してみた HTMLに直接はってもリンクユニットが表示されない?

アドセンスの配置で「目次の上のリンクユニットはクリックされやすい」と見たことはありませんか?
配置を変えるだけで、アドセンス収入が上がったら純粋に嬉しい・・・

その後、悪戦苦闘する事半日近く・・・ようやく設置できました(苦笑)
すべてはブログの先輩方のおかげです。

目次の上以外でも、タイトル直下にリンクユニットを配置する事を考えましたが、当ブログはプルダウンメニューを使っていて、タイトル直下だと被るので、あまりよくないのかな?と思って、目次の上の配置に決めました。

アドセンス広告にプルダウンメニューが被る配置は、アドセンスのポリシー違反です。
リンクユニットも同じ対応になるかは見つけられませんでした(汗)
(またズボラ感まる出しですみません)

広告

目次の上にリンクユニットを配置する方法その1
手順が一番少ない方法です

半日かかって、目次の上にリンクユニットを配置後、いつも大変参考にさせていただいている、うえのさんが目次の上にリンクユニットを配置しているのを発見!!
はやくうえのさんに聞けばよかったと後悔・・・しかも記事にもされていた!!!

うえのさんのリンクユニットの記事はこちら🔻

www.uenoyou.net

 

うえのさんの記事に出ている方法が、一番簡単に実装できる手順だと思います。
うえのさーん、いつもありがとうございまーす。

リンクユニットはHTMLに直接はっても表示されない

当ブログの記事中のアドセンス広告は、手動でHTMLに直接はりつけています。
見たままモードで記事の作成をしているので、HTMLに貼りつけるのは簡単で、リンクユニットのコードもそのつもりでHTMLの目次の上にコードをはりました。

いつまで経っても表示されません(1ヵ月以上試しました)

PCの表示ですとこちら🔻

はてなブログで目次の上にリンクユニットを表示

これは見出しの上ですが、目次でも同じことで、これでは意味がありません(泣)

同じ記事のスマホだとこちら🔻

はてなブログで目次の上にリンクユニットを表示

通常、記事内のリンクユニットは1ブロックで4つボタンが表示されますが、2つしか表示されません。
わざわざ5つや6つに表示させるコードの変更方法が公開されているのに、2つでは困ります・・・

この辺でやっと、はてなブログではリンクユニットのコードは直接HTMLにはっても表示されないようだ・・・と気づきました。

簡単に設置できるのは、記事内では記事上と記事下になりますが、目次の上はどうしたものか??

一つは上記の、うえのさんの記事にある方法が、手順も少なくうまく配置できれば一番良いと思います。

広告

目次の上にリンクユニットを配置する方法 その2

でも私は上記の方法を幾度となく試しましたがうまくいかず、諦めて他をさがしました(私の何がいけなかったの😭😭😭)

上記の方法がうまくいかない場合は、こちらのsacchiさんの方法も試してください。
sacchiさんのリンクユニットの記事はこちら🔻

saka-mo.com

 

U太郎さんの「文中にアドセンス広告を入れる」を自動化する方法を応用して、目次の上に自動的にリンクユニットを配置する方法を公開しています。

まずはこちらのU太郎さんの記事のフォームに、アドセンスのリンクユニットのコードをはって自動配置のコード作ります。

U太郎さんの自動で文中にアドセンス広告を入れる記事はこちら🔻

uxlayman.hatenablog.com


はじめに「自動配置用広告コード:」にリンクユニットのコードをいれる
 ※リンクユニットのコードの作り方は上記で紹介した、うえのさんの記事が画像付きでわかりやすいです。

続いてリンクユニットの挿入箇所の設定です。

挿入箇所:

「上から1つ目の」を選択

「大見出し(h3)」にチェック

「の 前」を選択

アドセンスコードの個数:「1つ目」を選択

挿入箇所がなかったら:「表示しない」を選択

カテゴリーによる制限のチェックは外しました
※すみません、ここは理解できませんでした(汗)

最後に作製ボタンを押して、コードをつくります。

はてなブログで目次の上にリンクユニットを表示

リンクユニットの挿入箇所がなかった場合の対応で、「なにもしない」を選ぶと、目次のない記事はコードを入れた個所(記事上か記事下)に配置されることになります。
もともと記事上下にコードを入れていたら、リンクユニットが2つ上下で並びます

私は記事下にコードを入れていたので、「なにもしない」を選択したコードを入れた時、記事下にリンクユニットが続けて並んでしまいました🔻

はてなブログで目次の上にリンクユニットを表示

 


このコードのままでは、1つ目の見出しh3の前にリンクユニットを入れるコードになるため、目次の上に配置できるようにコードを変更します。


できたコードの
var $targetElements = $(‘.entry-content h3’);
を見つけ出して
var $targetElements = $(‘.table-of-contents’);
に変更します。

 

sacchiさんの記事から引用させていただきました。

.entry-content h3」が見出しh3を示します。ここをはてなブログの目次を示した「.table-of-contents」に変えます。

変更したコードを全部コピーして、はてなブログダッシュボード→デザイン→スパナマーク→記事

記事の上下のカスタマイズで、記事上か記事下のどちらかに入れると、目次の上にリンクユニットを配置する設定の出来上がりです!
「変更を保存する」を押すのをお忘れなく。

当ブログですと、記事下のこーを入れるボックスに目次上用と、記事下用の2つのコードが入っています。

目次とリンクユニットの間を空ける

そうしてできた配置がこちら🔻

はてなブログで目次の上にリンクユニットを表示


できた!!でも・・・ち・・・近い!目次と近すぎる・・・(泣)

という事で、目次もカスタマイズを加え、リンクユニットと目次の間にすき間を作りました。

せっかくなのでリンクユニットも色合いがブログに合うように変更しました。

やっとできたカスタマイズ後のリンクユニットと目次はこちら🔻

はてなブログで目次の上にリンクユニットを表示

やったー、無事に設置できましたー!

目次のカスタマイズは、「Haruni」や「Yumekawa 」のテーマで大活躍のminimalgreenさんのこちらの記事を参考にさせていただきました。
すごくかわいくて、どのデザインにしようか迷いました(笑)
minimalgreenさんの目次のカスタマイズの記事はこちら🔻

blog.minimal-green.com

最後に

今回も、ブログの先輩方のおかげで、無事に希望の場所にリンクユニットを配置することができました。
本当にありがとうございます。

そしてアドセンスの収益の方はどうなのか?と聞かれると、たしかに記事下のリンクユニットより、目次上のリンクユニットの方がクリックされています。

記事下のリンクユニットも、はてなブログの標準の関連記事を外して配置するようにしたら少しよくなった・・・かな?といった感じで、正しく検証してないのではっきりしたことが言えず申し訳ありません。

アドセンスは6月末から広告をはるようになり、約4カ月になります。一日100円いけば良い方です。
せっかく表示させるのだから、最適な表示位置も検討しながら続けてみます。

以上が、アドセンスのリンクユニットを目次の上に設置する2つの方法でした。

本日も最後まで読んでいただき、ありがとうございました。

 

関連記事

 

広告