トップページのブログ最新記事の表示を変更したい

日本語 ディスカッション 技術的なQ＆A
1

お世話になっております。
質問させてください。

テーマは「debut」を使用しています。

ブログを２種類作成し、１つはデフォルトの表示、１つは写真のように表示させたいのですが、どのファイルをどのように変更すれば良いでしょうか？

ご存知の方がいらっしゃいましたら、教えていただけますと幸いです。

ブログ最新記事.jpg
ブログ最新記事.jpg937×569 37.7 KB

2

以下のいずれかでそれぞれ分岐させ、スクリーンショットのような状態になるようにコーディングすることになるかと思います。

  • blog-template.liquid内で分岐させ、スクリーンショットのような内容を記載する
  • blog-template.liquidを複製してスクリーンショットのような内容を記載し、blog.liquid内で読み込みを分岐させる

分岐に関しては以下ヘルプのblogsの箇所が参考になります。

https://shopify.dev/docs/themes/liquid/reference/objects


  {% for article in blogs.myblog.articles  %}
   - {{ article.title | link_to: article.url }}
  {% endfor %}

加えて、私のブログで恐縮ですが以下なども参考になるかもしれません。(ブログのハンドル部分)

https://webutubutu.com/webdesign/8828#toc_H3-2

スクリーンショットの内容を具体的にどう作るのかはblog-template.liquidや以下のblog objectのヘルプなどが手掛かりになると思います。

https://shopify.dev/docs/themes/liquid/reference/objects/blog

1 Like
3

jizo様、丁寧な返信をありがとうございます。

教えていただいたブログなどを参照し、どのようにコードを書いたら良いのかは分かりました。

しかし、大変お恥ずかしいのですが、ファイル内のどの部分にコードを挿入したら良いのか分かりません。

大変恐縮ですが教えていただけますと幸いです。

4

記載箇所は作り方によってかわりますのでなんとも言えない状態ですが、ご希望のコードはセクションを丸ごと作る必要があると思われるため以下のいずれかになるかと思います。

  • blog-template.liquid内で分岐させる場合、元のコードの前後
  • blog-template.liquidを複製し改造して用いる場合、そのファイル丸ごと
1 Like
5

jizo様、初歩的な質問にも丁寧にお答え下さって感謝申し上げます。

まだ上手く実装できていませんが、頑張ってみます。

本当にありがとうございました。