FROM LOAD - jp_header
解決済

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

mayu
Shopify Partner
39 2 6

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

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

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

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

ブログ最新記事.jpg

1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
992 373 690

成功

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

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

 

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

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

<ul>
  {% for article in blogs.myblog.articles  %}
   <li>{{ article.title | link_to: article.url }}</li>
  {% endfor %}
</ul>

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

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

 

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

4件の返信4

Jizo_Inagaki
Shopify Partner
992 373 690

成功

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

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

 

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

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

<ul>
  {% for article in blogs.myblog.articles  %}
   <li>{{ article.title | link_to: article.url }}</li>
  {% endfor %}
</ul>

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

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

 

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
mayu
Shopify Partner
39 2 6

返信をありがとうございます。

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

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

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

Jizo_Inagaki
Shopify Partner
992 373 690

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

  • blog-template.liquid内で分岐させる場合、元のコードの前後
  • blog-template.liquidを複製し改造して用いる場合、そのファイル丸ごと
Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
mayu
Shopify Partner
39 2 6

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

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

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