【Blogger】Google Adsenseを<!--more-->タグの後に設置する方法

ページ

 

【Blogger】Google Adsenseを<!--more-->タグの後に設置する方法

2014年4月4日金曜日
【Blogger】Google Adsenseを<!--more-->タグの後に設置する方法

BloggerTIPSとして久しぶりに書きます。Googleが提供しているブログサービスBloggerでは、『続きの読む』の設定に<!--more-->が使われます。「ここより先は、ここを押したら読めますよ」というボタンの設定用タグです。

この<!--more-->タグで記事を開いてから、記事本文にGoogle Adsense(広告)を埋め込む方法を紹介します。必要な知識としては、Bloggerのテンプレートをいじれる知識が必要です。

※この記事はGoogleが提供するブログサービス、Bloggerを利用していない人にとっては無益です。

目次


目次です。

Ads after more

Bloggerの設定を弄る前知識として、どこでタグをいじれるかというレベルから紹介します。

0.テンプレートから設定

HTMLの設定はコチラ

テンプレートのHTMLをいじるには、Bloggerの設定画面から行います。

[Bloggerの設定画面]>[テンプレート]>HTMLの設定

この記事に興味をもつような人にとっては、絶対に知っているであろう場所です。HTML編集をできるようにしておきましょう。

1.<head>の中に

まず、下準備として<head>を編集画面から探します。

1-a.JQueryが必要

<!--more-->の後に書き込むためにJQueryが必要です。JQueryをすでにHTMLの中に入れている人はこの段階を飛ばして下さい。

2014/04/04現在最新版(下記記述)のJQueryを<head>の直下に入れます。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
最新はコチラで確認して下さい→■:https://developers.google.com/speed/libraries/devguide#jquery

1-b.とりあえず書き込みます

以下のコードを<head>直下に書き込みます。そのままコピーして書き込めばよいです。
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#MBT-google-ad&#39;).html());
$(&#39;#MBT-google-ad&#39;).html(&#39;&#39;);
});
</script>

2.<data:post.body/>の直下に

次に、Ctrl+Fを押して検索窓を出し、<data:post.body/>を探します。その直下に以下のコードを記述します。
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="display:none;">
<div id='MBT-google-ad'>
<br/>
<center>
ここにAdsenseを記述する </center> 

<br/>
</div>
</div>  </b:if>
上記コードの太文字部分が<!--more-->の後に表示される部分です。この場所にGoogle Adsenseを貼り付けます。<div style="display:none;">としているのは、コレをしないと記事下部に同じものが表示されるからです。(それでも良いという人は<div style="display:none;">~</div>を削除しちゃってもいいかなと。)

ちなみに、Google Adsenseから得られるコードなままだとBlogger編集に怒られちゃいます。「”(ダブルコーテーション)」を「’(シングルコーテーション)」に変えなければいけません。

また、<data:post.body/>は2つ存在して(多分2つ…)、どちらかがPC表示、どちらかがモバイル表示です。ちゃんとコードをたどっていけばわかりますが、わからなければ最初のほうがPC表示と思っちゃって下ださい。

お疲れ様でした!これでmoreの後に記述されるはずです。

kissaten的話


なんとなくmoreを押したあとに広告入ったらいいなと思ったので記事を書きました。この用途を使う人が頻繁にいるかどうかわかりませんが、あの場所を使いたかったので使いました。

詳しくは参考サイト様(英語)で書かれているので御覧ください。

参考サイト

■:Add AdSense right After Tag | My Blogger Tricks


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事