数多くのTCDテーマに実装されているサイトのカラーオプション。サイト全体の色を変更する機能です。当記事で、基本的な仕様と使い方をご紹介いたします。
TCDのカラーオプションの基本仕様
WordPressテーマ「CANON」（TCD109）の例
基本的には、次の3つの設定オプションが用意されています。デモサイトとは違う色にすぐに変更可能です。
| プリセットカラー | TCDのデザイナーチョイスの5色。綺麗に見えるカラーがあらかじめ用意されています。テーマによって異なります。 |
| アクセントカラー | 自分で選びたい方はこちらで設定可能です。カラーピッカーやカラーコードを使って自由に設定できます。 |
| 記事本文内のリンク文字色 | 記事本文内のリンク文字色をここで一括設定できます。 |
テーマのリリース時期によって仕様が異なるので、一部項目が無かったり別のオプションが存在するものもありますが、実現できることは基本的にサイト全体のカラーの一括変更です。
デザイン的にここは色を統一した方がいいという箇所は、すべて連動して変更されるようになっています。
各種カラーオプションの使い方
TCDテーマに実装されている各種カラーオプションの使い方を解説いたします。
プリセットカラー
TCDのデザイナーチョイスの配色があらかじめ用意されています。
※WordPressテーマ「PORTAL（TCD095）」以降にリリースされているテーマに実装。
ということで今回は、PORTALを例にご紹介します。デザインの特性上「背景色」という項目も用意されています。
プリセットカラーをクリックすると「背景色」「記事本文内のリンク文字色」も連動して変化する仕様です。選んだカラーに合う背景色が自動で提案されるわけです。※テーマのデザインによってプリセットカラー、設定項目、連動仕様は異なります。
色が違うとここまで印象が変わります。以下はPORTALのデモサイトのプリセットカラー変更例です。
スカイブルー
エメラルド
フラミンゴ
キャロット
チョコレート
アクセントカラー
アクセントカラーは、その名の通りサイトのアクセントとなるカラーを設定する項目です。テーマによって「メインカラー」や「サブカラー」という名称で実装されているものもありますが、できることは基本的に同じです。サイトの色を自由に設定したい時に使います。
上記のようなカラーピッカーが表示されるので、お好きな色を選択してください。上部にはカラーコードも入力できますし、右側のバーで濃淡を調整可能です。
記事本文内のリンク文字色
記事本文内のリンク文字色を設定するオプションです。
例えば「TCDテーマの最新アップデート情報はこちら」のような本文内のリンク文字（aタグ）の色を一括設定する機能です。
テーマによって、プリセットカラーと連動したり、ホバー前後で別の色を設定できるものもあります。
比較的新しいTCDテーマでは、ホバー前の文字色のみを設定できて、ホバー時は下線が表示される仕様に統一しています。色はカラーピッカーを使って自由に設定可能です。
まとめ
多くのTCDテーマに実装されているカラーオプションについて解説しました。テーマのデザイン、サイトのコンセプトによって配色は色々変えたくなりますよね。
TCDテーマでは、操作が簡単なカラーオプションが充実しており、デザインに基づいて連動する箇所も計算されています。ぜひご活用ください。
カラーや配色を決める際に役立つツールはこちらにまとめています。
