文字サイズクラス・文字色クラス・背景色クラスを使う

Uridasでは、Visual Composerでのデザインに役立つようにオリジナルのCSSクラスを用意しています。（※ver.1.10から対応）

Visual Composerの「特別なclass名」に入力することで文字サイズや配色などを簡単に変更することができます。コピペで使えるので、複数箇所のデザインを統一するときなどに役立つはずです。

使い方は以下の動画をご覧ください。

 

文字サイズクラス

文字サイズを変更するためのクラスです。レスポンシブ対応のための、画面サイズに応じて文字の大きさを変えることができます。

クラス名	font-xs-**	font-sm-**	font-md-**
対応画面サイズ	全画面サイズ	幅768px以上	幅992px以上

**には8〜120までの半角数字が入ります。

文字サイズクラスの設定例

見出し用の設定例：font-xs-23 font-sm-33

本文用の設定例：font-xs-14 font-sm-16

太字クラス

文字を太字にするためのクラスです。

クラス名

bold

太字クラスの設定例

見出し用の設定例：font-xs-23 font-sm-33 bold

↑ 前述の設定例に太字設定を追加しています。

文字色クラス

文字の色を設定するためのクラスです。

クラス名	color-****

****には後述の色名が入ります。

設定例

設定例：font-xs-14 font-sm-16 color-classic-red

↑ 前述の設定例に文字色設定を追加しています。

背景色クラス

文字の色を設定するためのクラスです。

クラス名

bg-****

****には後述の色名が入ります。

設定例

設定例：font-xs-14 font-sm-16 color-classic-red bg-gray

↑ 前述の設定例に背景色設定を追加しています。

※ 色名一覧

あらかじめ用意してある配色は次のとおりです。