SWELL（スウェル）の基本スタイル、CSSのクラス一覧

※当サイトにはプロモーションが含まれています。

SWELL（スウェル）は、ブロックエディタ（Gutenberg）に完全対応したワードプレス（WordPress）テーマです。

その為、基本的に余白調整や装飾は、ブロックエディタでできるのですが、SWELLにはないパーツを自作した際など、「カスタムHTML」を使う事もあるかと思います。

SWELL｜カスタムHTML

また、どうしても“クラシックエディター”でを使いたいという人もいるのではないでしょうか？

そういった際には、ブロックエディタで調整できないので、直接、クラス（class）を割り当ててあげる必要があります。

今回は、そういった人にとって、SWELLを使い際に知っておくと便利だと思われるCSSのクラスをまとめてみました。

この記事の目次

SWELLの基本スタイル、CSSのクラス一覧

SWELLの基本スタイル、CSSのクラス一覧

SWELLの基本スタイル、CSSのクラス一覧です。

なお、これら記載したCSSは予め、SWELLで用意されているものです。

その為、適用したいクラスがあれば、

<p class="u-fz-xs">文字が凄く小さくなる</p>

のように書くことで、クラスが適用されます。

※追加CSSなどに記述する必要はありません

フォントサイズ・太さに関するCSS

文字のサイズや装飾を調整するクラスです。

.u-fz-xs { font-size: 0.75em !important; }
.u-fz-s { font-size: 0.9em !important; }
.u-fz-normal { font-size: 1rem !important; }
.u-fz-m { font-size: 1.1em !important; }
.u-fz-l { font-size: 1.25em !important; }
.u-fz-xl { font-size: 1.6em !important; }
.u-fw-bold { font-weight: 700 !important; }
.u-fw-normal { font-weight: 400 !important; }
.u-fw-lighter { font-weight: lighter !important; }
.u-fs-italic { font-style: italic !important; }

マージン（外側余白）に関するCSS

自分は、余白調整で一番よく使うクラスになります。

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-5 { margin-bottom: 0.5em !important; }
.u-mb-10 { margin-bottom: 1em !important; }
.u-mb-15 { margin-bottom: 1.5em !important; }
.u-mb-20 { margin-bottom: 2em !important; }
.u-mb-25 { margin-bottom: 2.5em !important; }
.u-mb-30 { margin-bottom: 3em !important; }
.u-mb-40 { margin-bottom: 4em !important; }
.u-mb-50 { margin-bottom: 5em !important; }

.u-mt-0 { margin-top: 0 !important; }
.u-mt-5 { margin-top: 0.5em !important; }
.u-mt-10 { margin-top: 1em !important; }
.u-mt-15 { margin-top: 1.5em !important; }
.u-mt-20 { margin-top: 2em !important; }
.u-mt-25 { margin-top: 2.5em !important; }
.u-mt-30 { margin-top: 3em !important; }
.u-mt-40 { margin-top: 4em !important; }
.u-mt-50 { margin-top: 5em !important; }

パディング（内側余白）に関するCSS

文字などを１文字分内側に入れたい時などに使用します。

.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-5 { padding-bottom: 0.5em !important; }
.u-pb-10 { padding-bottom: 1em !important; }
.u-pb-15 { padding-bottom: 1.5em !important; }
.u-pb-20 { padding-bottom: 2em !important; }
.u-pb-25 { padding-bottom: 2.5em !important; }

.u-pt-0 { padding-top: 0 !important; }
.u-pt-5 { padding-top: 0.5em !important; }
.u-pt-10 { padding-top: 1em !important; }
.u-pt-15 { padding-top: 1.5em !important; }
.u-pt-20 { padding-top: 2em !important; }
.u-pt-25 { padding-top: 2.5em !important; }

テキスト配置に関するCSS

文字の位置調整（左・真ん中・右）などで使用します。

.u-ta-c { text-align: center; }
.u-ta-l { text-align: left; }
.u-ta-r { text-align: right; }
.u-nowrap { white-space: nowrap; }

表示制御に関するCSS

知っておくと便利な表示を制御するクラスです。

.u-none { display: none !important; }
.u-block { display: block !important; }
.u-flex--aic { display: flex; align-items: center; }

今のところ、これらのクラスを利用しています。

にゃテック

SWELLのスタイルやデザインなどで役立つクラスをまとめた記事がこちら。

SWELLで用意されているボーダー設定＆スタイルのCSSクラス一覧
https://best-item.work/wordpress/swell-style-class/
ワードプレス（Wordpress）テーマのSWELL（スウェル）には、デフォルトの基本デザインとして「ボーダー設定」や「スタイル」が用意されています。今回は、それらのCSSのクラスを一覧にしてみました。これらのクラス …