カスタムCSSとAIコードアシスタントを使ったストアのカスタマイズ

カスタムCSSは、プログラミングに精通したマーチャントが、組み込みのテーマ設定を超えてストアの外観を微調整できるようにします。これはグローバルなテーマレベルと個別のパーツレベルの両方で可能です。CSSを自分で記述することも、変更したい内容を平易な言葉で説明してAIコードアシスタントに生成させることもできます。

このガイドでは、カスタムCSSに適用される制限事項、CSSを手動で追加する方法、AIコードアシスタントでCSSを生成する方法、そして追加したCSSを削除する方法について説明します。

カスタムCSSの制限事項の理解

カスタムCSSを追加する前に、以下の制限事項を覚えておいてください。これらはCSSを自分で記述する場合も、AIコードアシスタントで生成する場合も適用されます：

• アットルール： 
  • パーツレベルのCSSではアットルールは完全に禁止されています。
  • テーマ全体のCSSでは、@color-profile、@font-face、@counter-style、@font-feature-values、@font-palette-values、@keyframes、@page、@property のみが許可されています。
• URLの制限：許可されるURLはドメイン https://*.myshopline.com のみです。
• 文字数制限： 
  • テーマ全体のCSSは最大1,500文字までです。
  • パーツレベルのCSSは最大500文字までです。

カスタムCSSを手動で追加する

テーマ全体またはパーツレベルでカスタムCSSを追加するには：

1. オンラインストア > デザイン に移動し、現在のテーマモジュール内の デザイン をクリックします。
2. CSSを追加する場所を選択します：
   • テーマ全体: テーマ設定アイコンをクリックし、次にカスタムCSSモジュールを開きます。
     
   • パーツレベル: スタイルを適用したいパーツを選択し、次にカスタムCSSモジュールを開きます。
     
3. CSSコードを入力し、変更を適用するために保存をクリックします。

AIコードアシスタントでカスタムCSSを生成する

AIコードアシスタントはOS 3.0テーマでのみ利用可能です。ストアがOS 2.1テーマを使用している場合、このアイコンはテーマエディターに表示されませんが、上記の方法でカスタムCSSを手動で追加することは可能です。

CSSを自分で書く代わりに、望むスタイル変更を平易な言葉で説明し、AIコードアシスタントにコードを生成させることができます。

AIコードアシスタントの場所

テーマエディター（オンラインストア > デザイン > マイテーマ）では、AIコードアシスタントのアイコンは以下の3箇所に表示されます：

• ページタイトルの横: 現在表示しているページ名（例：トップページ）の隣、左サイドバーの上部にあります。
  
• パーツタイトルの横: 左サイドバーの特定のセクションやパーツのタイトルの隣にあります（例：スライドショーや画像バナーの隣）。
• カスタムCSS設定の横: ページまたはパーツの設定パネル内のカスタムCSS見出しの隣に表示されます。
  

AIコードアシスタントを使ってCSSを生成する方法

AIコードアシスタントでCSSを生成するには：

1. テーマエディターのサイドバーで調整したいページまたはパーツを選択します。
2. 選択したページまたはパーツのタイトルの横にあるAIコードアシスタントアイコンをクリックします。
3. ストアフロントのスタイル変更を会話形式で説明します（例：「商品タイトルのテキストを青にする」）。
4. アシスタントが対応するCSSコードを出力します。
5. 申請をクリックします。コードが自動的にカスタムCSSフィールドに入力され、プレビューが表示されます。
6. テーマエディターで保存をクリックして、テーマへの変更を公開します。

使用例

AIコードアシスタントを使ってストアフロントのパーツのスタイルを調整する例をご紹介します。この例では、商品詳細ページのユニークおすすめ商品パーツのタイトル（例：「こちらもおすすめ」）を大きく、左寄せ、ピンク色に変更します：

1. SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマタブに移動し、デザインをクリックしてテーマエディターに入ります。
2. 商品ページに移動し、ユニークおすすめ商品パーツを選択します。
3. AIコードアシスタントの機能アイコンをクリックして開き、「パーツのタイトルのフォントサイズを大きくし、左寄せにして、色をピンクに変更する」と入力し、生成をクリックします。
   
4. AIコードアシスタントがCSSコードを自動生成します。コードを確認し、申請をクリックしてカスタムCSSフィールドに適用します。
   
5. 生成されたCSSは自動的にカスタムCSSフィールドに適用されます。変更をプレビューし、問題なければ保存をクリックして更新を公開します。
   

カスタムCSSの削除

手動で記述した場合でも、AIコードアシスタントで生成した場合でも、追加したカスタムCSSを削除するには：

1. オンラインストア > デザイン > マイテーマ に移動します。
2. コードが適用されたカスタムCSSセクションを開きます。
3. 削除したいコードブロックを削除します。
4. 保存をクリックします。