【SWELL】テキスト色と背景色を変更する方法

【SWELL】テキスト色と背景色を変更する方法

SWELLで記事中のテキスト色や背景色を変更する方法をまとめておきます。

目次

カスタムカラーを優先して使う

テキスト色や背景色を変更する時は、できるだけカラーパレットの下段8色から選択することをおすすめします(カーソルを載せた時に「カスタム」と表示されるカラー)。

SWELLのカスタムカラー

下段8色のカスタムカラーは、SWELL独自のCSSで管理されており、管理画面の「カラーパレット設定」からいつでも変更できるからです。ここでカラーを変更すれば、記事中のカラーも一括で変更できます。

SWELLのエディター設定

カスタムカラーを優先して使うのは、後々の管理が楽になるからです。

段落ブロック全体のテキスト色と背景色を変更

段落ブロックを選択して、Styleメニューから「テキスト」と「背景」のカラーを選択します。

段落ブロックにテキスト色と背景色を指定

段落ブロックのpタグにクラス属性が追加され、カラーはブロック全体に適用されます。

<p class="has-swl-pale-02-background-color has-background">段落ブロック全体のテキスト色と背景色を変更</p>

指定した範囲のテキスト色と背景色を変更

範囲を指定して、ツールバーオプションの「SWELL装飾」から「テキスト色」及び「背景色」を選択します。

指定した範囲のテキスト色と背景色の変更

指定した範囲にspanタグとクラス属性が追加され、カラーは指定した範囲にのみ適用されます。

段落ブロックにカラーが設定されている場合は、指定した範囲のみカラーが上書きされます。

<p>指定した範囲の<span class="swl-inline-color has-swl-deep-01-color">テキスト色</span>と背景色を変更</p>

カラーパレットの編集

カスタムカラーを変更したい時は、SWELL設定の「カラーパレット設定」から変更できます。

管理画面 ▶ SWELL設定 ▶ エディター設定 ▶ カラーセット ▶ カラーパレット設定

カラーパレット設定

カスタムカラーは、クラス属性で管理されているので、過去に挿入したカラーにも変更は反映されます。

また、編集画面のカラーパレットにも設定が反映されるので、編集時の使い勝手が悪くなることもありません。

編集画面のカラーパレット

カスタムカラーの初期設定がサイトの色と合わない時は、「カラーパレット設定」から色を変更して下さい。

最後に

毎回個別にカラーを指定して、style属性でテキスト色や背景色を変更することもできますが、後々の管理が面倒なので、よく使うカラーはカスタムカラーに登録して使う方法がおすすめです。

あえて欠点があるとすれば、テーマを乗り換えた際にカラーが反映されないことぐらいです。テーマを変更したい時は、カスタムカラーのCSSを新しいテーマの「追加CSS」にコピーして使って下さい。

コメント

コメントする

目次