Bloggerのトップページに要約とReadeMore（もっと読む）を表示するカスタマイズ方法

Google Bloggerのトップページ（デスクトップメインページ）に要約を表示させるカスタマイズ方法

Bloggerのトップページ（メインページ）に要約を表示させるカスタマイズ方法を四苦八苦した末に考案しました。
ご利用の際は当ブログにリンクしていただけると幸いです。

まずは、スクリーンショットをご覧ください。

「任意の名前」と書かれている行を見てください。

これはMainセクションの1番目のウィジェットの中の様子です。

標準では'post'となっているところです。

 <b:includable id='main' var='top'>～</b:includable>

の中にある場所です。

946行目を削除して、下記のモジュールを追加します。

要約幼児の名前を試しに'youyaku'としてみましょう。

私が作りました要約モジュールを<div post outer></div>の間、スクリーンショットでいうと946行目の1行を削除して挿入してみましょう。

緑の字で書いているところをコピペします。

<div class='post-outer'>
<!--要約モジュール-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:include data='post' name='post'/>
<b:else/>
   <b:include data='post' name='youyaku'/>
 </b:if>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
    

新たに<b:includable id='youyaku' var='post'><b:include=''><～/b:include></b:includable>という箇所を適当に追加してみます。

ここには、要約モジュールその2をセットしてみましょう。

場所はどこでも構いませんが、私はモバイルインデックスモジュールの下に置きました。

<b:includable id='youyaku' var='post'>

    <div class='post-outer'>
      <a expr:href='data:post.url'>
        <h3 class='entry-title' itemprop='name'>
          <data:post.title/>投稿タイトル
        </h3>
      </a>
      
        <div class='index-contents'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='thumbnail'>
              <div class='Image'>
  <a expr:href='data:post.url'>
                <img expr:src='data:post.thumbnailUrl'/>記事のサムネイル画像
                </a>
              </div>
            </div>
          </b:if>

          <div class='post-body'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>記事の要約
            <a expr:href='data:post.url'>...もっと続きを読む</a>
          </div>
        </div>

        <div style='clear: both;'/>
      
      <div class='comment'>
        <b:include cond='data:blog.pageType != &quot;static_page&quot;                          and data:post.allowComments                          and data:post.numComments != 0' data='post' name='comment_count_picker'/>コメント数
      </div>
    </div>
  
</b:includable>

日本語はソースをわかりやすく説明しただけですので削除してください。

記事の要約と日本語で書かれたところに...Read Moreやアイコンを表示してもよいでしょう。
iPadやWindows10などのタッチパネルでも操作できるように領域全体をリンクしてもよいでしょう。
画像を表示したくなければサムネイルの記述を削除します。

<a expr:href='data:post.url'>...もっと続きを読む</a>タグの設置はとても簡単

続きを読むタグを表示させることはとても簡単、初心者でもすぐにできます。
要約を表示させたタグのすぐあとに、<a expr:href='data:post.url'>...もっと続きを読む</a>と書けばよいだけですから。

デスクトップメインページの要約のサンプル画面

ちょっとごちゃごちゃしておりますが、要約が表示されました。

要約をクリックすると本文が表示されました。

このままでは記事の境界がありませんので、空白を入れてみました。

記事下に1行分程度の空白を挿入しました。

挿入はふつうのCSSタグでできます。

CSS/HTMLがわかる方はデザインも自由にカスタマイズすることができ、

CSSでサムネイルを大きくしたり、画像の右側に要約を表示させることも可能です。

クラス名はindex-summaryなどとしたほうがわかりやすいでしょう。

これでもうデスクトップにアドセンスが繰り返し表示されることはありません。

これさえできればもうBloggerのデザインはほとんどマスターしたようなものです。

わざわざ人が作ったテンプレートをダウンロードする必要もありません。

あとはCMSのテンプレートカスタマイズから色やレイアウトの指定をするだけですから簡単です。

内容がお役に立ちましたらあなたさまのウェブサイトから役に立ったと当ブログへリンクを貼るかシェアしていただけるとありがたいです。