読者です 読者をやめる 読者になる 読者になる

正衛門

垂れ流し 流して流して 詰まったら ひとまず放置 他力本願(字余り)

記事の文中に自動でGoogle Adsense広告を挿入するようにした

あっちのブログ、これまでずーっとひと記事ひと記事にAdsenseの広告コードを手作業で挿入していたんですが、いよいよそれをやめて自動でするようにしました。

参考になったのは↑こちらのブログ記事で、こちらで紹介されているやり方にアレンジを加えました。アレンジしたコードとか理由なんかは以下のとおり。

アレンジコード

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > .section > h3');
$target.eq(0).before($('.readmore-adsense'));
}, false);
// ]]></script>
<div class="readmore-adsense">
<div class="sponsorlink">スポンサーリンク</div>
※ここに自分のAdsenseコードを貼る※
</div>

各classの指定

.readmore-adsense {
margin: 20px 0;
}
.sponsorlink {
text-align: center;
color: #999999;
font-size: 80%;
}

アレンジした理由

  1. はてな記法モードを使用しており、.entry-contentとh3の間にsectionクラスのdiv要素が入るためtargetをアレンジする必要があった(※見たままモードの場合は紹介されているとおりのtargetで大丈夫だと思う)
  2. Adsense広告上の文言「スポンサーリンク」とmarginについてはhead要素内に上記を追加することで、PC、スマートフォンまとめて設定できるようにした。めんどいのでそうした

おわりに

今後は所定の箇所変えれば全記事のAdsense広告をあーしたりこーしたりできるようになったので非常に楽になった。肩の荷が下りた。もっと早くからやっておけば良かった。ついでにお試しということでAMP配信もスタートしてみた。