【THE THOR(ザ・トール)】背景色などのカラー設定をマスターしよう!

ゆず
先生!色の設定が色々あり過ぎて全然わかりません!
ネコ先生
ネコ先生
全然ですか、、、(-_-;)
少しは勉強してくださいね~

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

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

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

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

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

カラー設定を理解しよう

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

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

なので、

  • サイト全体のカラー設定
  • ヘッダー部のカラー設定
  • メインカラムエリアのカラー設定
  • サイドカラムエリアのカラー設定
  • フッター部のカラー設定
  • アーカイブページ・投稿ページ・固定ページのカラー設定

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

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

サイト全体のカラー設定

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

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

基本スタイル設定

「基本設定[THE]⇒「基本スタイル設定」

テーマカラー

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

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

基本スタイル設定

元のテーマカラー
基本スタイル設定テーマカラー修正前
修正後のテーマカラー
基本スタイル設定テーマカラー修正後1

投稿内テキストリンク色

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

基本スタイル設定投稿内テキストリンク色

元のテキストリンク色
投稿内テキストリンク色修正前
修正後のテキストリンク色
投稿内テキストリンク色修正後

全体の背景色を指定

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

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

基本スタイル設定背景色

元の背景色
基本スタイル設定背景色修正前
修正後の背景色
基本スタイル設定背景色修正後

全体の背景画像を登録

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

基本スタイル設定背景画像

基本スタイル設定背景画像修正後

ヘッダー部のカラー設定

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

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

ヘッダー部

ヘッダーエリア設定

「共通エリア[THE]」⇒「ヘッダーエリア設定」

ヘッダーの背景色

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

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

ヘッダー背景色

元のヘッダー背景色
ヘッダー背景色修正前
修正後の背景色
ヘッダー背景色修正後

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

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

ヘッダーメニューパネルカラー

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

「共通エリア[THE]」⇒「ヘッダーボトムエリア設定」

ヘッダー検索窓の背景色

ヘッダーの検索窓を表示させた時の背景色を設定します。

ヘッダー検索窓の背景色
ヘッダー検索窓の背景色

メインビジュアル設定

「TOPページ設定[THE]」⇒「メインビジュアル設定

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

画像は「静止画」ですが、「YouTube背景動画」「スライドショー」の場合も同様です。

メインビジュアル設定マスクカラー設定

メインビジュアル下の注目エリア設定

「TOPページ設定[THE]」⇒「メインビジュアル下の注目エリア設定

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

メインビジュアル下の注目エリアの色を設定

ピックアップ3記事設定

「TOPページ設定[THE]」⇒「ピックアップ3記事設定
ピックアップ3記事を表示させた場合にトップ1に設定した画像が見出し部分になり、その画像のカラー系マスクの色を設定することができます。
ピックアップ3記事設定マスクカラーの色を設定

記事ランキング設定

「TOPページ設定[THE]」⇒「記事ランキング設定
記事ランキングを表示させた場合に画像の箇所の色を設定することができます。
記事ランキング設定マスクカラー設定

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

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

「共通エリア[THE]」⇒「メインカラムエリア設定」

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

メインカラムウィジェット見出しの色

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

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

「共通エリア[THE]」⇒「サイドカラムエリア設定」
ウィジェットの見出しの色を設定します。
サイドカラムエリア設定見出し色設定

フッター部のカラー設定

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

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

「共通エリア[THE]」⇒「フッタートップエリア設定[CTA]」

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

フッタートップエリア設定[CTA]マスクカラー

フッターエリア設定

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

「共通エリア[THE]」⇒「フッターエリア設定」

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

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

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

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

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

フッターエリアにウィジェットを設定した場合の見出しの色を設定することができます。
フッターウィジェット見出しデザイン設定

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

「基本設定[THE]」⇒「アイキャッチ画像の設定」⇒「アイキャッチホバーエフェクトの設定」

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

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

アイキャッチホバーエフェクトの設定

アイキャッチマウスオーバー

サイト内(外)リンクボタンカラー設定

「基本設定[THE]」⇒「タグ管理設定」⇒「ボタンカラー設定」

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

サイト内外リンクボタンの色を指定

サイト内外リンクボタンの色を指定デモ

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

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

「アーカイブページ設定[THE]」⇒「記事一覧リスト設定」

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

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

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

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

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

「投稿ページ設定[THE]」および「固定ページ設定[THE]」⇒「記事下CTA設定」
投稿記事の下部にCTAを表示させる場合、CTA周りの枠線や背景色を設定します。
画像では周りの枠線のカラーを変更しています。べた塗背景を選択すると、枠の内側の白い部分の色が変更になります。
記事下CTA設定カラー設定

まとめ

まとめ

いかがでしたか?

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

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

メルマガ登録バナー1

最新情報をチェックしよう!