設定が反映されません。

コードスニペットのトグルがオンになっているか確認してください。

ツールバーに筆アイコンやプリセットチェックボックスが見当たりません。

設定後、編集画面を更新してください。

ツールバーにCSS入力欄&プリセット設定機能追加

Q: ツールバーに筆アイコンやプリセットチェックボックスが見当たりません。

設定後、編集画面を更新してください。

実装例

ツールバーにCSS入力欄を追加

CSSプリセット設定画面で、ドロップダウンメニューから「u-montserrat」「u-uppercase」の選択肢が表示されている操作画面

設定画面からプリセット設定可能

編集画面のツールバーに「CSS入力欄+プリセット選択」機能を追加します。

コーディングしていくに当たりすべてのブロックにクラス名を付けていきたいけど、
「高度な設定」が右側パネルの一番下にあって毎回スクロールするのがめんどくさい！

なんて思いませんか！？（私はめっちゃ思います。）

ツールバーにCSS入力欄があることでQOL爆上がり&時給を上げる

コーディングでデザインしていくサイトの場合、何十ものクラス名を付けていきますよね。

クラス名を付けるたびに

要素を選択
カーソルを右側設定パネルへ移動
一番下にスクロール
「高度な設定」を開く
「追加CSSクラス」を選択
クラス名を入力
次の要素へカーソルを移動して選択…

と手順が続いていくストレスを無くし、数秒の効率化の積み重ねがあなたの時給を上げていきます。

デザインツールのクラス名入力ダイアログ。「現在のクラス／直接入力」というラベルの下に「_ExplainText」と入力されたテキストフィールドがあり、下部に「プリセット選択」と「設定から追加してください」というテキストが表示されている

ユーティリティクラス・コンポーネントクラスの使用が劇的に楽になる

「ユーティリティクラス」とは？

text-transform: uppercase;やfont-family: "Noto Sans JP", sans;といった特定のプロパティクラスを持たせるクラス名のことです。

上記例では、下記のような汎用コードをグローバルに用意しておくことで、一つのクラス名が一つのプロパティを担当します。

.u-uppercase { 　text-transform: uppercase; }

.u-notosans { 　font-family: "Noto Sans JP", sans; }

「クラス名を付ける」→「プロパティを当てる」という流れではなく、
「プロパティを持ったクラスを用意」→「クラスを当てる」という、通常とは逆のアプローチです。

この思想に基づいたCSS設計として、「Tailwind CSS」があります。

「コンポーネントクラス」とは？

ユーティリティクラスが「ひとつのクラス名にひとつのプロパティ」であるのに対して、コンポーネントクラスは、ボタン、カード、ナビゲーションなどの「パーツ（UIパーツを構成する複数プロパティ）」をひとつに定義した汎用クラスです。

例えば、以下のようなものです。

.badge { 　display: inline-block; 　padding: 0.35em 0.65em; 　font-size: 0.75em; 　font-weight: 700; 　line-height: 1; 　text-align: center; 　white-space: nowrap; 　vertical-align: baseline; 　border-radius: 0.375rem; }

こちらも「プロパティを持ったクラスを用意」→「クラスを当てる」といった流れで使用します。

コンポーネント集として開発現場を支え続けた「Bootstrap」などが有名どころです。

ちなみに、ツールバーから「ブロック下の余白量」を0em設定したときに自動付与されるクラス名u-mb-0も、SWELLにデフォルトで用意されているユーティリティクラスです。

次のセクションで使用方法を確認しましょう！

実装方法

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

会員限定コンテンツ

ここは会員限定コンテンツです。

＼お申込みはこちら／

お申込みする！

コードスニペットをオンにします。
（コードスニペットが分からない方は使用方法ページをご覧ください。）

CSS入力欄の使用方法

ツールバーに筆アイコンが追加されるので、クラス名を入力するだけです。もう設定パネルを一番下までスクロールする必要はありません。

プリセット機能の使用方法

プリセットを追加

デザインツールのクラス名入力ダイアログウィンドウ。「現在のクラス／直接入力」というラベルの下に青い枠線のテキストフィールドに「_ExplainText」と入力されており、その下に「プリセット選択」というセクションと「設定から追加してください」というグレーテキストの補足メッセージが表示されている

管理画面[設定] > [CSSプリセット設定] にて、選択式で追加したいクラス名を追加します。
上のスクショでは、u-montserratとu-uppercaseというコードを追加しています。

追加CSSにクラスを用意

カスタマイズ中の追加CSS編集画面で、u-montserratとu-uppercaseのフォント設定コードが表示されている

追加CSSに、先ほど用意したプリセットクラスのプロパティを記述します。

編集画面でCSSを選択

「追加 CSS クラス」パネルで、テキストボックスに「u-montserrat u-uppercase」が入力されている設定画面 — 「高度な設定」に反映されています。

編集画面でCSS入力ボタンを押すと、「プリセット選択」にチェックボックスが増えています。
※プリセットCSSが見当たらない場合は、編集画面を更新してください。

これをチェックするだけで、半角スペースで区切られたクラス名が自動付与されます。
念のため「高度な設定」を見ると、しっかり反映されていますね。

【未設定 – 比較対象 -】

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

何も設定していないと上記のスタイルですが…

【反映結果】