Wix Studio Two エディタ：カスタム CSS を追加する
6分
この記事では、2026年11月にリリースされた新しい Wix Studio Two エディタについて説明します。Wix Studio エディタまたは Wix Studio Two エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。
カスタム CSS は、サイト上の要素の見た目を制御するスタイル言語です。CSS を使用すると、色、余白、枠線、アニメーション、ホバーエフェクトなどをカスタマイズできます。
Wix Studio Two エディタでは、希望するエフェクトを普段の言葉で説明するだけで、AI を使ってあらゆる要素の CSS を生成できます。この記事では、AI で CSS を生成する方法と、結果を調整したい場合の対処法について説明します。
カスタム CSS でできることの例を見る
カスタム CSS は、選択した要素にのみ適用されます。同じ種類のすべての要素（サイト上のすべてのプライマリボタンなど）にスタイルを適用したい場合は、代わりにスタイル付き要素を使用してください。
AI を使用して要素に CSS を追加する
希望するエフェクトを説明すると、Aria が CSS コードを生成します。結果はすぐに要素に適用されるため、キャンバス上で確認できます。
始める前に：
- エフェクトは 1つずつ説明してください。1つのプロンプトに複数の変更を含めると、意図しない結果になりやすくなります。
- 必要に応じて、状態も含めてください（例：「ホバー時」、「ページの読み込み時」、「選択時」）。
- 具体的に説明してください。「ボタンを目立たせる」ではなく、「ホバー時にボタンの周りに太い赤の枠線を追加する」のように入力します。
AI で CSS を生成する方法：
- エディタに移動します。
- スタイルを設定したい要素をクリックします。
- 右側の「要素設定パネル」で「カスタム CSS」までスクロールし、「+ 追加」をクリックします。
- 「カスタム CSS」パネルで「AI で CSS コードを生成」欄をクリックし、希望するエフェクトの説明を入力します（例：「ホバー時に光る青い枠線を追加する」）。
- Enter キーを押します。
CSS が生成され、キャンバス上の要素に適用されます。欄の下に「スタイル概要」が表示され、コードの内容がわかりやすい言葉で説明されます。
CSS のトラブルシューティングを行う
AI の結果が期待どおりでない場合は、プロンプトを書き直すか、コードを直接編集することで改善できます。
プロンプトを書き直す方法：
- 「AI で CSS コードを生成」欄で前回のプロンプトを消去し、新しい説明を入力します。
- Enter キーを押します。キャンバス上の前回の結果が新しい CSS に置き換わります。
CSS を手動で編集する方法：
AI の結果がイメージに近いものの完全ではない場合は、最初からやり直さずにコードを直接変更できます。
- 「カスタム CSS」パネルで「CSS を手動で編集」をクリックします。
- 「カスタム CSS」エディタでコードを更新します。
- 「保存」をクリックします。
よくある質問
カスタム CSS についての詳細は、以下の質問をクリックしてください。
要素から CSS を削除するにはどうすればよいですか？
CSS はページ上の他の要素にも適用されますか？
エディタでは CSS が正しく表示されるのに、公開したサイトでは表示が異なるのはなぜですか？
CSS はどの要素にも使用できますか？
AI が生成したコードの意味がわかりません。問題ありませんか？