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

業務外

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

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

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

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

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

ブログソースコード

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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行目と差し替えます。

ブログソースコード

1 2 3 4 5 6 7 8 9 10 11 12 13

<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行目と差し替えます。

ブログソースコード

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

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

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

ブログソースコード

1 2 3 4 5 6 7 8 9 10 11

</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