bloggerのindex（一覧ページ）で記事の一部だけを見せる方法

やり方が分かるまでに苦労したので、メモを残します。

目的

pcのindex（記事一覧画面）で記事の一部だけを見せるようにして、一覧画面の見通しを良くします。

方法

ブログテンプレートに対して下記の修正を行います。

記事表示部分の書き換え

bloggerが持つ変数のblog.pageTypeがitemでもstatic_pageでもない場合に一覧画面であると判別します

その判別はこのように記述できます。

<b:if cond='data:blog.pageType == &quot;item&quot; || data:blog.pageType == &quot;static_page&quot;'>

その条件を記事の表示部分に適用します。

書き換える部分

<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
  &lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-posts&quot;&gt;
</b:if>

<div class='post-outer'>
  <b:include data='post' name='post'/>
  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>

書き換えた後

<b:if cond='data:blog.pageType == &quot;item&quot; || data:blog.pageType == &quot;static_page&quot;'>
  <!-- article page -->
  <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <b:if cond='data:post.isDateStart'>
    &lt;div class=&quot;date-outer&quot;&gt;
  </b:if>
  <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
  </b:if>
  <b:if cond='data:post.isDateStart'>
    &lt;div class=&quot;date-posts&quot;&gt;
  </b:if>
  <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
  </div>

<b:else/>
  <!-- index page -->

  <div class='post-outer post-outer-pc-index'>
    <a expr:href='data:post.url'>
      <h3 class='index-title entry-title' itemprop='name'>
        <data:post.title/>
      </h3>
      <div class='index-date'>
        <span>
          <data:post.date/>
        </span>
      </div>
      <div class='index-contents'>
        <b:if cond='data:post.thumbnailUrl'>
          <div class='index-thumbnail'>
            <div class='Image'>
              <img expr:src='data:post.thumbnailUrl'/>
            </div>
          </div>
        </b:if>
        <div class='post-body'>
          <b:if cond='data:post.snippet'>
            <data:post.snippet/>
          </b:if>
        </div>
      </div>
      <div style='clear: both;'/>
    </a>
  </div>
</b:if>

cssの追加・修正

/* Posts
----------------------------------------------- */

上記コメントの下辺りに下記のstyleを記述してください。

.post-outer-pc-index > a {
  display: block;
  background: #f9f9fb;
  margin-bottom: 1em;
  padding: 1em;
}
.post-outer-pc-index > a:hover {
  background: #fbfbfe;
  text-decoration: none;
}
.post-outer-pc-index .index-date {
  color: black;
  margin-bottom: 10px;
}
.post-outer-pc-index .index-title {
margin: 0 0 1em 0;
}
.post-outer-pc-index .date-header {
margin-top: 0px;
}
.post-outer-pc-index .date-header span {
background: transparent;
}
.post-outer-pc-index .index-contents {
display: table;
}
.post-outer-pc-index .index-thumbnail {
display: table-cell;
vertical-align: middle;
padding: 0 1em 0 0;
}
.post-outer-pc-index .post-body {
display: table-cell;
vertical-align: middle;
color: black;
}

あと、下記のmarginをキャンセルすると、余白が消えて見栄えが良くなります。

.main-inner .column-center-inner .section {
  margin: 0;
  // margin: 0 $(main.section.margin);
}

以上です。
何かの参考になれば嬉しいです。

参考

How to Create Magazine Style with Post Summaries and Thumbnails on Blogger | Helplogger

変更履歴

2016.06.16
固定ページが表示されないバグがあったので、data.blog.pageTypeがstatic_pageのときも、ページの内容を全て表示するようにしました。
2020.01.25
記事を読み返した時に理解しにくく感じたので、コードの前の説明とコード内のコメントを追加しました。