SWELL カラーパレットの設定方法｜お気に入りの配色を登録して作業効率をアップする方法

SWELLのカラーパレットの設定方法を、初めての方でも迷わずできるよう丁寧に解説します。

それではご覧ください。

SWELLのカラーパレットとは？できることを簡単に解説

SWELLの「カラーパレット設定」は、よく使う色をあらかじめ登録しておける機能です。

見出し、ボタン、ボックス装飾など、色を指定するあらゆる場面でパレットをクリックするだけで同じ色を呼び出せるため、ブログ全体のデザインを統一しやすくなるのが大きなメリットです。

毎回カラーコードを入力したり、カラーピッカーで似た色を探したりする必要がなくなるため、作業効率が大幅にアップします。

配色の管理が苦手な初心者でも、登録した色を選ぶだけで簡単に美しいデザインを作れます。

カラーパレット機能で作業効率が上がる理由

• 見出しやボタンなどで 同じ色をワンクリックで呼び出せる
• 色コードを毎回入力する必要がない
• その場で迷わず、記事制作に集中できる

特に複数の記事を書く場合、作業スピードが体感で大きく変わります。

デザイン統一に役立つ配色管理のメリット

• 色のバラつきがなくなり、サイト全体が美しく見える
• 読者に「統一感のあるブログ」という印象を与えられる
• ブランドカラーを決めておけば 個性・世界観を表現しやすい

ブログのデザイン品質が上がるため、結果的に 離脱防止や滞在時間アップ にもつながります。

SWELLのカラーパレットが使い方｜反映されるブロックと装飾まとめ

ここでは、カラーパレットがどこに反映され、どのように使えるのかをご紹介します。

SWELLのカレーパレットが反映される場所は以下のようになります。

カラーパレットをツールバーから使う方法

• エディター画面での作業です。

エディター画面でインラインの文字色や背景色を変更したい場合は、ツールバーの「色設定」からカラーパレットを呼び出して選択できます。

1. 『さらに表示 → ハイライト』を使う方法

WordPress標準機能のメニューを使います。

以下のピックアップメニューが表示されます。
タブの切り替えで、選択したエリアの「テキスト」や「背景」の色をカラーパレットから設定できます。

2. 『SWELL装飾 → テキスト色／背景色』を使う方法

SWELL専用の拡張機能を使います。

「テキスト色」と「背景色」の両方で、以下のピックアップメニューが表示されます。
「テキスト色」や「背景色」をカラーパレットから設定できます。

SWELL装飾を使って「テキスト色」「背景色」をカラーパレットから設定したサンプルです。

表示の違い

• 背景の縦幅
  • ハイライトでは、幅（縦横）が狭く表示されます。
  • SWELL装飾では、幅（縦横）が広く表示されます。（的確）
• 文字色
  • ハイライトでは、背景を設定しても文字色は変わりません。
  • SWELL装飾では、濃い色（4色）を背景に設定した場合、文字色は白色に変わります。

ツールバーのオプション設定で使いやすく

SWELL装飾を頻繁に使って「テキスト色」や「背景色」を変更する場合は、トップツールバーのオプション設定でSWELL設定を「1階層」に割り当てると、よりスムーズに操作できます。

• エディター画面左端の『︙』アイコン（オプション）をクリックします。
• 表示されたメニューから 『SWELL設定』 を選びます。
• 表示項目のチェックを『ON / OFF』して、表示内容を調整します。

エディターでブロックの色を変更する方法

ここでは、エディター画面でブロックの文字色や背景色を変更する場合の手順を紹介します。

まず、画面右上の「設定」アイコンをクリックし、「ブロック」タブを開きます。

ブロックタブの中にある『スタイル』タブをクリックします。
「色」項目の『テキスト』をクリックすると以下のようにカラーパレットが表示されます。
『テキスト』の色をカラーパレットから設定できます。

同様に…
「色」項目の『背景』をクリックすると以下のようにカラーパレットが表示されます。
『背景』の色をカラーパレットから設定できます。

SWELLのカラーパレットを設定する方法（基本手順2通り）

SWELLのカラーパレットは、カスタマイザーとSWELL設定の2つから編集できます。
ここでは、それぞれの基本的な設定手順をご紹介します。

カラーパレットの配色について

カラーパレットの配色は、オリジナルカラー（5色）とカラーパレット（8色）で構成されています。

オリジナルカラーの設定方法（メインカラーの色変更）

オリジナルカラー（5色）のうち、左側にある「メインカラー」と「メインカラー（薄）」の2色はカスタマイザーから変更できます。ただし、設定できるのは「メインカラー」のみで、「メインカラー（薄）」は自動的に生成されます。

Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

「カスタマイザー」画面で以下の手順で進み、詳細を設定します。

詳細設定の項目から『メインカラー』を選び、サイトに合う色に変更します。

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

カラーパレットの設定は、SWELL設定のエディター設定で行います。

Menu『WordPress管理＞ダッシュボード＞SWELL設定＞エディター設定』をクリックします。

エディター設定画面が表示されます。

エディター設定画面の「カラーセット」タブの中にある「カラーパレット設定」項目で『8個の色』を設定します。

まとめ！SWELLカラーパレットの設定方法｜お気に入りの配色を登録して作業効率をアップする方法

SWELLのカラーパレット機能を使えば、記事ごとに色を探す手間がなくなり、見出しやボックス、ボタンなどを いつでも統一したデザインで使える ようになります。
基本の設定方法は「テーマ設定から登録する方法」と「エディター画面から設定する方法」の2通り。どちらも数分で完了し、初心者でも迷わずカスタマイズできます。

ブランドカラーやよく使う色をあらかじめ登録しておくことで、デザインの統一感が出て読みやすさも向上。ブログ全体のクオリティを底上げできる便利な機能なので、ぜひ積極的に活用してみてください。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／