Home
Menu
Side
Twitter
Top
ホーム / QooQ | ブログ | ブログカスタマイズ |

【 QooQ カスタマイズ 】 ラベル別記事一覧の表示記事数を変更

2020/03/12

QooQ ブログ ブログカスタマイズ

こんにちは！ HARU（ @HARU ）です。

今回は Blogger のテンプレートである QooQ の、ラベル別記事一覧で表示される記事数の変更をしてみました。

Blogger ブログでは標準の機能であるラベル（ 一般にはカテゴリ？ ）をクリックすると、ラベル別の記事一覧ページを表示することができます。

テンプレート QooQ ではラベルをクリックしたとき、１ページ辺り最大２０記事を表示するようになっていました。

今回はそれを、１ページ辺り１０記事表示に変更するカスタイマイズをします。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

参考

カスタマイズ後イメージ

変更前 変更後

ラベル別記事一覧の表示数変更前イメージ

ラベル別記事一覧の表示数変更後イメージ

ラベルをクリックした際に表示される記事数を２０ → １０記事に変更しました。

HTML 変更

表示数の設定は、ページリンク先に対して + "?max-results=〇" というコードを追記することで対応できます。

〇 にはラベル別表示したときに１ページ辺りに表示したい記事数を入れます。

テンプレート QooQ の場合、ラベル別の記事一覧に飛べるリンクが５か所あるので、表示数を指定する場合、すべてに追記する必要があります。

※ すべてのラベルリンクに設定しない場合、この限りではありません。

ガジェットで追加できるラベル

ガジェットで追加できるラベルイメージ

Blogger の「 レイアウト 」から設定できるラベルボタンからの表示できる記事数を変更します。

（１）以下のコードを検索します。

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

変更箇所は２か所あります。注意しましょう。

トップページ記事内ラベル

QooQ トップページ記事内ラベルイメージ

QooQ のトップページ記事リンク内にあるラベルボタン（ カテゴリボタン ）から表示できる記事数を変更します。

（１）以下のコードを検索します。

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

パンくずリストのリンク

パンくずリストイメージ

ラベルではありませんが、パンくずリストからリンクされるラベル別の表示できる記事数も変更します。

（１）以下のコードを検索します。

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

記事本文内上部のラベル

QooQ 記事本文内上部のラベルイメージ

記事本文内の上部に設置してあるラベルボタンから、表示できる記事数を変更します。

（１）以下のコードを検索します。

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

記事本文内下部のラベル

QooQ 記事本文内下部のラベルイメージ

記事本文内の下部に設置してあるラベルボタン（ カテゴリボタン ）から、表示できる記事数を変更します。

（１）以下のコードを検索します。

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

まとめ

以上でテンプレート QooQ のラベル別に飛ぶリンクのカスタマイズは終了です。

抜けは無いかと思いますが、他にラベル別に飛ぶリンクがあったら、コメント頂けると幸いです。

QooQ