ブログ記事

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. ブログ投稿ブロックに関するCompany XYZのドキュメント
3. カラー設定に関するCompany XYZのドキュメント
4. カード設定に関するCompany XYZのドキュメント
5. ヘッダー設定に関するCompany XYZのドキュメント
6. レイアウト幅設定に関するCompany XYZのドキュメント
7. セクション余白設定に関するCompany XYZのドキュメント
8. セクション背景設定に関するCompany XYZのドキュメント
9. 区切り線設定に関するCompany XYZのドキュメント
10. スライドショーコントロール設定に関するCompany XYZのドキュメント
11. 表示設定に関するCompany XYZのドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

ブログ記事を使用して、選択したブログから記事を自動的に表示するか、手動の記事ブロックで厳選リストを作成します。最近の投稿、トピックのまとめ、より視覚的なコントロールが必要な編集コンテンツに適しています。テーマエディターでの設定の詳細については、Shopifyドキュメントのセクションとブロックに関する説明を参照してください。

動的コンテンツ

このセクションでは、ブログから記事を自動で取得するか、手動で選択した投稿を表示できます。自動コンテンツは、セクションを常に最新の状態に保ちたい場合に最適です。一方、ブロックは固定された編集上の構成にしたい場合に適しています。

1. セクションに自動入力するブログを選択します。
2. タグを追加して、フィードを特定のトピックやキャンペーンに絞り込みます。
3. 一度に表示するコンテンツ量に応じて、アイテム数を設定します。
4. タイトルまたは公開日に基づいて並べ替え、昇順または降順を選択して、セクションで伝えたい内容に合わせます。

タグでのフィルタリングは、ブログが選択されている場合のみ機能します。手動で選んだ記事セットにしたい場合は、動的ソースに頼るのではなく、Blog postブロックを使用してください。

レイアウト設定

レイアウト設定では、1行に表示されるカード数と、各デバイスサイズでセクションをグリッドまたはスライドショーのどちらで表示するかを制御します。デスクトップでは広く一覧し、モバイルではより集中しやすい表示にしたい場合に柔軟に対応できます。

1. 記事カードがコンパクトで画像中心の場合は、列数を多くします。
2. タイトルや抜粋により多くの表示スペースが必要な場合は、列数を少なくします。
3. すばやく一覧するには、グリッドレイアウトを選択します。
4. より少ない大きなカードで、強調を高めたい場合は、スライドショーレイアウトを選択します。

ヒント

タブレットの列数が 0 の場合、タブレットはデスクトップの列数を継承します。管理するレイアウトの選択肢を減らしたい場合に便利です。

スライドショー設定

これらの設定は、デスクトップ、タブレット、モバイルのいずれかでスライドショーレイアウトが有効なときに適用されます。カードの動き方、自動再生の有無、投稿間の移動方法を制御します。設定の詳細は、スライドショーのコントロールを参照してください。

1. 標準的なカルーセルのような操作感にしたいか、より絞り込まれた切り替えにしたいかに応じて、アニメーションスタイルを選択します。
2. 動きが気にならず滑らかに感じられるように、アニメーション速度と自動再生の遅延を組み合わせます。
3. 連続して閲覧できるようにループを有効にします。
4. ナビゲーション、ページネーション、スライドプレビューは、使いやすさが向上する場合のみ有効にします。

フェードアニメーションでは、1枚のスライドのレイアウトが強制されます。また、ページネーションと次のスライドのプレビューも無効になります。そのため、1つの記事を順番に強調したい場合に最適です。

カードカラー設定

これらの設定は、このセクションのデフォルトのカードカラーを上書きします。記事カードにより強いコントラスト、よりブランドらしい見た目、またはサイトの他の部分とは異なる表示が必要な場合に便利です。

1. カードスタイルがバナーに設定されている場合のみ、バナーのオーバーレイカラーを使用します。
2. 注目画像がテキストの背後で見えるように、オーバーレイの不透明度は慎重に調整します。
3. 背景、枠線、見出し、本文テキストの色をまとめて変更し、カードの可読性と視覚的なバランスを保ちます。

注意

バナーカードでオーバーレイの不透明度を低くしすぎると、見出しが記事画像の上で読みにくくなる場合があります。

カラー設定

