【THE THOR（ザ・トール）をあなた色に】カラー設定をマスターしよう！

先生！色の設定が色々あり過ぎて全然わかりません！

全然ですか、、、(-_-;)
少しは勉強してくださいね～

高機能なWordPressテーマ「THE THOR（ザ・トール）」では、事細かい設定が可能になっています。

もちろん、カラー設定も細部にわたって設定することができますが、テーマに慣れない内は何処を設定すると何処の色が変わるか分からなくて混乱してしまいます。

これでは設定に要らない時間を使い、コンテンツ作成が進まないことにもなりかねません。

私自身もたまに分からなくなってしまうので、忘備録としてカラー設定について書いていきます。

まずはどこの色が変わるか、カラー設定を理解しよう

THE THOR（ザ・トール）では、様々な場所のカラー設定をすることができます。

ただ設定箇所が非常に多岐にわたるので、どこを設定するとどこが変わるのかを理解するのが大変です。

なので、

と言う感じでグループごとにカラー設定を解説していきます。

各設定箇所を理解して、あなたのサイトをあなた色に染めていきましょう。

サイト全体のカラー設定

サイト全体の印象を決めるカラーを設定しましょう。

メインビジュアルの画像、サイトのコンセプトテーマ、色のバランスなどを考えながら決めていきます。

基本スタイル設定

テーマカラー

サイト全体の基本色を設定します。

一部、後から個別に設定ができる箇所もあります。

元のテーマカラー

修正後のテーマカラー

投稿内テキストリンク色

投稿記事内でテキストリンクを使用している場合、そのテキスト部分の色を設定します。

元のテキストリンク色

修正後のテキストリンク色

全体の背景色を指定

サイト全体の背景色を設定します。

ここを変えると印象がガラリと変わりますね。

元の背景色

修正後の背景色

全体の背景画像を登録

全体の背景を画像に変更します。

ヘッダー部のカラー設定

次にヘッダー周りの色を設定しましょう。

あなたのサイトに訪問者さんが訪れた時に一番最初に目に入る部分なので、サイトテーマに沿った印象の良い配色にしましょう。

ヘッダーエリア設定

ヘッダーの背景色

サイトロゴやグローバルメニューの背景色を設定します。

グローバルメニューなどの「ヘッダーのテキストカラーを選択」では黒文字か白文字を選択できます。

元のヘッダー背景色

修正後の背景色

メニューパネルのウィジェット見出しの色を指定

メニューパネルを表示させた時のウィジェット見出しの色を設定します。

ヘッダーボトムエリア設定

トップページのメインビジュアル画像にカラー系マスクを適用した場合、マスクのカラーを設定することができます。

「メインビジュアル下の注目エリア」を表示するを選択した場合、背景色を設定することができます。

ピックアップ3記事設定

記事ランキング設定

メインカラムエリアのカラー設定

トップページのメインカラムエリアでウィジェットを設定している場合のカラーを設定します。

例として、トップページ上部エリアにウィジェット「タグクラウド」を設定して見出しの色を変更しました。

サイドカラムエリアのカラー設定

サイドカラムエリアのカラー設定を行います。

フッター部のカラー設定

サイト下部のフッター部分のカラー設定を行います。

フッタートップエリア設定[CTA]

フッターCTAを表示させた場合、背景画像のマスクカラーを設定することができます。

フッターエリア設定

フッターエリアのカラー設定を行います。

SNSフォローエリアの背景色

SNSフォローエリアの背景色を変更することができます。

分かりやすい様に周りとちょっと違う色にしてみました。

ウィジェット見出しデザイン設定

マスク系エフェクト利用時のマスクカラーを指定

「アイキャッチホバー時のエフェクトを選択」で「マスク」「マスクズーム」「マスクズーム回転」のいずれかを選択した時に設定します。

サイト内のすべてのアイキャッチ画像にマウスオーバーした時の画像をカバーする色を設定することができます。

サイト内（外）リンクボタンカラー設定

タグを作成した時のリンクボタンの色を設定します。

アーカイブページのカラー設定

ここではアーカイブページの色を設定していきます。

NEW&ピックアップリボン設定

「NEW」などのリボン色を設定します。

投稿ページおよび固定ページのカラー設定

ここでは投稿ページの色を設定します。

まとめ

いかがでしたか？

今回はTHE THOR（ザ・トール）のカラー設定の方法を解説していきました。

私自身の忘備録として書きましたが、他のTHE THOR（ザ・トール）を使う人達にも参考になれば幸いです。