【SWELL】カラーパレットの機能解説

SWELL カラーパレットの機能解説

今回はワードプレステーマSWELLの「カラーパレットをカスタマイズする方法」について解説します。

ブロックエディター『Gutenberg』では段落ブロックの文字色や背景色をカラーパレットを使って変更することができます。

『おまえは何を当たり前のことを…』と思われたかもしれませんが、ビジュアルエディターだとこんな風に文字の背景色の一部だけ変えたりするにはプラグインが必要です。

SWELLではワードプレス標準搭載の機能も使いやすくカスタマイズされており、「カラーパレット」においても、オリジナルのカスタマイズが施されています。

この記事のSWELL公式マニュアルはこちら

カラーパレットの配色をカスタマイズする方法 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

カラーパレットとは

ブロックエディターでは文字色・背景色をカラーパレットから変更することができます。

文字色・背景色の変更はよく使う機能なので、ブログを書くにあたってかなりお世話になる機能です。

カラーパレットとは
カラーパレットのキャプチャ

SWELL カラーパレットの設定方法

SWELLでは8色を自由にカスタマイズできる

SWELLのカラーパレットは5色が固定、残りの8色を自由にカスタマイズすることができます。

SWELL カラーパレット
SWELL カラーパレット

カラーパレットの設定は、「SWELL設定」→「エディター設定」にある「カラーセット」タブで行います。

SWELL カラーパレット設定
SWELL カラーパレット設定画面

カラーパレット【濃】カラーパレット【淡】の各4色を変更するとカラーパレットに表示される色が更新されます。

SWELL カラーパレットの嬉しい工夫

その1 カラーパレットの表示の仕方の気遣い

現在のブロックエディターでは、仕様上の都合で「文字色」と「背景色」で同じカラーパレットが表示されるようになっています。

SWELLではこの仕様に鑑みて、「文字色」と「背景色」どちらにも対応できるように、カラーパレット設定画面で「濃い色」と「淡い色」を4色ずつ区分けするように表示しています。

もちろん使い手が気をつければいいだけの話なのですが、こういった細かい配慮がとても嬉しいです!

その2 「濃い色」の背景色をセットすると自動的に文字色が白になる

SWELLでは背景色に濃い色をセットした場合、自動でテキストの文字色を白に変更する工夫がされています。

濃い背景色に濃い文字色を設定してしまうと可読性が悪くなりますが、そういった問題を自動的に解決してくれるわけです。
(素敵です!)

SWELL 文字色の自動最適化

ブロックエディター標準搭載のカラーパレットをカスタマイズする方法

ブロックエディター標準搭載のカラーパレットには、SWELLのようにパレットに表示する色をカスタマイズする機能が搭載されていません。

カラーパレットをカスタマイズするには、プラグインをインストールするか、function.phpを編集する必要があります。

方法その1 Custom Color Palette for Gutenbergプラグインをインストールする

おそらくもっとも簡単な方法です。
インストールすると最大19色カラーが設定できるようになります。

STEP
Custom Color Palette for Gutenbergをインストール

有効化を忘れずに。

Custom Color Palette for Gutenbergプラグイン
STEP
「外観」から「Custom Color Palette」を開く

「外観」→「カスタマイズ」に「Custom Color Palette」が追加されています。

メニューを開くと「Main Colors」「Grayscale Colors」「Primary Colors」が表示されます。

Custom Color Palette for Gutenbergプラグインの設定方法
Custom Color Palette for Gutenbergプラグインの設定方法
STEP
追加したい色をチェック

「Main Colors」「Grayscale Colors」「Primary Colors」それぞれの赤線で囲ったエリアにあるチェックボックスの数だけカラーパレットを追加することができます。

Custom Color Palette for Gutenbergプラグイン Main Colors
メインカラー
Custom Color Palette for Gutenberg Grayscale Colors
グレイスケールカラー
Custom Color Palette for Gutenberg Primary Colors
プライマリーカラー
追加できる色の数
  • 「Main Colors」で最大7色
  • 「Grayscale Colors」で最大4色
  • 「Primary Colors」で最大8色
STEP
「公開」するとカラーパレットの更新完了

「公開」をクリックすると「Custom Color Palette」の変更が適用されます。

Custom Color Palette for Gutenbergプラグイン 更新方法
「公開」クリック

エディターで表示されるカラーパレットを確認してください。

Custom Color Palette for Gutenbergプラグイン 変更確認

ご覧の通りエディターで表示されているカラーパレットが更新されています。
プラグインを入れるだけなので、どなたでも簡単にカラーパレットをカスタマイズできます。

方法その2 functions.phpでコードを記述する

ワードプレスのfunctions.phpを編集することで表示されるカラーパレットをカスタマイズすることができます。

コードの記述に慣れていて、プラグインをインストールしたくないかたにおすすめです。

当ブログでは実践しておりませんので、詳細は割愛します。

気になる方は「functions.php カラーパレット」と検索すれば、該当の情報が出てきますので、お手数ですが検索してみてください。

ビジュアルエディターで文字の背景色を変える方法

このブログで紹介しているTHE THORのようにブロックエディターに対応していないワードプレステーマだとビジュアルエディター(旧エディター)を使うことになると思いますが、ビジュアルエディターでは文字の背景色を変えることができません。

この問題を解決するには「TinyMCEAdvanced」というプラグインをインストールする必要があります。

ワードプレス プラグイン TinyMCE Advanced
絶賛インストール中…

「TinyMCE Advanced」をインストールするとエディターツールバーの項目がカスタマイズできるようになります。

「TinyMCE Advanced」の設定画面は、ワードプレス管理画面の左側メニューの「設定」→「Advanced Editor Tools」です。

あとは追加したい「文字背景色」のボタンを上にドラッグするだけでOKです。

TinyMCE Advanced 文字背景色ボタンの追加
TinyMCE Advanced の設定画面

まとめ

SWELLのカラーパレットにはデフォルトでパレットをカスタマイズできる機能が搭載されているので、余計な手間をかけずにブログを書くとこができると思います。

また可読性が確保されるよう自動的に文字色が変更されるなど開発者の心遣いも嬉しいです。

ブログを書いていると、「ここ強調したい」ってことが多々あるので、そんなときにカラーパレットでサッと変更できると「やっぱりブロックエディターは便利だな」と思います。

カラーパレットに限らず、SWELLのブロックエディターを使うとブログを簡単に・楽しく・素早く書けるので、ブログを継続するハードルが一気に下がると思います。

ビジュアルエディターで書くよりずっと楽ちんです!

興味持っていただけたら、ぜひ公式サイトで書き心地体験していってください。

もっと気軽に、楽しく記事を書こう。

SWELL カラーパレットの機能解説

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次
閉じる