2016年5月10日火曜日

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


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

目的

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

方法

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

記事表示部分の書き換え

「<b:if cond='data:blog.pageType == &quot;item&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>


2016.06.16 固定ページが表示されないバグがあったので、下記記述のdata.blog.pageTypeの条件遷移に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:else/>
  <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

0 件のコメント :

コメントを投稿