最後に、ホームページからのブログ表示を行いましょう。
制作ファイルの確認
本チャプターでは、4つのファイルを作成します。
- ブログテンプレート：blog.info.liquid
- セクションファイル： main-blog-slim.liquid、featured-blog-slim.liquid
- スニペットファイル：article-slimlist.liquid
今回はトップページでのブログ記事部分を作ります。 featured-blog-slim.liquidを作って、下図のように表示できるようにしましょう。
ホームページからの表示
ホームページで使われている「ブログ記事」のセクションも、前回作ったブログページとやることは、ほぼ一緒です。
今回も、新しいセクションを複製して作る > 調整する 方法で進めます。 デモで使用したコード全体は、本記事ページ“レッスン素材”よりダウンロードしてご確認ください。
1.セクションの新規作成
ホームページでブログ記事を表示しているセクションは featured-blog.liquid です。 このカスタマイズ版としてfeatured-blog-slim.liquidを作成します。
テーマデフォルトのセクション、featured-blog.liquidを開いてください。
{%- endstyle -%}の下からファイル末尾までをコピー。
新しく作ったfeatured-blog-slim.liquidに、コードを貼り付けます。
コードのコピー元featured-blog.liquidはこれ以降使いません。
`×` を押してコード編集のタブを閉じておいてください。
featured-blog-slim.liquidの、schema内にある“presets”を変更します。 * name：ブログ記事（テキストのみ） * settings > blog ：info
ここまで出来たら、一旦保存してください。
2.settingsを調整する
テーマのカスタマイズ画面を確認してみましょう。 新しく作った“ブログ記事（テキストのみ）”セクションで、必要なsettingsを考えてみましょう。
今回は、下記の4つを変更します。
- デスクトップの列数……使わないので削除する
- 記事のサムネイルを表示…使わないので削除する
- 執筆者を表示するの下に「抜粋文を表示する」のチェックを作る
- 記事の最大表示数を4から6に変更
1. デスクトップの列数
デスクトップの列数はfeatured-blog-slim.liquid、settings内の「"id": "columns_desktop"」のオブジェクトが該当します。まるっと削除しましょう。
2. 記事のサムネイルを表示
次に、記事のサムネイルを表示のチェックボックス部分。
こちらは「"id": "show_image"」のオブジェクトです。
同様に{ から },までを削除します。
3.「抜粋文を表示する」の追加
ブログページ用に作ったセクション（main-blog-slim.liquid）からコピー・アンド・ペーストしましょう。
idが"show_desc"のオブジェクトです。
4.記事の最大表示数
記事の最大表示数を、4から6に変更します。
idが"post_limit"のオブジェクトの、maxの値を書き換えればOKです。
保存ボタンで、コードを上書き保存してください。
3.renderタグを調整する
featured-blog-slim.liquidでの記事表示を、ブログ一覧と同じく作成したスニペット「article-slimlist.liquid」を使う形に変更します。
{% render 'article-card' ...という記述を見つけましょう。
検索機能を使うと、探しやすいです。
- Win:Ctrl + F
- Mac:command + F
使うスニペットをarticle-cardから、article-slimlistに変更します。 下図では見やすいように、カンマ毎に改行も加えました。
renderのパラメーターを変更します。 使用しないサムネイル関係のパラメーターを削除し、抜粋文はsettingsの選択によって表示するかを決める形です。ブログページの時とほぼ同じですね。
media_aspect_ratioとshow_imageの2行を削除show_excerptの値を、show_descに書き換える
【調整後】
保存して、表示を確認してみましょう。
カスタマイズ画面のホームページから、セクションを追加 を選択。 「ブログ記事（テキストのみ）」を挿入し、触ってみてください。
settings（サイトバーでのセクション設定）との連動は上手く行っています。 あとはHTML/CSSクラスなどを整理すれば良さそうですね。
4. 出力部分のコードを整理
ブログ記事が横並びに表示されている原因はfeatured-blog-slim.liquid。
先程変更した{% render 'article-slimlist' ...を囲うulタグ、liタグ部分です。
一旦、ulタグとliタグの、idとclassを全て削除しましょう。
そして、下記のクラスを設定します。 main-blog-slim.liquidとクラスを揃えるイメージです。
- ulタグ：list-style-noneクラス
- liタグ：col2list と articlesクラス
不要な要素も削除して、コードを整理しておきましょう。 下記２箇所を削除してください。
<ul>タグの上にある<slider-component ...の行</ul>タグの下の{%- if posts_exceed_limit -%}から</slider-component>まで
コードを上書き保存。 トップページの表示を確認してください。
イメージ通りの表示になっていたら、ホームページ用セクション完成です！ セクション見出しや表示件数は、お好きに設定してください。
更にカスタマイズするなら…
ホームページ用セクション
ホームページで使うブログ記事セクション（featured-blog-slim.liquid）。
必要最低限の設定はできましたが、触れていない部分もありますね。
記事が1件もないブログの表示
カスタマイズした{% render 'article-slimlist' ...よりも下。
この記述は、すべてを表示するボタン、記事が1つもないブログを選択した時のサンプル表示になっています。
記事が1つもない時のサンプル表示は、カードのままですね。
上図、オレンジ色の線で囲った部分を変更すると、実際のレイアウトと揃えられます。
セクションラッパー・見出し
出力コードの上部、assignタグの下あたり。 このあたりでは、セクション全体を囲うdiv、セクション見出しの設定があります。
スマホ幅だと見出し横に表示される「すべてを表示する」もこちらに書かれています。
セクション全体を囲うdivは、元の横並び表示（スマホ幅では横スライド表示）を整えるためのクラスが設定されています。必要ないクラスは取り除いても良いでしょう。
投稿日時を8桁で表示する
縦並びで投稿日時を表示すると、月・日の桁数の違いで、少しズレが生じます。
しっくり来ない……という時は、日時表示の方法を変えると揃えられます。
article-slimlist.liquidにある、article.published_atの部分を変更してみましょう。
article-slimlist.liquid
{{ article.published_at | time_tag: format: 'date' }}
article-slimlist.liquid
{{ article.published_at | time_tag: '%Y年%m月%d日' }}
time_tagやdateフィルターは、Rubyのstrftimeメソッドを使ってフォーマット出来ます。上記で書き換えたのもstrftimeメソッドの記述。
「ここに来てRubyの勉強も?!」と思った方、大丈夫です。
strftime reference and sandboxというサイトでは、よく使われるものが一覧で見られます。英語ですが、感覚的にわかるサイトなので、使わせていただきましょう。