業務効率化&Web制作学習におすすめ!Udemyをチェックする! Udemy公式HP

SWELL 追加CSSクラス・追加CSSの使い方

当ページのリンクには広告が含まれています。
オカヘイ

SWELLでサイト作成をしているとき、このブロック(一部)だけ装飾したいけど、標準機能になくて困ったことはありませんか?
そんな時は追加CSSクラスと追加CSSによって解決できます。

目次

追加CSSクラス・追加CSSの使い方

想定ケース

例えばこんなケースを想定してみます。

一部のリッチカラムブロックについてのみ背景を黄色くしたい。

これ↓を

texttexttexttexttexttext

texttexttexttexttexttext

texttexttexttexttexttext

こう↓

texttexttexttexttexttext

texttexttexttexttexttext

texttexttexttexttexttext

設定方法

STEP
まずCSSをあてたいブロックを選択

今回はリッチカラムにあてたいので、リッチカラムを選択状態にします。

選択状態で次に進みます。

STEP
ブロック>高度な設定>追加CSSクラス>任意のCSSクラス名を書く

クラス名はなんでもOKです。今回は「background-color」としました。

STEP
カスタマイズ>追加CSSを選択
STEP
CSSを記述する

ここでのクラス名(.background-color)は➁で設定したクラス名にします。

STEP
投稿を表示で確認する

背景が黄色くなりました!

検証画面で確認すると

検証画面で見てみると、きちんと今回設定したCSSクラス名(.background-color)が追加されていることが分かります。

この手法を使えば好きなところにCSSのクラス名を入れれそうですね。

ワードプレス編集画面では変化なし

編集画面では下記のように、(背景色の)変化はありませんので、【投稿を表示】で変化を確認してください。

SWELL 関連記事紹介

SWELLを使ってコーポレートサイトを自作しました。

よければこちらの記事もどうぞ。

まとめ

追加CSSクラス名と追加CSSを使用することによって、いろんなカスタマイズができそうですよね。

ぜひ試してみてくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次