HTMLに自動挿入を行う - Milkのメモ帳

ブログ（HTML）の記事全体に、後から自動挿入をしたいということは結構あります。

例えばGoogleAdsenseを自動的に入れたいなど。

これを少し変更すれば、Adsense以外も自動挿入することが出来ます。

最初の章に自動挿入する
真ん中の章に自動挿入する
最後の章に自動挿入する
最後に

最初の章に自動挿入する

最初の章（h2）に自動挿入したい場合、以下の内容を記事に追加します。

「はてなブログ」の場合は、デザインの「記事下HTML」に追加すればOKです。

<!-- 最初の見出し前に配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h2');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p>
 <!--> 挿入したいものを書く-->
</p>
</div>
<!-- 最初の見出し前に配置ここまで -->

Adsenseを入れたいときは、「挿入したいものを書く」の箇所をAdsenseコードに置き換えればよいです。

私の場合は、画像リンクを入れたかったので以下のようにしました。

<!-- 最初の見出し前に配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h2');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center;" >
<a href="移動先のURL" target="_blank"><img src="画像のURL"></a>
</p>
</div>
<!-- 最初の見出し前に配置ここまで -->

「画像のURL」は、はてなフォトライフの画像のURLを使うことも可能です。

真ん中の章に自動挿入する

<!-- 真ん中の見出し前に配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h2');
$target.eq(Math.floor($target.length / 2)).before($('.insentence-adsense2'));
}, false);
// ]]></script>
<div class="insentence-adsense2">
<p>
 <!--> 挿入したいものを書く-->
</p>
</div>
<!-- 真ん中の見出し前に配置ここまで -->

ここのポイントは、「Math.floor( )」です。

章の数（h2の数）を2で割れば、真ん中の章の場所が分かるはず。

しかし、そのままでは少数点以下まで算出してしまうので、「Math.floor( )」で最大の整数値に変換しています。

例えば、1.5番目なんてないので、1番目に変換するってことです。

最後の章に自動挿入する

最後の章（h2）に入れたい場合は、以下のようにします。

<!-- 最後の見出し前に配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h2');
$target.eq($target.length-1).before($('.insentence-adsense3'));
}, false);
// ]]></script>
<div class="insentence-adsense3">
<p>
 <!--> 挿入したいものを書く-->
</p>
</div>
<!-- 最後の見出し前に配置ここまで -->