Swellのリッチカラムはとても便利だけど、ブロックを選択して右カラムの設定メニューから背景色を付けることができない。
通常のボックスであれば、こういう設定項目が出てきますよね？
だけど、リッチカラムについてはカラムを選択しても色系のメニューが出てこない。
なので、CSSで対応する必要があります。
目次
Swellのリッチカラム背景に色を付けるCSS
以下例示。
以下にリッチカラムを使って、二つのカラムを作りました。
これはリッチカラム a
追加CSSの名前は richa-column
これはリッチカラムb
追加CSSの名前は richb-column
左のリッチカラムaの追加CSSに「richa-column」を設定。
右のカラムも同様にしょり、「richb-column」を設定。
これで、どこに色を付けるのか、と言うターゲットは明確にできたので、後は色を付ける指示をするだけ。
エディター下部にある「CSS用コード」欄に指示文となるCSSコードを貼り付ければOK.
対象のコードは以下でコピー可能。
.richa-column,
.richb-column {
background-color: #F09F4D; /* オレンジ */
}
「/* オレンジ */」部分は人間がみて何色か分かるようにしたコメント部分です。
それでも上手くリッチカラムに色がつかない場合
正しく設定したのに上手く色がつかない場合、設定した内容がCSSの優先順位に邪魔され、表現出来ていない可能性があります。
その場合は、追加したCSSコードを最優先化する「!important」を付与してみてください。
具体的には以下のようなコードになります。
.richa-column,
.richb-column {
background-color: #F09F4D !important; /* オレンジ */
}
ちなみに、「!important」の前には半角のスペースが入っているので、間違えないように！