HHS

変デジはてな支所

【はてなブログをカスタム】記事本文直下にアドセンスを貼るやり方。シェアボタン上に広告を移動してみた。

f:id:lonestartx:20210705141326j:plain

久しぶりに「はてなブログ」のデザインをカスタマイズしました。基本的なデザインは同じですが、広告の数を減らして、表示する場所を変更しました。

はてなブログに「Google AdSense」の広告を貼る場合、本文に直接コードを書き込んだり、自動的に指定した場所に表示させたりいくつかやり方がありますが、自分が試したのは「シェアボタンの上に広告を貼る」パターンです。

f:id:lonestartx:20210705141955j:plain

通常、はてなブログの設定から「記事の上下のカスタマイズ」→「記事下」にコードを貼っても、シェアボタンの下に広告が表示されます。

しかし、Google AdSenseで1番クリックされやすいのは「記事直下」なので広告の位置を以下のサイトを参考にして変更しました。

こちらのサイト内で紹介されている「記事下シェアボタンの手前にアドセンスを自動で表示させる方法」を参考に、スポンサーリンクというテキストを標準サイズにしたのが次のコードです。

<!--記事下アドセンス-->
<div id="my-footer">
<p style="text-align:center" >スポンサーリンク<br>
※ここに自分のアドセンスコードを貼り付け
</p>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!--記事下アドセンスここまで-->

このコードを「記事の上下のカスタマイズ」→「記事下」にペーストします。(※自分のコードの貼り付けを忘れずに)

f:id:lonestartx:20210705142830j:plain

今回はアドセンスの広告を貼りましたが、「※ここに自分のアドセンスコードを貼り付け」という部分を他のコードに変更すれば、どんな広告でもバナーでも表示可能です。

今回のカスタムで広告の数を減らし、サイドバーに表示していた人気記事ランキングなども削除したのでブログの表示が早くなりました。しばらくこのスタイルで続けようと思います。(※更新するとは言ってない笑)

それじゃ!また!

\本気でブログを書くなら/