【Blogger】スマホテンプレートの編集 ページングの表示件数を変更する

• 公開日：2016年01月30日

記事概要

bloggerのカスタム方法です。

環境

• Blogger

はじめに

これまであまりしなかったBloggerのカスタマイズを開始しました。
Bloggerのカスタマイズの情報は少ないので、積極的に掲載していこうと思います。

デフォルト動作

デフォルトテンプレートでは、Bloggerのスマホでページングすると、次のページのリスト表示が1件になってしまいます。

（上）デフォルトのリスト画面からのモバイルページングだと、表示件数が1件になってしまう。

これではあまりにユーザーが使い難いです。なので、もっと表示できるように変更します。

テンプレート変更

ページング後のデータ表示件数を変えるには、テンプレートを編集する必要があります。
HTMLテンプレートを開いて、「newerPageUrl」もしくは「olderPageUrl」で検索をしてください。

template

// 新しい投稿リンク
expr:href='data:newerPageUrl'

// 前の投稿リンク
expr:href='data:olderPageUrl' 

上記の変数が、実際のURLに変換されている部分になります。
HTMLに変換後のURLを確認してみます。

HTML

<div class="mobile-link-button" id="blog-pager-newer-link">
<a class="blog-pager-newer-link" href="http://edywrite.blogspot.jp/search?updated-max=2016-01-25T06:17:00%2B09:00&max-results=1&reverse-paginate=true&m=1" id="Blog1_blog-pager-newer-link" title="新しい投稿">‹</a>
</div>
<div class="mobile-link-button" id="blog-pager-older-link">
<a class="blog-pager-older-link" href="http://edywrite.blogspot.jp/search?updated-max=2016-01-23T11:04:00%2B09:00&max-results=1&reverse-paginate=true&start=2&by-date=false&m=1" id="Blog1_blog-pager-older-link" title="前の投稿">›</a>
</div>

URLに変換されていますね。このURLの中の

url

max-results=1

の部分が表示件数になります。
なので以下のように変更します。

template

// 新しい投稿リンク 5件のデータを取得
expr:href='data:newerPageUrl + "&max-results=5"'

// 前の投稿リンク 5件のデータを取得
expr:href='data:olderPageUrl + "&max-results=5"' 

このようにすることでパラメーターにmax-results=5が追加されるので、取得件数が変更できます。
修正を終えたら、テンプレートを保存してブログで動作を確認してみましょう。

動作確認

上記の変更がきちんと行われていることを確認します。

（上）デフォルトのリスト画面からのモバイルページングが、max-resultsで指定した件数になる。

うまくいきました。

まとめ

Bloggerの情報は少ないので、プログラミング能力があると便利です。
自由度が高く、SEO対策をしなくてもgoogle検索に強いので、エンジニアには最高の無料Blogです。しかし、普通の人には少しハードルが高いかもしれません。
ただ、どの無料ブログよりもWEBアプリに近いカスタムができるので頑張ってみてください。慣れです。

以上です。

動画

この記事がお役にたちましたらシェアをお願いします

Tweet