カスタムCSS | 高度なデザイン設定

ビジネスオーナーは、管理画面でCSSを使用してストアフロントのレイアウトとスタイルをカスタマイズし、ブランドの外観を柔軟に作成し、全体的なショッピング体験を向上させることができます。

⚠️ 開始する前に、以下のことをお忘れなく： ネットワークプラットフォームとして、SHOPLINEはウェブサイトのデザインとシステムの性質を頻繁に更新する必要があります。ウェブサイトの更新によりカスタムCSSに問題が発生した場合、これはSHOPLINEの責任外です。ストアとレイアウトが正常に機能していることを確認するために、定期的にストアフロントの状態を確認してください。

この記事では、以下の内容を扱います：

• CSSのカスタマイズ方法
• 注意事項

1. CSSのカスタマイズ方法

ステップ1

[オンラインストアデザイン] > [デザイン]に移動し、詳細設定タブを選択します。

ステップ2

"カスタムCSS"フィールドにカスタムCSSコードを入力します。

ステップ3

下部の保存をクリックして変更を保存します；プレビューをクリックして新しいウィンドウを開き、ストアフロントを表示します。確認後、公開をクリックしてCSSコードをストアに適用します。

2. 注意事項

• 一般的な標準のCSS3タグがサポートされています。
• SassやLessのようなCSSミキシンはサポートされていません。
• 誤った形式のCSSを入力すると、ストアフロントが正しく表示されない場合があります。
• 無効なCSSやセキュリティリスクを伴うCSSは削除されます。
• ほとんどのCSSクラス名は、HTMLソースコードを見れば確認できます。
• SHOPLINEはクラスの使用に関する仕様を提供していません。将来的に変更される可能性があるため、自己責任で使用してください。
• 将来の更新による変更の可能性があるため、SHOPLINEは包括的なCSSスタイルシートを提供できません。オンラインストアとレイアウトが正常に機能していることを確認するために、ウェブサイトの状態を頻繁に監視してください。
• レイアウトエンジンを有効にしている場合、レイアウトエンジン > .css.liquidの下に追加されたカスタムスタイルもストアフロントに適用されることに注意してください。同じ要素が「カスタムCSS」とレイアウトエンジンの両方で定義されている場合、どちらが優先されるかを判断する必要があります。特異性とCSSセレクタが同じ場合：
  • 「カスタムCSS」が最も高い優先度を持ちます。
  • 次に、レイアウトエンジン > theme.css.liquidがあり、手動で読み込み順序を調整できます。
  • 他の".css.liquid"ファイルに追加されたカスタムCSS：
    • render_to_top: trueなし → theme.liquidよりも優先度が低い
    • render_to_top: trueあり → theme.liquidよりも優先度が高い