moreタグを使ったアドセンス広告設置方法【ワードプレス/blogger】

moreタグをつかったアドセンス広告設置

ワードプレス、bloggerなどのブログサービスでアドセンス広告を記事中に配置したい、そんな風に思う人も多いですよね。

そこでよく使われるのが、アドセンス広告をmoreタグの位置に置きなおすというテクニック。

あらかじめ記事中の広告を表示したい場所にmoreタグを挿入しておくだけなのでよく使われる方法となっているようです。

ただ、参考にするやり方によってはmoreタグの場所にアドセンス広告を置きなおすだけなのにjqueryを読み込んでいたりと、最近SEOでしきりに言われているページ読み込み速度を犠牲にしているやり方が多い気がします。

ここではjqueryを使わない、ページ読み込み速度を低下させないアドセンス広告をmoreタグの場所に置きなおす方法を紹介します。よりページ読み込み速度を上げたいのなら参考にしてくださいね。

1. moreタグをつかったアドセンス広告設置
2. ステップ①：アドセンス広告コードをペタり
3. ステップ②：下記コードをコピペ
4. まとめ

ステップ①：アドセンス広告コードをペタり

まずはワードプレスでもbloggerでも普通にアドセンス広告を追加します。ここで配置したアドセンス広告をステップ②で移動する流れです。

ワードプレスなら<?php the_content(); ?>の前後、bloggerなら<data:post.body/>の前後に配置します。

上のコードをお使いのテンプレートから探してみてください。検索するとすぐに見つかるはずです。ちなみに前に入れるとタイトルと記事本文の間、後ろに入れると記事本文の下にアドセンス広告が表示されます。

こうしておくことでmoreタグがない記事でもとりあえず記事中アドセンス広告になるわけですね。

場所を決めたら下記のようにdivタグを作り、my-insert-adのidを追加します（違う名前でも大丈夫ですが、変えたのならステップ②の該当部分をここで指定した名前と同じ名前に変更してください。）。こんな感じ。あとはその間にアドセンス広告をコピペでペタり。第一ステップ終了です。

<div id="my-insert-ad">
～ここにアドセンス広告を張り付ける～
</div>
<?php the_content(); ?> もしくは <data:post.body/>

ステップ②：下記コードをコピペ

このまま表示すると先ほど決めた位置にそのままアドセンス広告が表示されるはずです。まだmoreタグの位置に移動してないので、このアドセンス広告をmoreタグの場所に置きなおします。

下記コードを使っているテンプレートの一番下の方、</body>のすぐ上にコピペ。ワードプレスとbloggerでやり方が違うので注意。

<script>
var more = document.querySelectorAll('[id^=more]')[0];
var ad = document.getElementById('my-insert-ad');
var parent = more.parentNode;
parent.insertBefore(ad, more);
</script>

<script>
var parent = document.getElementsByClassName(&#39;post-body&#39;)[0];
var ad = document.getElementById(&#39;my-insert-ad&#39;);
var more = document.getElementsByName(&#39;more&#39;)[0];
parent.insertBefore(ad, more);
</script>

まとめ

ページ読み込み速度を保ったままできるmoreタグを使った記事中アドセンス広告の設置方法を紹介しました。

jqueryを読み込んでいないのでちまたで用いられている方法に比べ少しは読み込み速度が速くなります。参考にしてみてください。