![](https://saku39log.com/wp-content/uploads/2021/11/cropped-7d91004b6fff1ccfe845364098e9ed9f-e1638280902448-150x150.jpg)
SWELLでサイト作成をしているとき、このブロック(一部)だけ装飾したいけど、標準機能になくて困ったことはありませんか?
そんな時は追加CSSクラスと追加CSSによって解決できます。
目次
追加CSSクラス・追加CSSの使い方
想定ケース
例えばこんなケースを想定してみます。
一部のリッチカラムブロックについてのみ背景を黄色くしたい。
これ↓を
texttexttexttexttexttext
texttexttexttexttexttext
texttexttexttexttexttext
こう↓
texttexttexttexttexttext
texttexttexttexttexttext
texttexttexttexttexttext
設定方法
STEP
まずCSSをあてたいブロックを選択
![](https://saku39log.com/wp-content/uploads/2024/03/image-9.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-9.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-10.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-10.png)
今回はリッチカラムにあてたいので、リッチカラムを選択状態にします。
選択状態で次に進みます。
STEP
ブロック>高度な設定>追加CSSクラス>任意のCSSクラス名を書く
![](https://saku39log.com/wp-content/uploads/2024/03/image-11.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-11.png)
クラス名はなんでもOKです。今回は「background-color」としました。
STEP
カスタマイズ>追加CSSを選択
![](https://saku39log.com/wp-content/uploads/2024/03/image-12.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-12.png)
STEP
CSSを記述する
![](https://saku39log.com/wp-content/uploads/2024/03/image-13.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-13.png)
ここでのクラス名(.background-color)は➁で設定したクラス名にします。
STEP
投稿を表示で確認する
![](https://saku39log.com/wp-content/uploads/2024/03/image-14.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-14.png)
背景が黄色くなりました!
検証画面で確認すると
検証画面で見てみると、きちんと今回設定したCSSクラス名(.background-color)が追加されていることが分かります。
![](https://saku39log.com/wp-content/uploads/2024/03/image-17.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-17.png)
この手法を使えば好きなところにCSSのクラス名を入れれそうですね。
ワードプレス編集画面では変化なし
編集画面では下記のように、(背景色の)変化はありませんので、【投稿を表示】で変化を確認してください。
![](https://saku39log.com/wp-content/uploads/2024/03/image-16.png)
![](https://saku39log.com/wp-content/uploads/2024/03/image-16.png)
SWELL 関連記事紹介
SWELLを使ってコーポレートサイトを自作しました。
よければこちらの記事もどうぞ。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://saku39log.com/wp-content/uploads/2024/03/a952ac3cb745278147987266aceb89f3-300x169.png)
![](https://saku39log.com/wp-content/uploads/2024/03/a952ac3cb745278147987266aceb89f3-300x169.png)
![](https://saku39log.com/wp-content/uploads/2024/03/a952ac3cb745278147987266aceb89f3-300x169.png)
SWELLでコーポレートサイトを自作 作り方【制作編】実サイト紹介
SWELLを使用してコーポレートサイトを制作しましたので、今回はその手順を紹介します。また以下のサイトは私がSWELLで制作したコーポレートサイトです。このようなサイ…
まとめ
追加CSSクラス名と追加CSSを使用することによって、いろんなカスタマイズができそうですよね。
ぜひ試してみてくださいね。