成功
リッチテキスト
オプションのアイコンとボタンを備えた、わかりやすくスタイルの整ったメッセージ用の柔軟なテキストブロックを作成します。
このブロックを使うと、オプションのアイコン、見出し、リッチテキスト、ボタンを備えたコンパクトなメッセージ領域を追加できます。短い販促コピー、ブランドステートメント、機能の訴求、そしてより視覚的なブロックの間に入れる補足コンテンツに適しています。機能の要約については、リッチテキスト をご覧ください。
コンテンツ設定
Section titled “コンテンツ設定”これらの設定では、メッセージ自体とその表示方法を制御します。最もわかりやすい構成は、オプションのキャプション、見出し、補足テキスト、そして次のステップが明確な場合のみ単一のアクションを使うシンプルな構成です。
テキストの配置とアイコンの位置は、レイアウト内でこのブロックがどのように見えるかを左右します。中央揃えのコンテンツは短い販促メッセージに適しており、左揃えのコンテンツはテキストが長い場合に読みやすくなることが多いです。
アイコンフィールドには、絵文字またはアイコン名を指定できます。メッセージに追加の視覚的な手がかりが不要な場合は空欄にしてください。アイコンの詳細は、icons と対応する icon name library をご覧ください。
見出しタイプは、見た目のサイズだけでなく、ページ階層におけるこのブロックの役割に基づいて選びます。より強い見出しレベルは、このブロックが新しいコンテンツ領域を導入する場合に役立ちます。一方、より軽いレベルは、近くのコンテンツを補足する場合に適しています。
リッチテキストフィールドはリンクと基本的な書式設定に対応しているため、ブロックが過剰に見えないようにしながら強調を追加できます。メッセージがすばやく確認しやすいよう、装飾は控えめにしてください。
ボタン設定は、このブロックに組み込まれたボタンのみに適用されます。明確な1つの行動喚起に使い、そのアクションの重要度に合うスタイルを選んでください。アイコンのみのボタンレイアウトは、意味が近くのテキストからすでに明確な場合に最適です。
ボタンテキストとボタンリンクは必ず両方設定してください。明確なラベルやリンク先がないボタンは、見落とされたり誤解されたりしやすくなります。
クリックの大半が小さい画面で発生する場合、幅いっぱいのモバイルボタンオプションを使うと、アクションを見つけやすく、タップしやすくなります。
標準ブロック設定
Section titled “標準ブロック設定”ブロック背景設定
Section titled “ブロック背景設定”これらの設定を使うと、色、グラデーション、画像、または動画の背景で、このブロック独自の視覚的な面を与えられます。メッセージを目立たせるのに役立ちますが、強い背景はレイアウト内でのブロックの視覚的な重さや余白も変える可能性があります。セクション背景設定 をご覧ください。関連する Shopify の構造の概要については、セクションとブロックに関するShopifyドキュメント をご覧ください。
グラデーション設定は単色の背景色より優先され、オーバーレイのグラデーションは単色のオーバーレイ色より優先されます。画像または動画の背景を使う場合、オーバーレイはテキストの読みやすさを保つのに特に役立ちます。
モバイルの背景画像および動画フィールドを使うと、小さい画面向けに別のアセットへ切り替えられます。空欄の場合、モバイルではメインの背景アセットが使われます。デスクトップとモバイルで異なるメディアを設定した場合は、切り抜き、読み込み、読みやすさが変わる可能性があるため、両方のビューポートサイズを確認してください。
動画の設定方法については、using video をご覧ください。
これらの設定は、このブロックに対してのみテーマの既定色を上書きします。ブロックに強いコントラスト、ブランドらしいアクセント、またはカスタム背景とのよりよい調和が必要な場合に使ってください。カラー設定 をご覧ください。テーマカスタマイズのより広い概要については、テーマのカスタマイズに関するShopifyドキュメント をご覧ください。
見出し、サブ見出し、本文テキストは、まとまったひとつの体系として読めるように一緒に調整してください。アイコンや枠線もスタイル設定する場合は、メッセージそのものより目立たないよう、あくまで補助的なアクセントにとどめてください。
空白、透明、または既定スタイルの値は、通常、このブロックをテーマのフォールバックに近い見た目に保ちます。一方、明示的な色、グラデーション、またはメディアの上書きは、ブロックをより独立した印象にします。
表示コントロールを使うと、デバイスサイズごとにこのブロックの表示・非表示を切り替えられます。モバイル向けに短い版を使いたい場合、デスクトップ向けに余裕のある版を使いたい場合、またはレイアウトごとに異なるコンテンツ配置を使いたい場合に便利です。表示設定 をご覧ください。
使用上の注意
Section titled “使用上の注意”- メッセージを絞り込む。 このブロックは、小さなスペースに複数の競合するメッセージを重ねるのではなく、1つの主題に使ってください。
- 見出しをページ構造に合わせる。 見た目のスタイルだけでなく、周囲のコンテンツ階層に合う見出しタイプを選んでください。
- アイコンは控えめに使う。 メッセージをすばやく補強し、見出しと競合しない場合にのみ、絵文字またはアイコンを追加してください。
- 行動喚起は絞る。 組み込みのボタンは明確な次のステップ1つに使い、小さい画面でのタップが重要な場合は幅いっぱいのモバイル表示も検討してください。
- すべてのデバイスでコントラストを確認する。 カスタムカラー、グラデーション、またはメディアを使う場合は、デスクトップとモバイルの両方で読みやすさとボタンの視認性を確認してください。
- 別メディアを慎重に確認する。 デスクトップとモバイルで背景を分ける場合は、それぞれのビューポートで切り抜き、読み込み動作、テキストの読みやすさを確認してください。