確認用のブログができたら、テーマのカスタマイズを行っていきましょう。 本レッスンでは、ブログ記事の一覧表示を作成します。
制作ファイルの確認
本チャプターでは、4つのファイルを作成します。
- ブログテンプレート：blog.info.liquid
- セクションファイル： main-blog-slim.liquid、featured-blog-slim.liquid
- スニペットファイル：article-slimlist.liquid
今回はテンプレート（ブログ一覧表示）に使う部分を作成・編集します。 上図で★マークの付いているファイルです。
1.ブログ一覧で使用するセクションの作成
1-1.新規セクションの作成
セクション作成
日付とタイトルを横並びで表示させる、ブログ記事一覧のセクションを作ります。
新しいセクションを追加する からmain-blog-slim.liquidを作成します。
これから作る一覧部分も、表示したい情報はデフォルトとほぼ一緒。
逐一プロパティ等を調べるのは大変です。
既存のブログ一覧セクション（main-blog.liquid）を活用させてもらいましょう。
main-blog.liquidを開きます。
main-blog.liquidのコードを全選択して、コピー。
作成したmain-blog-slim.liquidにペーストします。
初期状態で書かれているコードは削除してください。
全選択してから、貼り付けをすると上書きで貼り付けられます。
コードを貼り付けたら、schemaのnameを変更します。 分かりやすい名前を設定してください。
ここまでできたら、保存ボタンで上書き保存します。
コードのコピー元`main-blog.liquid`はこれ以降使いません。
紛らわしいので、 `×` を押してコード編集のタブを閉じておいてください。
オリジナルテンプレートから読み込む
infoテンプレートで使うセクションを、main-blog-slim.liquidにします。
blog.info.jsonで、以下を変更してください。
- typeの値をmain-blog-slimに変更
- settingsで使わない3つのプロパティを削除
- layout
- show_image
- image_height
変更できたら上書き保存してください。 この先、blog.info.jsonは使用しないので、ファイルは閉じてOKです。
カスタマイズ画面で反映を確認しましょう。
1-2.必要箇所を整理する
必要な設定を考える
新しく作ったセクションmain-blog-slim.liquidは、現段階ではデフォルトの「ブログ記事」の複製。作りたいデザインでは不要な設定が、結構あります。
不要な箇所は削除した方が、デザイン調整もシンプルなコーディングで済みます。 どこが要らないか、あったら良いかを考えてみましょう。
今回は、レイアウトとサムネイル表示なし／抜粋と執筆者は表示も可能、という形で作っていきます。
schemaを整理する
考えた設定箇所を残しつつ、main-blog-slim.liquidを整理していきます。
settingsはカスタマイズ画面と同じ順番になっています。 「日付を表示する」のチェックボックスよりも上、赤線部分を全て削除します。
{ } や似たような文言が多くて分かりにくい！ なんて時は、行数の横ので折りたたむと分かりやすいです。
次に、新しく「抜粋を表示する」のチェックボックスを作ります。
ここは、show_authorのオブジェクトをコピー・アンド・ペーストすると楽です。
コピペした分は、idとlabelを打ち替えましょう。
コードを上書き保存して、カスタマイズ画面の表示をチェック。 サイドバーの設定項目が、作りたい形になってたらOKです。
main-blog-slim.liquid（schemaのみ）
{% schema %}
{
"name": "ブログ記事（テキストのみ）",
"tag": "section",
"class": "section",
"settings": [
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.main-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.main-blog.settings.show_author.label"
},
{
"type": "checkbox",
"id": "show_desc",
"default": false,
"label": "抜粋文を表示する"
},
{
"type": "paragraph",
"content": "t:sections.main-blog.settings.paragraph.content"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}
1-3.出力のLiquidを確認
次に、実際の表示、ページにブログ記事の情報を書き出している部分です。
ループの{%- for article in blog.articles -%}が目印になるでしょう。
探してみると、以下のように書かれています。
赤線で囲った部分の指示は、スニペット（snippets）ディレクトリにある「article-card（article-card.liquid）を使って、この部分を表示する」というイメージです。
今回は直書きせず、テーマDawnと同じように、我々もスニペットを使ってみましょう。
※render、paginateタグの役割は基礎編をご確認ください。
-
render
Liquid基礎③テーマタグと変数タグ - テーマタグ/render -
paginate
Liquid基礎②繰り返し・条件分岐のタグ - 繰り返しタグ/paginateについて
2.スニペットファイルを作成する
ブログ記事セクションで使われているのは、article-card.liquid。 ですが、このファイルを変更するとデフォルトのブログテンプレート類にも影響を与えてしまいます。自作セクション以外に影響しないよう、新しくスニペットファイルを作成して、カスタマイズしていきましょう。
2-1.新規スニペットファイルの作成
スニペットディレクトリの中で、一番上にある「新しいスニペットを追加する」をクリック。分かりやすいファイル名を付けて、完了ボタンで作成します。
見本ではファイル名をarticle-slimlist.liquidとしました。
デフォルトで使用されているarticle-card.liquidを開きます。
以下の2箇所を article-slimlist.liquid にコピー&ペーストしてください。
- {% endcomment %} のすぐ下にあるif文 （1行のみ）
- ２つめの
<div class="card__content">からファイル末尾まで
下部にある2つの</div>が余分なので、削除します。
こちらも、行数の横ので折りたたむと分かりやすいです。
ここまで出来たら、インデントを整えて保存してください。 article-card.liquidは閉じて良いです。
article-slimlist.liquid
{%- if article and article != empty -%}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading{% if show_excerpt %} h2{% endif %}">
<a href="{{ article.url }}" class="full-unstyled-link">
{{ article.title | truncate: 50 | escape }}
</a>
</h3>
<div class="article-card__info caption-with-letter-spacing h5">
{%- if show_date -%}
<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
{%- endif -%}
{%- if show_author -%}
<span>{{ article.author }}</span>
{%- endif -%}
</div>
{%- if show_excerpt -%}
{%- if article.excerpt.size > 0 or article.content.size > 0 -%}
<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>
{%- endif -%}
<div class="article-card__footer">
{%- if article.comments_count > 0 and blog.comments_enabled? -%}
<span>{{ 'blogs.article.comments' | t: count: article.comments_count }}</span>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- if show_badge -%}
<div class="card__badge {{ settings.badge_position }}">
<span class="badge color-background-1">{{ 'blogs.article.blog' | t }}</span>
</div>
{%- endif -%}
</div>
{%- endif -%}
2-2.render部分を変更する
スニペットファイル article-slimlist.liquidがざっくりと出来ました。
セクションファイルの方を変更して、表示させてみましょう。
main-blog-slim.liquidで、renderの後のファイル名を変更します。
ファイルを上書き保存して、表示を確認しましょう。 記事のタイトルや投稿日が表示されていればOKです。
2-3.コードを整理する
article-slimlist.liquidには、まだ使わない部分があります。
そのままでも問題なく使えますが、見た目を調整する際に分かりにくいですよね。
わかりやすさ優先で、少し整理します。
article-slimlist.liquidでは、後ろの方にある2箇所を削除します。 下図で青くハイライトした部分です。
<div class="article-card__footer">から、その閉じタグ</div>まで{%- if show_badge -%}から、その閉じタグ{%- endif -%}まで
article-slimlist.liquid
main-blog-slim.liquidの方は、renderのパラメーターを変更します。 抜粋の表示・非表示が、カスタマイズ画面からのチェックで変わるようにします。
media_height、media_aspect_ratio、show_imageの3行を削除show_excerptの値を変更
main-blog-slim.liquid
ついでに、上3行のCSSもコメントアウトか削除しておきましょう。
コードを上書き保存したら、テーマのカスタマイズ画面で確認してください。 チェックボックスと、抜粋の表示が連動したら成功です。
2-4.HTMLとCSS部分を作る
ここまでの調整で、表示に必要な“パーツ”になるコードは揃いました。 あとは、デザインに合わせて、HTMLとCSSを書いていくだけです。
デフォルトのブログに影響しないよう、blog-articles__xxxやcard__xxxクラスは使わず、自作クラスに切り替えます。
divタグなどのタグも、デザインに合わせて足し引き・変更していきましょう。
main-blog-slim.liquid（出力部分）
{%- paginate blog.articles by 6 -%}
<div class="main-blog page-width section-{{ section.id }}-padding">
<h1 class="title--primary">{{ blog.title | escape }}</h1>
<ul class="list-style-none">
{%- for article in blog.articles -%}
<li class="textlist-2col articles">
{%- render 'article-slimlist',
article: article,
show_date: section.settings.show_date,
show_author: section.settings.show_author,
show_excerpt: section.settings.show_desc
-%}
</li>
{%- endfor -%}
</ul>
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
</div>
{%- endpaginate -%}
スニペットの方は {%- if show_xxx %} ~ {%- endif -%}までが1つの固まり、と考えて扱うと書きやすいです。
article-slimlist.liquid
{%- if article and article != empty -%}
{%- if show_date -%}
<p class="col2list_heading">
{{ article.published_at | time_tag: format: 'date' }}
</p>
{%- endif -%}
<div class="col2list_text">
<h3 class="card__heading{% if show_excerpt %} h2{% endif %}">
<a href="{{ article.url }}" class="full-unstyled-link">
{{ article.title | truncate: 50 | escape }}
</a>
</h3>
{%- if show_excerpt -%}
{%- if article.excerpt.size > 0 or article.content.size > 0 -%}
<p class="col2list_text_excerpt">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>
{%- endif -%}
{%- endif -%}
{%- if show_author -%}
<p class="right">{{ article.author }}</p>
{%- endif -%}
</div>
{%- endif -%}
※CSSクラスは商品ページカスタマイズのレッスンで、メタフィールドの表示に作成したものを一部活用しています。 今回追加した部分は、コメントアウト「Blog - slim」以下です。
edoya.css
.col2list{
padding: 1.25rem 0;
border-top: 1px #bbb solid;
}
.col2list:last-child{
border-bottom: 1px #bbb solid;
}
/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) {
.col2list {
display: flex;
}
.col2list_heading{
flex: 0 0 25%;
}
.col2list_text{
flex: 1;
}
}
/* =============================================
/ Blog - slim
/============================================ */
.list-style-none{
list-style: none;
padding-left: initial;
}
.col2list_text_excerpt{
font-size: 1.4rem;
}
/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) {
.col2list.articles {
padding: 3rem 1.5rem;
align-items: baseline;
}
.articles .col2list_heading{
flex-basis: 10em;
}
}
3.ブログページを確認
ブログページ（infoテンプレート）の表示を確認してみましょう。
デフォルトの日付+記事タイトル表示。
抜粋や執筆者を表示した場合、スマホ幅での表示。
一通り、崩れがないか見え方を確認してください。
ページネーションはセクションファイル（main-blog-slim.liquid）の 「by」の後にある数字を変更すると、少ない記事数でも確認できます。
これでブログ一覧ページの作成は完了です。 調整したい箇所があれば、CSSなどを更新してください。