【SWELL】テキストカラーと背景色の変更

【SWELL】テキストカラーと背景色の変更

SWELLのテキストカラーと背景色を変更する方法をまとておきます。

目次

テキストカラーと背景色の変更

テキストカラーと背景色の設定は、「サイト全体<ブロック<指定した範囲」の順で優先されます。

サイト全体

サイト全体の設定は、カスタマイザーの「基本カラー」から変更できます。

カスタマイザー ▶ サイト全体設定 ▶ 基本カラー

サイト全体のテキストカラーと背景色

ここでの設定はサイト全体に適用されます。必要であれば、メインカラーとリンクカラーも変更して下さい。

ブロック

ブロックを選択して、サイドバー(Styleメニュー)の「テキスト」と「背景」から変更できます。

ブロックのテキストカラーと背景色

ここでの設定はブロック全体に適用されます。また、サイト全体の設定を上書きします。

Styleメニューが表示されないブロックにテキストカラーと背景色を指定することはできません。

指定した範囲

範囲を指定して、ツールバーオプション(SWELL装飾)の「テキスト色」と「背景色」から変更できます。

指定した範囲のテキストカラーと背景色

ここでの設定は指定した範囲にのみ適用されます。また、サイト全体やブロックの設定を上書きします。

カスタムカラーの編集

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

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

カラーパレット設定

カラーを変更する時に表示されるカラーパレット下段8色がカスタムカラーです。

カスタムカラーは、SWELL独自のクラス属性で管理されているので、過去に挿入したカラーにも変更は反映されます。また、編集画面のカラーパレットにもカラーが反映されるので、使い勝手悪くなることもありません。

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

テキストカラーや背景色を変更する時は、管理が楽なカスタムカラーを優先して使うことをおすすめします。

最後に

最初にサイト全体のカラーを設定して、必要であればブロックや範囲を指定してカラーを上書きして下さい。

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

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

よかったらシェアしてね!

- シンプルなのに、高機能 -

swell_pr_banner

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

ブロックエディター完全対応のWordPressテーマ。

今日の一言

9月15日から始まったヘルプフルアップデートの影響でアクセスが微減。微妙に下がったページや、完全に飛んでしまったページもある。公式によると完了までに2週間程度かかるみたいなので、一時的なものだと思いたい。最近はSEOだけでアクセスを集めるのに限界を感じる。もう少しSNSにも力を入れた方がいいのかもしれない。ただ、上手く運用できる気がしない。

コメント

コメントする

目次