Blogger Labo：【Blogger】記事を要約表示にして、記事中にアドセンスを入れる方法

今回紹介するのは、以前紹介した「記事をサムネイル・要約表示にして、Readmoreを自動化する方法（Moreタグ共存版）」のコードを改変して、記事中にアドセンスを入れられるようにしたものである。

「トーマスイッチさんの記事」と「Vaster2のコード」を参考に以前のコードを改変したものであり、「moreタグの下にアドセンスが表示される」という仕様になっている。

なお、コードの詳しい解説については冒頭のリンクにある以前紹介した記事を参照して欲しい。


概要


トップページの記事表示を変更


コード適応後の変化

このコードを適応するとトップページの表示が画像のように変化する。

詳しくは「記事をサムネイル・要約表示にして、Readmoreを自動化する方法（Moreタグ共存版）」を参照。

記事中・記事下にアドセンスを表示する


PCでのアドセンス表示
PC表示
モバイルでのアドセンス表示
モバイル表示

このコードを適応すると、記事中・記事下にアドセンスを表示できるようになる。

記事中の表示は「moreタグ」の下に配置されるようになり、無い場合は記事下にまとめて表示される。

また、アドセンスに関わらず、書き込む内容によって表示をコントロールできる。

使用したテンプレート


シンプルテンプレート

今回紹介するコードを作った時には、Bloggerのシンプルテンプレートを使った（画像のデザイン）。

正直、全てのテンプレートに試したわけではないので、正常に適応できるのかについては確約できない。

そのため、使ってみたい方はバックアップを取った上で試して欲しい。

PC表示の適応手順


このコードを適応するには、以下の7ステップの手順を行えばできる。

１．テンプレートのバックアップを取る


テンプレートのバックアップをとる

まずはテンプレートのバックアップを取っておいて欲しい。

方法は「テーマ」 → 「バックアップ/復元」 → 「テーマをダウンロード」の順に選択すればいい

２．「<head>」を検索


<head>を検索

「HTMLの編集」の画面でコード内をクリックし、「Ctrl＋F」を押すとコード内の検索フォームが現れる。

この検索フォームに「<head>」と入力して、コードの挿入箇所を探す。

３．「<head>」の下に以下のスクリプトを貼り付ける


「<head>」の下にアドセンス表示用のスクリプトコードを貼り付ける（参照：トーマスイッチ）。

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

４．「HTMLの編集」から「<data:post.body/>」を検索


<data:post.body/>を検索する

「HTMLの編集」の検索フォームに「<data:post.body/>」と入力して、コードの挿入箇所を探す。

なお、シンプルテンプレートの場合、これを検索すると2箇所 引っかかると思う。

今回変更するのは下の方の <data:post.body/>になる。

ちなみに上の<data:post.body/>は、モバイル版の記事の設定に当たる。

古いテンプレートの場合

古いテンプレートの場合、<data:post.body/>が3箇所 引っかかることがある。

この場合は一番下の <data:post.body/>を変更することになる。

ちなみに、一番上はモバイル、二番目は固定ページの設定になっている（と思われる）。

５．「<data:post.body/>」を以下のコードの置き換える


<data:post.body/>を以下のコードに置き換える

以下のコードをコピーして、手順２で示した「<data:post.body/>」と置き換える。

<!-- モバイルアドセンス設定はじめ -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/><!--記事ページ部分-->
<div id='MBT-google-ad'>
<!-- 記事中アドセンス（ここにコードを入力） -->
</div>
<div>
<!-- 記事下アドセンス（ここにコードを入力） -->
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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 + &quot;#more&quot;' 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 + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- モバイルアドセンス設定おわり -->

６．以下のCSSを追加する


テーマデザイナーから以下のCSSを追加する

「テンプレートデザイナー」から、以下のCSSを追加する（もしくは「HTMLの編集」）。

CSSの設定については説明を付けておいたので、それを参考にカスタマイズして欲しい。

