成功
アカウント
ブランド化されたコンテンツ、スタイル、レイアウトコントロールでレガシーの顧客アカウントページをカスタマイズします。
このセクションを使用して、レガシーの顧客アカウントのメイン表示を調整し、洗練されたブランドらしい見た目にします。独自のアイコン、見出し、補足テキストでページを構成し、その後、カラー、背景、余白、レイアウトを調整して、アカウントエリアを読みやすく、移動しやすくします。テーマエディターでセクション設定がどのように機能するかの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
メインコンテンツの設定でページの導入部分を構成します。アイコンを追加して視覚的な手がかりをすばやく示し、見出しとサブ見出しで、顧客がアカウントエリアで何ができるかを説明します。
見出しまたはサブ見出しを空白のままにすると、セクションではテーマのデフォルトコンテンツが使用されます。これは、標準の文言を使いつつ、ページの見た目はコントロールしたい場合に適した選択です。
これらの設定では、セクションのデフォルトのアイコンとテキストカラーを上書きできます。カスタム背景を使用していて、より強いコントラストやページ全体とのより近い一致が必要な場合に特に便利です。
アイコン、メインテキスト、サブ見出しをまとめて調整し、セクションに一体感を持たせます。いずれかの要素が他より明らかに明るい、またはコントラストが低いと、ページが見づらく感じられることがあります。
画像、グラデーション、または動画の背景を使用する場合は、公開前にデスクトップとモバイルの両方でテキストのコントラストを確認してください。
標準セクション設定
Section titled “標準セクション設定”エディターでセクション固有のコントロールを編集する方法の詳細については、セクションのカスタマイズに関するShopifyドキュメントを参照してください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 は、アカウントコンテンツの背後にある視覚的な面を制御します。単色、グラデーション、画像、動画を使用し、必要に応じてオーバーレイを追加してテキストを見やすくできます。
グラデーション設定は単色を上書きし、オーバーレイのグラデーションはオーバーレイカラーを上書きします。デスクトップ向けとモバイル向けの画像および動画オプションは、デスクトップ用メディアの切り抜きが不自然な場合や、小さい画面で視覚的に重すぎる場合に便利です。
余白設定 は、アカウントコンテンツの上下の余白を制御します。ページをよりゆったり見せたい場合は余白を大きくし、よりコンパクトで実用性を重視したレイアウトにしたい場合は減らします。
デスクトップとモバイルの余白は別々に設定されるため、両方の表示を確認する価値があります。モバイルの余白を小さくすると、窮屈に見えずにページを見やすく保てることがよくあります。
区切り線設定
Section titled “区切り線設定”区切り線設定 は、セクションの上端、下端、または両端に任意の線を追加します。これは、似た背景を持つ他のセクションの近くにアカウントエリアがある場合に、境界をより明確にするのに役立ちます。
区切り線のカラーを透明のままにすると、セクションではテーマのボーダーカラーが使用されます。これは、区切り線の見た目を一貫させる最も簡単な方法です。
幅設定 は、アカウントコンテンツの読みやすい幅とセクション全体の広がりの両方を制御します。コンテンツ幅は可読性に関する主な設定であり、セクション幅は背景の見せ方も調整する場合に特に重要です。
アカウントページでは、コンテンツがタスク重視でテキスト量も多いため、狭めのコンテンツ幅がたいてい最適です。エディターでは幅の変更が実際より控えめに表示されることがあるため、レイアウトを確定する前にライブのストアフロントでページをプレビューしてください。
使用上の注意
Section titled “使用上の注意”- 導入部分を役立つものにする。 一般的なアカウントの文言を繰り返すのではなく、見出しとサブ見出しで顧客をすばやく案内します。
- コントラストを意識してデザインする。 背景画像や動画を追加する場合は、必要な範囲でのみオーバーレイとカスタムテキストカラーを使い、全体を読みやすく保ちます。
- 読みやすい幅を優先する。 中程度から狭めのコンテンツ幅のほうが、アカウント詳細や注文履歴を確認しやすくなることが多いです。
- 余白をページの役割に合わせる。 余白を大きくするとよりブランドらしく感じられ、コンパクトな余白はより機能的なアカウント体験を支えます。
- モバイルは別でプレビューする。 モバイルの背景メディア、余白、テキストコントラストをまとめて確認し、小さい画面でもページが見やすい状態を保ちます。
- デスクトップとモバイルをまとめて確認する。 レイアウト、配置、メディアの動作は表示領域によって異なることがあるため、公開前に両方を確認してください。
- フォールバック用のスタイルを使いたい場合は、デフォルトをそのままにする。 空白または透明の値は通常、テーマに組み込まれた見た目を保持します。一方、明示的なカラー、グラデーション、またはメディアの選択は、セクションをより独立したものにします。