この記事ではブログ記事表示の、行数・列数をカスタマイズ画面から選べるようにカスタマイズし行数を任意の数、列数を1~4に調節可能にする方法を解説します。
無料テーマの一つSimpleを例に解説しますが、他の無料テーマでも同様にカスタマイズできると思います。
カスタマイズ画面のレンジスライダーを変更
sections/featured-blog.liquidを編集しています。ファイルの100行目あたりを見ると{% schema %}と{% endshema %}で囲まれた部分があります。ここはカスタマイズ画面のGUIの設定をしている箇所で、ここを編集することでGUIを新たに設置したり、GUIの設定を変えることが出来ます。
列数設定用スライダーを設置する
ここでは列数を設定するスライダーを作っていきます。私の場合は198行目～228行目を編集していきます。値の変更は次の通りです。
| 変更前 | 変更後 | 説明 | |
| id | post_limit | col_limit | 変数名みたいなもの |
| ja | 投稿 | 列数 | レンジスライダーの名前 |
変更前のsections/featured-blog.liquid
{
"type": "range",
"id": "post_limit",
"label": {
"cs": "Příspěvky",
"da": "Opslag",
"de": "Posts",
"en": "Posts",
"es": "Publicaciones",
"fi": "Julkaisut",
"fr": "Articles",
"it": "Articoli",
"ja": "投稿",
(略)
},
"min": 1,
"max": 3,
"step": 1,
"default": 3
},
変更後のsections/featured-blog.liquid
{
"type": "range",
"id": "col_limit",
"label": {
"cs": "Příspěvky",
"da": "Opslag",
"de": "Posts",
"en": "Posts",
"es": "publicaciones",
"fi": "Julkaisut",
"fr": "Articles",
"it": "Articoli",
"ja": "列数",
(略)
},
"min": 1,
"max": 4,
"step": 1,
"default": 3
},最後にsections/featured-blog.liquid内のpost_limitをすべてcol_limitに置き換えて完了です。おそらく合計で4箇所くらいあると思います。ctrl+fでpost_limitを検索して置換していくのが確実です。
ファイル編集後のカスタマイズ画面は次のようになります。スライダーの名前が列数になり、選択範囲が1~4になっています。現時点では列数を4にしても列幅が1/3で固定になっていますが、次の章で列数に合わせて列幅も変えていきます。
行数設定用スライダーを設置する
行数スライダーは列数スライダーとほぼ同じです。先ほど編集した箇所を丸々コピーしてそのすぐ下に貼り付けます。値は次のようにします。
| 変更前 | 変更後 | 説明 | |
| id | col_limit | row_limit | 変数名のようなもの |
| ja | 列数 | 行数 | レンジスライダーの名前 |
| max | 4 | 10 | 行数の最大値 |
編集後の列数・行数のschemaを両方載せておきます。
{
"type": "range",
"id": "col_limit",
"label": {
"cs": "Příspěvky",
"da": "Opslag",
"de": "Posts",
"en": "Posts",
"es": "Publicaciones",
"fi": "Julkaisut",
"fr": "Articles",
"it": "Articoli",
"ja": "列数",
"ko": "게시물",
"nb": "Innlegg",
"nl": "Berichten",
"pl": "Posty",
"pt-BR": "Posts",
"pt-PT": "Publicações",
"sv": "Inlägg",
"th": "โพสต์",
"tr": "Gönderiler",
"vi": "Bài viết",
"zh-CN": "文章",
"zh-TW": "貼文"
},
"min": 1,
"max": 4,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "row_limit",
"label": {
"cs": "Příspěvky",
"da": "Opslag",
"de": "Posts",
"en": "Posts",
"es": "Publicaciones",
"fi": "Julkaisut",
"fr": "Articles",
"it": "Articoli",
"ja": "行数",
"ko": "게시물",
"nb": "Innlegg",
"nl": "Berichten",
"pl": "Posty",
"pt-BR": "Posts",
"pt-PT": "Publicações",
"sv": "Inlägg",
"th": "โพสต์",
"tr": "Gönderiler",
"vi": "Bài viết",
"zh-CN": "文章",
"zh-TW": "貼文"
},
"min": 1,
"max": 10,
"step": 1,
"default": 3
},行数設定用のレンジスライダーが表示することが出来ました。
レンジスライダーの値を記事表示に反映させる
前章でカスタマイズしたレンジスライダーの値をブログ表示件数に反映させます。
列数4に対応
列数を4にした時に列幅が1/4になるように設定します。caseタグの開始タグのすぐ下に4列用の設定を追加します。
{% case section.settings.col_limit %}
{% when 4 %}
{%- assign width = 'medium-up--one-quarter small--one-half' -%}
{% endcomment %}この2行を付け足す↑{% endcomment %}
(略)
{% endcase %}表示件数を反映
ブログの表示件数を行数×列数で計算しpost_limit変数に入れておきます。この処理を15行目あたりの{% case section.settings.col_limit %}の上あたりに書きます。
{% assign post_limit = section.settings.row_limit | times: section.settings.col_limit %}
{% comment %}これを付け足す↑{% endcomment %}
{% case section.settings.col_limit %}次にfor文でブログ記事を取り出す件数をpost_limitにします。35行目あたりを編集していきます。
{% for article in blog.articles limit: section.settings.col_limit %}
{% comment %}変更前↑{% endcomment %}
{% comment %}変更後↓{% endcomment %}
{% for article in blog.articles limit: post_limit %}これで完成です。列数を4にした時には列幅が1/4になり、行数の変更も反映されています。