インデックスページのモバイル化

業務外

井戸掘りブログのホームページのデザインはイケてない。延々と記事が続き、メリハリがありません。これでは、ブログへの来訪者が逃げてしまいます。

このページはインデックスページで、最新の記事から指定件数分の記事を紹介する仕組みです。モバイルバージョンだと、画像のサムネイルと記事先頭の文書の抽出（スニペット／snippet）で一覧化されていて見やすくなっています。しかし、ウェブバージョンはだらだらと記事が続くだけで利用者に優しくない。

インデックスページは他に、「ラベル」、「ブロクアーカイブ」にもありますが、ウェブバージョンは同じデザインです。デザインをモバイルバージョンに変更しましょう。

修正箇所は、ブログの投稿ガジェットで記事を表示しているループ処理の一部です。

投稿ガジェットのソースコードです。

      <b:loop values='data:posts' var='post'>
        <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>
        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>

15行目がウェブバージョンの記事を表示している部分です。ここを「ホームページ」、「ラベル」、「ブロクアーカイブ」はモバイルバージョンを表示するように修正します。
記事と記事の間には区切りとして水平線を追加しています。

修正後のソースです。これを15行目と差し替えます。

<b:if cond='data:blog.searchLabel'>
  <b:include data='post' name='mobile-index-post'/><hr/>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <b:include data='post' name='mobile-index-post'/><hr/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include data='post' name='mobile-index-post'/><hr/>
    <b:else/>
        <b:include data='post' name='post'/>
     </b:if>
  </b:if>
</b:if>

このままだと、投稿日が二重に表示されるので、個別の記事の表示（data:blog.pageType == ’item’）以外は日付の表示を抑止します。

修正後のソースです。これを8行目と差し替えます。

        <b:if cond='data:post.dateHeader and data:blog.pageType == &quot;item&quot;'>

最後にレイアウトの調整です。記事がサムネイルを回り込むように画像にfloat属性を追加します。（）

追加するCSSのソースです。

</style>

.mobile-index-thumbnail .Image {
  float:left;
  margin: 0 5px 5px 0;
}

.mobile-index-arrow {
  display:none;
}
</style>

感想と構想

Blogger：テンプレート編集(9)インデックスページをモバイルサイトのものに統一する
https://p--q.blogspot.com/2016/07/blogger9.html