Blogger：テンプレート編集(9)インデックスページをモバイルサイトのものに統一する

Blogger：ラベル設定(3)同じラベルの投稿タイトルのみを表示でタイトルのみの表示にしてみましたが、そっけないので採用しませんでした。モバイルサイトのインデックスページは投稿の先頭画像のサムネイルと記事の先頭の一部を表示してくれますのでそれをウェブバージョンでも使うようにします。

前の関連記事:Blogger：テンプレート編集(8)投稿時刻表示のリンクを消す

現在のインデックスページの問題点

現在使用しているインデックスページはこのように先頭画像を自分で設定してそのあとに前書きを書いてそのあとに追記の区切りを挿入していました。

先頭画像を配置しているのは記事を読まなくても記事の記憶が残りやすいようです。

先頭画像の写真の入手先と管理の問題

Morguefile.com free stock photos

先頭画像についてはこのサイトから出典表示不要のフリーの写真をもらっていたのですが、2016年になってからサイトがリニューアルされてライセンス表示が長々としたものになり、今まで通りのライセンスでよいのかどうかわからなくなってしまいました。

また写真は重複しないようにサムネイルを一つのフォルダに入れてファイル名で重複チェックしてきましたが、そのフォルダサイズが大きくなって管理が難しくなってきました。

「追記の区切り」<!--more-->が扱いずらい

Blogger：バックアップ(9)追記の区切りがインポートされないやBlogger:iOSのBloggerアプリで保存すると追記の区切りが変になるの問題がありました。

この問題のためにテストブログに投稿を移動させるのが容易ではありませんでしたし、iOSのBloggerアプリで投稿内容を修正することもままなりませんでした。

(2017.2.8追記。moreタグを削るとインデックスページに一部でも表示している投稿についてはすべての容量が合計容量に加算されてしまい、1MBを超える部分は表示されなくなります。投稿の途中にmoreタグがある場合はmoreタグ以降は容量に加算されないようです。Blogger：テンプレート編集(10)インデックスページの表示投稿数制限参照。)


ページあたりに表示される投稿数が少ない

最初は見栄えがよいと思ったのですが、自分で過去の記事を検索する機会が増えてくるととても不便であることがわかりました。

モバイルサイトのインデックスページに表示される記事の先頭部分が意味を持たない


モバイルサイトのインデックスページには先頭画像のサムネイルとその横に記事の先頭部分が表示されますが、そこに「前の関連記事」が表示されてしまって、投稿内容を知る手掛かりが失われてしまっています。

以上の問題点を解決するためにインデックスページを変更することにしました。

ウェブバージョンでもモバイルサイトのインデックスページを使うことにする

ウェブバージョンでもモバイルサイトのインデックスページを使うことによって、先頭画像は他からわざわざ貼り付けたものではなく、投稿記事内の先頭画像が表示されるようになります。

また追記の区切りを挿入しなくても自動的に記事の先頭部分だけ表示してくれます。

1投稿あたりの高さが小さくなるためインデックスページの1ページ当たりに表示される投稿数が増加します。

記事の先頭部分が意味を持たない問題は、「前の関連記事」を投稿の前書きの後にもってくることで解決します。

この問題についてはすでにある投稿については対応をあきらめます。

ウェブバージョンでもモバイルサイトのインデックスページを使うためにテンプレートを編集する

Blogger：ラベル設定(3)同じラベルの投稿タイトルのみを表示で変更したのと同じ部分をテンプレートから探し出します。

管理画面→テンプレート→HTMLの編集

表示されたHTMLのどこかでクリックしてからCtrl+Fを押すと右上に検索ボックスが現れます。

そこに<b:include data='post' name='post'/>をいれてEnterキーを押します。

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

Blogger：ラベル設定(3)同じラベルの投稿タイトルのみを表示のときと前後のxmlが少し異なっているのはBloggerのテンプレートのxmlが自動的に変更されたのでしょうか？


この部分はBlog1ウィジェットの中のmainインクルードの中にあります。

<!--　インデックスページをモバイルサイトのものにする　-->
<b:if cond='data:blog.searchLabel'>
          <b:include data='post' name='mobile-index-post'/>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <b:include data='post' name='mobile-index-post'/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include data='post' name='mobile-index-post'/>
    <b:else/>
        <b:include data='post' name='post'/>
     </b:if>
  </b:if>