/*　トップページの要約表示用CSS
----------------------------------------*/

 /*　画像の余白を消す　*/

 .post-body img{
   padding:0;
}

 /*　サムネイルの設定　*/

 .top-thumb img {
   float: left;　/* 左寄せ */
   margin-right: 20px;　/* サムネイルと要約の間隔 */
   width: 180px;　/* サムネイルの横幅 */
   height: 120px;　/* サムネイルの高さ */
   object-fit: cover;　/* サムネイルをリサイズ */
}

 /*　要約部分の設定　*/

 .post-snippet{
   padding: 0 15px 0 0;　/* 要約の上・右・下・左の余白 */
   height:85px;　/* 要約の高さ */
}

 /*　追加した「続きを読む」の設定　*/

 .more-link{
   font-size:13px;　/* 文字サイズ */
   float: right;　/* 右寄せ */
   margin-right: 20px;　/* 右の余白 */
}

 /*　既存の「続きを読む」を消す　*/

 .jump-link{
   display: none;　/* 表示させない */
}

７．アドセンスのコードを貼り付ける


上記コードの「<!-- 記事中アドセンス（ここにコードを入力） -->」と「<!-- 記事中アドセンス（ここにコードを入力） -->」の部分にアドセンスのコードを貼り付ける。

書き込む内容については、下記の例を参考にして欲しい。

書き込み例

<div id='MBT-google-ad'>
<!-- 記事中アドセンス -->
<div style='color:#666; text-align:center; margin:5px 0;'>スポンサーリンク</div>
アドセンスのコード
</div>
<div>
<!-- 記事下アドセンス -->
<div style='color:#666; text-align:center; margin:5px 0;'>スポンサーリンク</div>
アドセンスのコード
</div>

スマホ表示の適応手順


このコードを適応するには、以下の4ステップの手順を行えばできる（headのコードは入力すること）。

１．「テーマ」からモバイル設定を「カスタム」にする


モバイルの設定
下の歯車ボタンをクリック
カスタム設定にする
「カスタム」設定にする

「テーマ」からモバイルの下にある「歯車ボタン」をクリック。

「モバイルのテーマの選択」から「カスタム」を選択して保存する。

２．「HTMLの編集」から「<data:post.body/>」を検索


<data:post.body/>を検索する

「HTMLの編集」の検索フォームに「<data:post.body/>」と入力して、コードの挿入箇所を探す。

シンプルテンプレートの場合、上の方の <data:post.body/>になる。

３．「<data:post.body/>」を以下のコードの置き換える


以下のコードをコピーして、手順２で示した「<data:post.body/>」と置き換える。

<!-- トップページの要約表示はじめ -->
<data:post.body/><!--モバイル記事ページ部分-->
<div id='MBT-google-ad'>
<!-- 記事中アドセンス（ここにコードを入力） -->
</div>
<div>
<!-- 記事下アドセンス（ここにコードを入力） -->
</div>
<!-- トップページの要約表示おわり -->

４．アドセンスのコードを貼り付ける


上記コードの「<!-- 記事中アドセンス（ここにコードを入力） -->」と「<!-- 記事中アドセンス（ここにコードを入力） -->」の部分にアドセンスのコードを貼り付ける。

書き込む内容は、PCの設定と同じでいいと思う。

コードの仕様


moreタグは必須


今回紹介したコードは、記事内の「moreタグ（<!--more-->）」の下にアドセンスを表示させるものになる。

これを使えば記事中にアドセンスを表示できるようになるが、その反面 全ての記事に自動的に適応されることになる。

よって、このコードを上手く使うには、"全ての記事内にmoreタグを設定する"必要が出てくる。

なお、"moreタグ設定していない場合は、設定部分が記事下にまとめて表示される"ことになる。

設定内容によっては"アドセンスの規約違反"になる可能性があるため、コード適応後の設定には注意が必要である。

また、コードの適応後は"記事内にmoreタグを入れる"という作業は必須項目となる。

多くの記事数を抱える古いブログに適応する場合


上記のコードを多くの記事数を抱えるブログに適応する場合は注意が必要である。

なぜなら、上記のとおりに"全ての記事にmoreタグを設定する必要性"が出てくるためである。

よって、古いブログに適応するのはオススメできない。

古いブログに適応する場合は"予め全ての記事にmoreタグを入れてから適応する"という作業を行ってほしい。