2019/03/25

Blogger「続き」の下に広告を設置する

〔Posted:2019/03/25〕
ブログにアドセンスの広告を設置している。生きてるうちに、せめて一度くらいはぐうぐるさんからの報酬を受け取りたいもん。で、自動広告というのを試してみたけど、表示がイヤラシイので、自分で表示位置を決めて設置することにした。
以下は『続き(<!--more-->)』の下に広告を表示する方法。

1. テーマのバックアップを取る

テーマを編集するとき、これは決して忘れてはいけない約束事です!

2. テーマのHTMLを編集する

(1)HTML内の<head>の下にこれを追加する(↓)

<!--記事中アドセンス用スクリプトはじめ-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#MBT-google-ad').insertBefore($('a[name="more"]'));
});
</script>

<!--記事中アドセンス用スクリプトおわり-->

(2)HTML内で<data:post.body/>を検索する。複数あるが、ジーッとよくよく見れば、どれが『続き』の後の部分であるがわかる。私のテーマの場合は4つあり、その中の3番目でした。
その<data:post.body/>の部分を、これとマルッと入れ替える。(↓)

<!-- モバイルアドセンス設定はじめ -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><!--記事ページ部分-->
<div id='MBT-google-ad'>


<div style='color:#199eb8; text-align:center; margin-top:39px; margin-bottom:10px;'>- - -《広告》- - -</div>
<div style="margin-bottom:10px;">

<!-- ここにアドセンスコードを入力 —>
</div>

<div>

<!-- ここにアドセンスコードを入力 -->
</div>

</div>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<!--固定ページ部分-->
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.firstImageUrl'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

<!-- モバイルアドセンス設定おわり -->

緑色の文字は、上部に『広告』と表示し、上下の広告の間に少し空間を入れるためのもの。

以上。これで私は続きの下に広告が上下に2つ表示されるようになった。めでたし♪
あ、そうそう。記事内に<!--more-->を設置しなかった場合、ここで指定した広告は記事下に表示される。(らしい)


 *参考にしたサイトはこちら↓(ありがとうございました!)
Blogger Labo
【Blogger】トップページを要約表示にして、記事内にアドセンスを入れる方法



Today's cat / ladious666

以前は、1ページに表示可能な広告数は3つとかだったと思うんだけど・・・、そういうルールはもうなくなっちゃたのね。
他のリンクと紛らわしくならないよう、広告の上下はスペースを広くとっておく方がいいみたい。ぐうぐるさんはやかましいから気を使うよね。。



- - -《 広 告 》- - -


- - 《 Reaction Buttons 》 - -

  にほんブログ村 ライフスタイルブログ 一人暮らしへ
Categories: , ,

- - - - -《 広 告 》- - - - -


0 コメント: