SWELLで記事中のテキスト色や背景色を変更する方法をまとめておきます。
カスタムカラーを優先して使う
テキスト色や背景色を変更する時は、できるだけカラーパレットの下段8色から選択することをおすすめします（カーソルを載せた時に「カスタム」と表示されるカラー）。
下段8色のカスタムカラーは、SWELL独自のCSSで管理されており、管理画面の「カラーパレット設定」からいつでも変更できるからです。ここでカラーを変更すれば、記事中のカラーも一括で変更できます。
カスタムカラーを優先して使うのは、後々の管理が楽になるからです。
段落ブロック全体のテキスト色と背景色を変更
段落ブロックを選択して、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設定の「カラーパレット設定」から変更できます。
カスタムカラーは、クラス属性で管理されているので、過去に挿入したカラーにも変更は反映されます。
また、編集画面のカラーパレットにも設定が反映されるので、編集時の使い勝手が悪くなることもありません。
カスタムカラーの初期設定がサイトの色と合わない時は、「カラーパレット設定」から色を変更して下さい。
最後に
毎回個別にカラーを指定して、style属性でテキスト色や背景色を変更することもできますが、後々の管理が面倒なので、よく使うカラーはカスタムカラーに登録して使う方法がおすすめです。
あえて欠点があるとすれば、テーマを乗り換えた際にカラーが反映されないことぐらいです。テーマを変更したい時は、カスタムカラーのCSSを新しいテーマの「追加CSS」にコピーして使って下さい。
コメント