コンテンツにスキップ

アイコン付きテキスト

アイコン、短いテキスト、任意のリンクで、特長、特典、信頼要素を強調します。

このブロックを使って、小さなアイコンと短いテキストで、1つの特長、メリット、または信頼要素を強調します。配送特典、商品特長、保証、素材の詳細など、すばやく見やすく伝えたいメッセージに最適です。

この種のコンテンツがテーマの中でどのように使われるかについては、セクションとブロックに関するShopifyドキュメントをご覧ください。

アイコンとテキストから始めます。絵文字またはアイコン名のどちらかを使用できるため、他のコンテンツのスタイルに合わせやすくなります。アイコンを空欄のままにすると、ブロックにはテキストのみが表示されます。

テキストは短く、具体的にしてください。特に、訪問者がひと目でメッセージを理解できるようにしたい場合は、短いフレーズのほうが長い文よりも適しています。

ハイライトから詳細ページへ誘導したい場合は、リンクも追加できます。ポリシー、ガイド、補足ページなどへのリンクに適しています。訪問者が現在の位置を見失わないようにしたい場合は、そのリンクを新しいタブで開くと便利です。

これらの設定では、デスクトップとモバイルそれぞれの水平配置を個別に制御できます。画面サイズによって異なるレイアウトでブロックを表示する場合や、カスタムのモバイルレイアウトを微調整する場合に便利です。

周囲のコンテンツに合わせて配置を選びます。中央配置は単独のハイライトに向いており、左揃えは縦に並んだレイアウトやテキスト量の多い領域で、より自然に見えることが多いです。

デスクトップとモバイルの両方で配置を確認してください。広い画面ではバランスよく見える位置でも、小さい画面では不自然に感じることがあります。

これらの設定では、アイコンとテキストに対して、このブロックがテーマ全体のカラー設定を上書きできます。ハイライトをさらに目立たせたい場合や、特定のレイアウト内でコントラストを高めたい場合に使用してください。

同じページ内で、あまりに多くの異なるハイライトカラーを使わないようにしてください。色の使い方を統一すると、訴求ポイントを見つけやすくなり、デザインが雑然とした印象になるのを防げます。共有カラーの動作について詳しくは、カラー設定をご覧ください。

アイコンとテキストの両方が背景の上でも読みやすいことを確認してください。

表示コントロールを使って、このブロックをデスクトップまたはモバイルで表示・非表示にできます。デバイスサイズごとに異なる補足コンテンツを表示したい場合や、短いハイライトがあるレイアウトにより適している場合に役立ちます。

非表示は選択的に使ってください。コンテンツを簡潔にする代わりとしてではなく、意図的なレイアウト調整として使うのが最適です。共有表示の動作について詳しくは、表示設定をご覧ください。

  1. コピーは短く保つ。 メッセージをすばやく見られるように、短く、メリットを前面に出したフレーズを使います。
  2. わかりやすいアイコンを選ぶ。 装飾としてではなく、テキストをすぐに補強するアイコンを選んでください。
  3. 目的を持ってリンクする。 ハイライトの背景にある詳細が本当に必要な場合にのみ、リンクを追加します。
  4. 両方の画面サイズを確認する。 公開前に、デスクトップとモバイルで配置と余白を確認してください。
  5. 強調は控えめに使う。 カスタムカラーは、特に注目に値するハイライトのために取っておいてください。
  6. 可能な場合はデフォルトを活かす。 ブロックを周囲のデザインになじませたい場合は、カラーやスタイルの設定を未設定のままにし、ハイライトを際立たせたい場合にのみ上書きを使ってください。