成功
関連記事
投稿の末尾に関連する記事を自動表示し、レイアウトに合わせてスタイルを調整します。
同じブログからより多くの記事を投稿の末尾に表示して、読者の閲覧を継続しやすくします。このセクションは、現在の記事のブログから最近の投稿を自動的に取り込むため、各項目を手動で選定せずに関連コンテンツを表示したい場合に最適です。テーマエディターでこれらのセクション設定がどのように機能するかの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
主なコンテンツコントロールは、表示する項目数です。記事の末尾をすっきり見せたい場合は少ない数にし、ブログに強い補足コンテンツがあり、より深い閲覧を促したい場合は増やしてください。
件数を 0 に設定すると、セクションの上限まで利用可能なすべての項目が表示されます。これは小規模なブログでは有効ですが、大規模なブログではセクションが長く感じられ、各カードの印象が弱くなることがあります。
レイアウト設定
Section titled “レイアウト設定”これらの設定では、行ごとに表示する関連投稿数と、各デバイスでグリッドまたはスライドショーのどちらを使うかを制御します。デスクトップ、タブレット、モバイルでセクションをどれだけ見やすくスキャンできるかを形作る主な場所です。
列数を増やすと、画面上により多くの投稿を表示できますが、通常はカードの見た目がシンプルな場合に最適です。記事タイトルや抜粋が長い場合は、列数を少なくしたほうが、よりすっきりして読みやすいレイアウトになります。
タブレットは、0 のままにするとデスクトップの列数を継承できます。デバイスごとの差分を少なくしたい場合に便利ですが、カードに多くのテキストがある場合は、中くらいの画面サイズも確認する価値があります。
スライドショー設定
Section titled “スライドショー設定”いずれかのデバイスがスライドショーに設定されている場合、これらのコントロールでアニメーション、自動再生、ループ、ナビゲーション、ページネーション、スライドプレビューを管理します。スライドショーのコントロール設定に関するCompany XYZドキュメントを参照してください。
デフォルトのアニメーションは、一般的なカルーセル体験にしたい場合に、より柔軟な選択肢です。フェードはよりフォーカスした表示になりますが、レイアウトが簡素になり、いくつかのインターフェースオプションがなくなります。
自動再生は動きを加えられますが、関連投稿が主要な行動喚起ではなく補助的な要素である場合に最適です。読者がクリック前に見出しを比較する可能性があるなら、遅めの自動再生か手動ナビゲーションのほうが使いやすいことが多いです。
ナビゲーションとページネーションは、スライドショーモードで複数の項目を表示し、さらにコンテンツがあることを読者に伝えたい場合に特に役立ちます。スライドプレビューも、特にモバイルでは操作を促せますが、フェードアニメーションでは適用されません。
フェードアニメーションは 1 枚のスライドレイアウトを強制し、ページネーションや次のスライドのプレビューは表示しません。
これらの設定では、より広いテーマスタイルを変更せずに、セクションのアイコン、テキスト、サブ見出しのカラーを上書きできます。カスタム背景の上にこのセクションを配置する場合や、周囲の記事ページより強いコントラストが必要な場合に特に役立ちます。
見出しエリアは、下の文章カードとは視覚的に区別してください。カードのカラーを変更したりセクション背景を追加したりする場合は、すべてのテキスト要素が引き続き読みやすいことを確認してください。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共有のヘッダー設定を使用して、このセクションに見出し、キャプション、サブ見出し、アイコン、任意のボタンを追加します。ヘッダー設定に関するCompany XYZドキュメントを参照してください。
このヘッダーは、関連投稿が記事本文のかなり下に表示され、より明確な導入が必要な場合に役立ちます。短い見出しと簡潔な補足テキストで十分なことが多く、任意のボタンはブログ全体へのリンクに適しています。
共有のカード設定を使用して、スタイル、画像比率、テキスト表示、キャプション内容、カード CTA スタイルを含む各関連投稿カードの外観を制御します。カード設定に関するCompany XYZドキュメントを参照してください。
これらの上書きは、記事カードに他の場所で使われるカードより編集的な印象が必要な場合に役立ちます。バナースタイルのカードはオーバーレイとテキスト位置の選択をサポートし、よりシンプルなカードスタイルは密度の高いグリッドでも見やすいことがよくあります。
共有の余白設定を使用して、セクションの上下のスペースを調整します。セクションの余白設定に関するCompany XYZドキュメントを参照してください。
余白を広くすると、記事の後に関連投稿エリアが明確な次のステップのように感じられます。余白を狭くすると、上のコンテンツとの視覚的なつながりが保たれます。
セクション背景設定
Section titled “セクション背景設定”共有のセクション背景設定を使用して、セクションの背後にカラー、グラデーション、画像、動画を追加します。セクション背景設定に関するCompany XYZドキュメントを参照してください。
背景を使うと、特に長文ページで、関連投稿を記事本文から分けて見せやすくなります。メディア背景を使用する場合は、ヘッダーと投稿カードの両方が引き続きはっきり目立つことを確認してください。
区切り線設定
Section titled “区切り線設定”共有の区切り線設定を使用して、セクションの上下に線を追加します。区切り線設定に関するCompany XYZドキュメントを参照してください。
このセクションがコメント、ニュースレター登録、その他のコンテンツエリアの近くにある場合、より明確な視覚的境界を作るのに役立ちます。多くの編集レイアウトでは、シンプルな線だけで十分です。
共有の表示設定を使用して、セクションをデスクトップ、モバイル、またはその両方に表示するかを制御します。表示設定に関するCompany XYZドキュメントを参照してください。
これは、より大きな画面では豊かな関連コンテンツ体験を、より小さな画面ではシンプルな記事の締めくくりを実現したい場合に便利です。テンプレートの他の場所で代替のモバイルレイアウトをサポートすることもできます。
共有の幅設定を使用して、コンテンツ幅と外側のセクション幅を制御します。レイアウト幅の設定に関するCompany XYZドキュメントを参照してください。
幅が広いレイアウトはグリッドモードでより多くのカードを無理なく表示できますが、幅が狭いレイアウトは長い記事の後でも、より厳選されていて見やすく感じられることがよくあります。幅を変更した場合は、間隔を正確に判断するために、エディターだけでなく公開ページもプレビューしてください。
使用上の注意
Section titled “使用上の注意”- 件数は絞る。 記事の末尾で読者が無理なく確認できる数だけ投稿を表示します。
- 件数が多すぎると、セクションが繰り返しに感じられたり、長すぎたりすることがあります。
- 関連投稿が締めくくりの提案にすぎない場合は、少ない件数が通常最適です。
- レイアウトをコンテンツに合わせる。 すばやく比較したい場合はグリッドを、スペースが限られている場合や、より誘導的な閲覧パターンにしたい場合はスライドショーを使用します。
- スライダー形式のレイアウトではナビゲーション、ページネーション、プレビュー、ブレークポイントの動作が変わるため、デスクトップとモバイルの両方を確認してください。
- デバイス設定を混在させる場合は、各ビューポートで配置と表示を確認してください。
- フェードは意図して選ぶ。 1 回に 1 つの注目カードだけを表示し、プレビューやページネーションが不要な場合にのみフェードを使用します。
- 読みやすいカードを優先する。 見出しが長い場合は、列数を減らすかカードのテキストを簡潔にして、各投稿をすばやく理解しやすくします。
- 区切りは慎重に使う。 背景、余白、区切り線は、記事自体を圧倒せずにセクションを明確に見せるために役立ててください。
- セクションをページのデフォルトの見た目に合わせたい場合は、カラーと背景を控えめにします。
- 関連投稿エリアを記事本文から際立たせる必要がある場合にのみ、強めの上書きを使用します。
- 記事ソースを確認する。 表示される記事は現在のブログと利用可能な関連結果に依存するため、記事数の少ないブログでは、表示される投稿が少なくなったり、バリエーションが減ったりすることがあります。
- デバイスごとに別のメディアを使う場合は、両方のサイズでトリミング、読みやすさ、フォールバック動作を確認してください。
- ナビゲーションやコンテンツソースの選択が、想定どおりの記事へ読者を誘導していることを確認してください。