はてなブログにリンクユニット広告を掲載してみる(目次のアニメーションとの共存版)

今回ブログのデザインを少し変えてみました。

具体的には、アドセンスでリンクユニット広告の掲載です。
リンクユニット広告はクリック率が上がるという話なのでブログに組み入れようと思います。
目次の上に入れるのが効果が高いということなので、目次の上に自動挿入するコードを書きたいと思います。

リンクユニット広告とは

リンクユニットは、ページのコンテンツに関連するトピックのリストが表示されます。
以下のような形です。

文字だけの広告が効果があるのか？と思うのですが、逆にさりげないのが良いのかもしれませんね。

リンクユニット広告の作成

ここからはアドセンスでリンクユニットを作成する方法です。
アドセンスのサイトでリンクユニットを作成します。

広告の設定 -> 広告ユニット -> 新しい広告ユニットを選択します。

次に広告の設定で広告サイズをリンク広告を選択するのがポイントです。サイズはデフォルトのレスポンシブスタイルを選択しておけばいいと思います。一番下の保存してコードを取得を押せば完成です。作成されたコードは後で使います。

目次の上に自動挿入するコードを書く

先ほど作成されたコードを使ってはてなブログにコードを仕込みます。私の場合、目次の表示非表示のアニメーションを入れているので一工夫してます。以下にコードを記載しました。先程生成されたコードに変更してブログに仕込みます。場所はどこでも平気ですが私はフッタに入れてます。

<pre class="code" data-lang="html" data-unlink="" lang-html="">
<span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier">></span>
<span class="synSpecial">  addEventListener</span>(<span class="synConstant">"DOMContentLoaded"</span><span class="synSpecial">, </span><span class="synIdentifier">function</span>()<span class="synSpecial"> </span><span class="synIdentifier">{</span><span class="synSpecial"> </span>
<span class="synSpecial">    </span><span class="synIdentifier">let</span><span class="synSpecial"> heredoc =`</span>
<span class="synSpecial">   <div </span><span class="synStatement">class</span><span class="synSpecial">=</span><span class="synConstant">"link-adsense"</span><span class="synSpecial">></span>
<span class="synSpecial">     </span><span class="synComment"><!--</span><span class="synSpecial"> ここに生成したコードをコピペします。 </span><span class="synComment">--></span>
<span class="synSpecial">     </span><span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier">></span>
<span class="synSpecial">       </span>(<span class="synSpecial">adsbygoogle = </span><span class="synStatement">window</span><span class="synSpecial">.adsbygoogle || </span><span class="synIdentifier">[]</span>)<span class="synSpecial">.push</span>(<span class="synIdentifier">{}</span>)<span class="synSpecial">;</span>
<span class="synSpecial">     <</span><span class="synIdentifier">\</span><span class="synSpecial">/script></span>
<span class="synSpecial">   </div></span>
<span class="synSpecial">   </span><span class="synComment">//クリックすると表示される目次はここからしたです。</span>
<span class="synSpecial">   </span><span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier">></span>
<span class="synSpecial">   $</span>(<span class="synIdentifier">function</span>()<span class="synIdentifier">{</span>
<span class="synSpecial">       </span><span class="synIdentifier">var</span><span class="synSpecial"> $Contents = $</span>(<span class="synConstant">".table-of-contents"</span>)
<span class="synSpecial">       $</span>(<span class="synSpecial">$Contents</span>)<span class="synSpecial">.before</span>(<span class="synConstant">'<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>'</span>)<span class="synSpecial">;</span>
<span class="synSpecial">       $</span>(<span class="synConstant">".show-area"</span>)<span class="synSpecial">.click</span>(<span class="synIdentifier">function</span>()<span class="synIdentifier">{</span>
<span class="synSpecial">           </span><span class="synIdentifier">var</span><span class="synSpecial"> $</span><span class="synIdentifier">this</span><span class="synSpecial"> = $</span>(<span class="synIdentifier">this</span>)<span class="synSpecial">;</span>
<span class="synSpecial">           </span><span class="synStatement">if</span>(<span class="synSpecial">$Contents.css</span>(<span class="synConstant">'display'</span>)<span class="synSpecial"> == </span><span class="synConstant">'none'</span>)<span class="synIdentifier">{</span>
<span class="synSpecial">               $Contents.slideDown</span>(400)<span class="synSpecial">,</span>
<span class="synSpecial">               $</span><span class="synIdentifier">this</span><span class="synSpecial">.text</span>(<span class="synConstant">"[隠す]"</span>)<span class="synSpecial">;</span>
<span class="synSpecial">           </span><span class="synIdentifier">}</span><span class="synStatement">else</span><span class="synIdentifier">{</span>
<span class="synSpecial">               $Contents.slideUp</span>(400)<span class="synSpecial">,</span>
<span class="synSpecial">               $</span><span class="synIdentifier">this</span><span class="synSpecial">.text</span>(<span class="synConstant">"[表示]"</span>)
<span class="synSpecial">           </span><span class="synIdentifier">}</span><span class="synSpecial">;</span>
<span class="synSpecial">       </span><span class="synIdentifier">}</span>)<span class="synSpecial">;</span>
<span class="synSpecial">   </span><span class="synIdentifier">}</span>)<span class="synSpecial">;</span>
<span class="synSpecial">   <</span><span class="synIdentifier">\</span><span class="synSpecial">/script></span>
<span class="synSpecial">`</span>
<span class="synSpecial">    </span><span class="synIdentifier">let</span><span class="synSpecial"> linkUnit = $</span>(<span class="synSpecial">heredoc</span>)<span class="synSpecial">;</span>
<span class="synSpecial">    $</span>(<span class="synConstant">'.table-of-contents'</span>)<span class="synSpecial">.before</span>(<span class="synSpecial">linkUnit</span>)<span class="synSpecial">;</span>
<span class="synSpecial">  </span><span class="synIdentifier">}</span><span class="synSpecial">, </span><span class="synConstant">false</span>)<span class="synSpecial">;</span>
<span class="synIdentifier"></</span><span class="synStatement">script</span><span class="synIdentifier">></span>

はてなブログは目次が「.table-of-contents」というclassで定義されているのでbeforeでリンクユニット広告(と目次の表示非表示機能)を追加します。