Bloggerは投稿記事の一覧の表示数は変更できるものの、検索結果やラベルの表示件数は対応しておらず20件になっています。
これを変更するにはHTMLの編集が必要になります。
以前、Contempo・Soho・Emporio・Notableの新しいテーマ（ウィジットバージョン2）に適応する方法については記事にしました。
QooQの場合はウィジットバージョン1になるため、方法が異なります。
特にラベルの表示件数については変更箇所が多いです。
ただ変更しておかないとページネーションが上手く導入できないため、その前提として必要になります。
本記事ではQooQの検索結果とラベルの表示件数を変更する方法を解説します。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
検索結果の表示件数変更方法
HTML編集画面で<form class='gsc-search-box' expr:action='data:blog.searchUrl'>を検索します。
その数行下の</table>と</form>の間に以下のコードを挿入します。
<input name='by-date' type='hidden' value='true'/>
コードを挿入した前後は以下のようになります。
これで、表示件数は10件になります。
10の部分を変更すれば、表示件数を変更することも可能です。
また、このコードを挿入したことにより公開日順に並ぶようになります。
ラベルの表示件数変更方法
コードの変更箇所は【ラベルガジェット】【記事一覧のラベル】【パンくずリストのリンク】【記事本文上部のラベル】【記事本文下部のラベル】の５つになります。
基本、コードに+ "?max-results=10"を追加する形です。
10の部分を変更すれば、表示件数を変更することも可能です。
ラベルガジェット
レイアウトでガジェット追加できるラベルガジェットから表示される記事の件数変更です。
HTML編集で<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>を検索します。
ラベルガジェット1つにつき2か所変更する必要があります。
ラベルガジェットを2つ使っている場合は4か所変更が必要になります。
検索したコードを以下のように変更します。
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
↓↓↓
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"'><data:label.name/></a>
これで、ラベルガジェットからの記事表示件数は10件になります。
ラベルガジェットに関しては、ガジェットを消すと上記コードも消えてしまいます。
ガジェットを消して新たに追加した際は、再度上記のコード変更が必要となるので気を付けて下さい。
記事一覧のラベル
記事一覧のラベルから表示される記事の件数変更です。
HTML編集で<span class='list-item-category-item'><a expr:href='data:label.url'>を検索します。
検索したコードを以下のように変更します。
<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
↓↓↓
<span class='list-item-category-item'><a expr:href='data:label.url + "?max-results=10"'><data:label.name/></a></span>
これで、記事一覧のラベルからの記事表示件数は10件になります。
パンくずリストのリンク
パンくずリストのリンクから表示される記事の件数変更です。
HTML編集で<span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>を検索します。
３か所ありますが、真ん中（２つめ）の直ぐ下のコードを書き換えます。
<a expr:href='data:label.url' itemprop='item'>
↓↓↓
<a expr:href='data:label.url + "?max-results=10"' itemprop='item'>
これで、パンくずリストのリンクからの記事表示件数は10件になります。
記事本文上部のラベル
記事本文上部のラベルから表示される記事の件数変更です。
HTML編集で<a class='single-header-category-item' expr:href='data:label.url'>を検索します。
検索したコードを以下のように変更します。
<a class='single-header-category-item' expr:href='data:label.url'><data:label.name/></a>
↓↓↓
<a class='single-header-category-item' expr:href='data:label.url + "?max-results=10"'><data:label.name/></a>
これで、記事本文上部のラベルからの記事表示件数は10件になります。
記事本文下部のラベル
記事本文下部のラベルから表示される記事の件数変更です。
（当ブログでは非表示にしています。）
HTML編集で <a class='single-footer-category-item' expr:href='data:label.url'>を検索します。
検索したコードを以下のように変更します。
<a class='single-footer-category-item' expr:href='data:label.url'><data:label.name/><data:postLabelsLabel/></a>
↓↓↓
<a class='single-footer-category-item' expr:href='data:label.url + "?max-results=10"'><data:label.name/><data:postLabelsLabel/></a>
これで、記事本文下部のラベルからの記事表示件数は10件になります。
表示件数を揃えよう！
次回QooQのページネーション（ページャー）追加方法を解説しますが、表示件数がバラバラだと表示が上手くいかなくなります。
- 投稿記事の一覧（レイアウトor設定から変更可能）
- 検索結果
- ラベルの表示
ページネーション導入のため、この３つの値を揃えておきましょう！
ただQooQは変更箇所が多く、ページネーション導入が大変なことが分かりました。
以下のブログ様のお陰でなんとか表示件数が揃えられました。お礼申し上げます。
参考ブログ様
【 QooQ カスタマイズ 】 ラベル別記事一覧の表示記事数を変更