</b:if>
<!--　インデックスページをモバイルサイトのものにする　ここまで　-->

検索した<b:include data='post' name='post'/>の行をこのコードに置き換えます。

これでラベルインデックスページ、アーカイブインデックスページ、インデックスページの3つがモバイルインデックスページになります。


画像のない投稿にはサムネイルはついてきません。

これでウェブバージョンでもモバイルサイトと同じように表示されるようになりましたが、ちょっとレイアウトがいまいちですのでさらに修正します。

サムネイルの横に記事が回り込むようにする

     サムネイルの横が空白になって間延びしているので、サムネイルの横に記事が回り込むようにします。

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

このCSSを追加するだけで解決しました。

これをテンプレートの]]></b:skin>の前に追加しました。

矢印を消去する

よくみるとサムネイルの上に>がついていることがわかります。


これはモバイルサイトのインデックスページで各投稿の右側に表示されている>です。

.mobile-index-arrow {display:none;}

このCSSを追加することでこの>が表示されなくしました。


モバイルサイトの>も消えると思いましたが、それは消えませんでした。


モバイルサイトだけにはhtml .mobile-index-arrowのCSSが適用されていました。

インデックスページ1ページあたりの表示投稿数を変更する

1投稿あたりの面積が減ったので1ページ当たりの表示投稿数を5個から10個に増やすことにします。

各インデックスページについて変更しないといけません。

まずレイアウト画面からメインにあるブログの投稿ガジェットの編集をクリックします。


メインページのオプションのメインページの投稿数を10に変更しました。

これで変更されるのは通常のインデックスページのみです。

ラベルインデックスページの表示投稿数を変更するにはHTMLテンプレートを編集しないといけません。

Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法でやったものです。

テンプレートをdata:label.urlで検索します。

Blog1ウィジェットの中のpostインクルードの中にあります。

      <div class='post-footer-line post-footer-line-2'>
      <span class='post-labels'>
        <b:if cond='data:top.showPostLabels and data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url+ &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
      </span>
      </div>

max-results=10にします。

このブログの場合はテンプレートをいろいろいじっているので「'data:label.url+ &quot;?max-results=」で検索して全部で5か所変更が必要でした。

アーカイブインデックスページと検索結果のインデックスページについては投稿数を制限する方法がないのであきらめます。

あとはBlogger:ページ番号付ページナビ(4)投稿数が150個を超えても使えるように修正するで導入したページ番号付きページナビのperPageを5から10に変更します。

インデックスページの各投稿のタイトル下にラベルも表示する

どこかで書いたように思うのですがどこに書いたか探せませんでした。

    <div id='label_hyoji'>
<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url+ &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
</b:if> 
</div>

このタグを挿入するだけです。

タイトルの下に挿入しようとしたのですが、<a expr:href='data:post.url'></a>の間に挟まると<b:if cond='data:post.labels'>にもアンカーが付いてしまうので、</a>の次に挿入しました。


これでうまくいったと思ったのですが、モバイルサイトをみるとラベルごとに改行されてしまっています。


うーん、これは解決できなかったのでモバイルサイトだけラベル表示をやめることにしました。

<!-- なぜかモバイルサイトのインデックスページだけラベルが改行されてしまうのでモバイルサイトを除外。 -->
<b:if cond='data:mobile == &quot;false&quot;'>
    <div id='label_hyoji'>
<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url+ &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>
</b:if> 
</div>
</b:if>

関連記事を表示させるガジェットを削除する

これはインデックスページの変更とは関係ないのですが、関連記事の表示は自分では全く使っていないのでもう削除することにしました。

Blogger:関連記事一覧を自動的に表示させる方法

これで導入したものです。

導入したHTML/JavaScriptガジェットを探します。

これはレイアウト画面でひとつづ探していくしかありません。

Related Posts Widget for Google Blogger v2.0

コメントにこれがあるものです。

このガジェットを削除して削除できました。

参考にしたサイト

Morguefile.com free stock photos
フリー?の写真サイト。

次の関連記事:Blogger：テンプレート編集(10)インデックスページの表示投稿数制限