これから Nishiki Pro または Nishiki
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る

このページで紹介している機能は Nishiki Pro 製品版のみ利用できます。お試し版(無料)をご利用の方は、製品版の利用をご検討ください。

Gutenberg のブロックエディターは便利なんですけど、カラーの選び方がデフォルトのままではあまり柔軟ではないですよね。

例えば「カスタムカラー」を使えば好きな色を設定できますけど、別のブロックでも同じ色を使いたい場合は、また「カスタムカラーを選んで同じ色を選ぶ」ってところからスタートしてしまいます。この作業、地味に手間がかかる・・・

カスタムカラーは便利だけど、
欲しいカラーを都度選ばなきゃならない
これは手間がかかりますよね

というわけで、ここを改善するために「選んだカラーを保存できたり、カスタムカラーを選ばなくても、あらかじめ一覧に作ったカラーを表示しとけばいいんじゃないか」など、いろいろ考えていました。

そんな中、先日開催した Nishiki もくもく勉強会でも同様の要望がありましたので「これは早急にやらないとな!」と思って機能を実装しました。

目次

管理画面でカラーを作成できる機能を作りました

ワードプレスの管理画面から「Nishiki Pro」→「ブロックエディター管理」を選択してください。

ブロックエディター管理

次に「カラー」タブの中に「カラーパレット設定」がありますので、ここで使いたい色を設定してください。

カラーパレット設定で作った色が、ブロックエディターで使用できます。

カラーを編集する

カラーは編集できます。必要に応じて、お好みで色、名前、クラス名を変更してください。

※重要:クラス名は必ず入れてください

クラス名は CSS でカラーを適用するため、他のカラーのクラス名と重複しないよう、必ず入力してください。半角英数字(a-z,0-9)、ハイフン(-)、アンダーバー(_)のみ使えます。

カラーを新しく追加する

新しくカラーを追加する場合はカラーを追加ボタンを押してください。無制限で追加できます。

カラーを削除する

必要ないカラーは削除ボタンを押して消してください。ただし、消したカラーを使ったブロックがある場合は、カラーが適用されなくなるので注意してください。

ごちゃごちゃになってきたら初期化しよう

色々触ってみて、こんがらがってきたらカラーを初期設定に戻すボタンを押してください。カラーを初期化できます。

「カスタムカラー」はいまのところ廃止

今回の機能をつけたことにより、カスタムカラーを使う必要はなくなったので廃止しました(本ページ公開時点)。

というわけで、欲しいカラーは自分で好き勝手作ってみよう!

Nishiki テーマに関する情報は #wpnishiki をチェックしてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載したプロフェッショナル版 WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。