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

**URL:** <https://community.shopify.com/t/topic/36203>\
**Category:** 技術的なQ＆A\
**Created:** [February 16, 2021, 8:32am UTC](https://community.shopify.com/t/topic/36203 "2021-02-16T08:32:28Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

テーマ「debut」で、トップページ上のブログ最新記事をブログごとに異なる見せ方にしたいという相談。添付画像のようなレイアウトを、既定表示とは別に1つのブログだけ適用したいという内容です。

・提案された方法は2通りです。`blog-template.liquid` 内でブログごとに条件分岐する方法、または `blog-template.liquid` を複製して別テンプレート化し、`blog.liquid` 側で読み分ける方法です。
・分岐には Shopify の Liquid にある `blogs` / `blog` オブジェクトを使う案が示され、記事一覧を取得するコード例や公式ドキュメント、参考記事が案内されました。
・その後、質問者は「どのファイルのどこに挿入するか」が分からないと追加質問。回答では、実装内容が大きいため部分差し込みではなく、元の `blog-template.liquid` の前後で分岐するか、テンプレート全体を複製して改造する必要があると補足されています。
・最終的な完成報告はなく、方針は示されたものの実装は継続中です。

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [February 16, 2021, 8:32am UTC](https://community.shopify.com/t/topic/36203/1 "2021-02-16T08:32:28Z")

</div>

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

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

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

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

 ![ブログ最新記事.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/a/dad046e53f8388785ba7c7babb0c72af17ee0caf.jpeg)

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [February 16, 2021, 6:05pm UTC](https://community.shopify.com/t/topic/36203/2 "2021-02-16T18:05:22Z")

</div>

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

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

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

[https://shopify.dev/docs/themes/liquid/reference/objects](https://shopify.dev/docs/themes/liquid/reference/objects)

```markup

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

```

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

[https://webutubutu.com/webdesign/8828#toc\_H3-2](https://webutubutu.com/webdesign/8828#toc_H3-2)

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

[https://shopify.dev/docs/themes/liquid/reference/objects/blog](https://shopify.dev/docs/themes/liquid/reference/objects/blog)

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [February 17, 2021, 2:12am UTC](https://community.shopify.com/t/topic/36203/3 "2021-02-17T02:12:44Z")

</div>

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [February 17, 2021, 8:37pm UTC](https://community.shopify.com/t/topic/36203/4 "2021-02-17T20:37:51Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [February 17, 2021, 11:40pm UTC](https://community.shopify.com/t/topic/36203/5 "2021-02-17T23:40:00Z")

</div>

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

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

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