これらの設定は、アイコン、見出しテキスト、補足テキストを含むセクションのイントロエリアで使用される色を制御します。セクションをカスタム背景上に配置する場合や、近くのコンテンツに対してより強いコントラストが必要な場合に使用します。設定の詳細は、カラー設定を参照してください。

1. セクション見出しに一体感が出るように、これらの色をセットで調整します。
2. 背景画像、グラデーション、または動画を追加した後は、コントラストを再確認します。
3. 記事カードを視覚的な焦点として残したい場合は、上書きを最小限に抑えます。

対応ブロックタイプ

1. Blog post

ブログ投稿

このブロックを使用して、特定の記事カードを手動で表示します。自動更新されるフィードではなく、厳選した記事を表示したい場合に適しています。設定の詳細は、ブログ投稿を参照してください。

1. 特集記事、編集部おすすめ、キャンペーンコンテンツには手動ブロックを使用します。
2. ブロックレベルのカード設定で、個別の記事に対するセクションのカード表示を上書きできます。
3. 任意のエディタータイトルは、作業中に厳選リストを整理しやすくします。

標準セクション設定

ヘッダー設定

ヘッダー設定を使用して、記事一覧の上にキャプション、見出し、補足テキスト、アイコン、任意のボタンを追加します。コンテンツの導入、トピックのラベル付け、ブログ全体へのリンクに役立ちます。ページ全体の構造に合う見出しレベルを選び、ボタンは1つの明確な操作に絞ってください。

カード設定

カード設定を使用して、セクション全体で記事カードの見た目を制御します。カードスタイル、画像比率、テキスト量、キャプション内容、配置、ボタンの表示を、各投稿を個別に編集せずに調整できます。これらの設定は、視覚的なインパクトと読みやすさのバランスを調整する主な方法です。

余白設定

余白設定を使用して、セクションの上下の余白を制御します。このコンテンツに余裕が必要な場合は間隔を広げ、周囲のレイアウトにすでに十分な空きがある場合は狭めます。モバイルでの余白も確認し、セクションが縦に長くなりすぎないようにしてください。

セクション背景設定

セクション背景設定を使用して、セクションの背後に色、グラデーション、画像、または動画を追加します。これにより、記事コレクションをより編集的に、または近くのセクションと視覚的に区別して見せられます。背景の処理はコントラストや見かけの余白に影響するため、変更後は見出しエリアとカードの両方を確認してください。

区切り線設定

区切り線設定を使用して、セクションの上または下に線を追加します。区切り線は、複数のコンテンツブロックがある長いページでこの領域を区切るのに役立ちます。区切り線の色が透明の場合は、代わりにテーマの枠線色が使用されます。

表示設定

表示設定を使用して、デバイスの種類ごとにセクションを表示または非表示にします。モバイルではよりシンプルな記事表示にしたい場合や、画面サイズごとに異なるレイアウト戦略を使いたい場合に便利です。重要なコンテンツが特定のデバイスで欠けないよう、慎重に使用してください。

幅設定

幅設定を使用して、コンテンツの最大幅とセクションの外側の幅を制御します。幅を狭くするとタイトルや抜粋の読みやすさが向上し、幅を広くすると、より多くの列や没入感のあるカード行を配置できます。エディタープレビューは誤解を招くことがあるため、幅の変更はライブページのプレビューで確認するのが最適です。

使用上の注意

1. ソース方法は1つに絞ります。 選択したブログを使って自動更新するコンテンツにするか、更新頻度よりキュレーションを重視する場合は Blog post ブロックを使用します。
2. ブロックによってセクションが変わることを想定します。 記事ブロックを追加すると、シンプルなフィードを置き換えたり、並べて表示したりできます。そのため、自動コンテンツから手動のキュレーションに切り替えた後は結果を確認してください。
3. レイアウトは読み方に合わせます。 グリッドは複数の投稿を一覧するのに、スライドショーは少ない記事を強調するのに向いていることが多いです。
4. 両方のデバイスサイズを確認します。 デスクトップとモバイルでは、余白、配置、ナビゲーションの挙動が異なる場合があるため、各ビューポートでセクションが問題なく読めるか確認してください。
5. 上書きは意図的に使います。 セクション全体のカードやカラーの上書きは、複数の表示方法を混在させるよりも、明確な編集スタイルを支える場合に最も効果的です。
6. メディアの扱いを慎重に確認します。 異なるメディアや背景を使用する場合は、切り抜きと読みやすさが記事カードを十分に支えているか確認してください。