成功
ブログ記事
任意のリンク商品と柔軟な読み取りレイアウトコントロールを備えたブログ記事を表示します。
このセクションでは、記事全体を表示し、ページ上での読みやすさを細かく調整できます。より広いテーマエディタのワークフローについては、Shopifyドキュメントのセクションとブロックに関するShopifyドキュメントをご覧ください。また、記事内の商品リンクを検出し、サイドバーに一致する商品を表示し、それらのリンクに商品カードのホバー動作を追加する任意の商品スニファー設定機能も含まれています。
メイン設定で、リンクされた商品を記事の横に表示するかどうかを決めます。サイドバーは、商品検出が有効で、かつ記事に一致する商品リンクが含まれている場合にのみ表示されます。
サイドバーの見出しは、一般的なタイトルよりも文脈に合ったラベルとして使うのが最適です。記事が購入ガイド、チュートリアル、ギフト編集のような特定の形式に従っている場合は、サイドバーがコンテンツとつながって見えるように見出しを調整してください。
このセクション固有のカラーコントロールでは、記事エリアのテキスト色を上書きできます。カスタム背景を追加する場合や、ページの他の部分とは異なるコントラストが必要な場合に特に便利です。
このセクションは長文の閲覧向けに作られているため、まずは読みやすさを優先してテキストカラーを選んでください。アクセントには控えめなブランドカラーを使えますが、本文は記事全体を通して読みやすい状態を保つ必要があります。
色を変更したら、特に背景画像、グラデーション、オーバーレイも使っている場合は、テキストのコントラストを確認してください。
標準セクション設定
Section titled “標準セクション設定”余白設定では、記事コンテンツの上下のスペースを調整できます。より落ち着いた読み心地にしたいときや、記事が他の目立つセクションの間にある場合にレイアウトを詰めたいときに使用します。
デスクトップとモバイルの余白は個別に調整できます。デスクトップで余白が広すぎて小さな画面では高く見える場合に便利です。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定では、記事の背後に色、グラデーション、画像、または動画を追加できます。これらのオプションは編集ページに雰囲気を加えられますが、快適な読みやすさを妨げないようにしてください。
オーバーレイコントロールを使うと、画像や動画の背景でも視認性を保ちやすくなります。モバイル専用の背景メディアは、デスクトップ用の画像がうまく切り抜かれない場合や、小さな画面では情報量が多すぎる場合に特に便利です。
区切り線設定
Section titled “区切り線設定”区切り線設定では、セクションの上部または下部に線を追加できます。記事を周囲のコンテンツからより明確に区切りたい場合に使用してください。
カスタムの区切り線色を使いたくない場合は、透明のままにするとセクションはテーマの境界線色を使用します。これにより、区切りは控えめで一貫した印象になります。
幅設定では、記事コンテンツの最大幅とセクションラッパーの幅の両方を調整できます。ほとんどの記事では、読みやすさへの影響が最も大きいのはコンテンツ幅です。
長文テキストでは、通常、広すぎるレイアウトよりも、読み取りやすい行長を保てる狭めのコンテンツ幅のほうが適しています。一方、画像の多い投稿や編集記事風の投稿では、広めのレイアウトのほうがうまく機能することがあります。セクション幅が特に重要になるのは、背景も使っていて、それをコンテンツ領域の外まで広げたい場合です。
使用上の注意
Section titled “使用上の注意”- 商品リンクを意識して執筆します。 サイドバーと記事内の商品動作は記事内の商品リンクに依存するため、トピックを本当に支える位置に追加してください。
- ブロックによってレイアウトが変わることを想定します。 ブロックを追加すると、セクションが記事そのものによってどの程度構成されるかと、ブロック内容によってどの程度構成されるかが変わる場合があるため、ページを作成した後にバランスを再確認してください。
- 読みやすい幅を優先します。 テキスト中心の投稿では、記事を広げすぎるのではなく、行の長さを快適に保てるコンテンツ幅を使ってください。
- スタイルは記事を引き立てるために使います。 カスタムのテキスト色、背景、区切り線は、内容と競合せずに内容を囲むようにしてください。
- モバイル表示を確認します。 小さな画面では余白、背景の切り抜き、テキストのコントラストを確認し、記事を読みやすい状態に保ってください。
- エディタ表示と公開表示を比較します。 プレビュー時の動作は公開ページと異なる場合があるため、最終ページでレイアウト、配置、メディアの選択を確認してから利用してください。