【THE THORテーマカラー】決められたパーツの色が自動的に変わる

 

Chiharu
Chiharu

今回は、WordPressテーマ「THE THOR」のテーマカラーについて。

テーマカラーは、決められたパーツの色をまとめて自動的に変えることができます。

 

THE THORテーマカラー以外の色のカスタマイズ方法は、下記のページを参考になさってください。

色のカスタマイズ

 Chiharu今回は、WordPressテーマ「THE THOR」で可能な色のカスタマイズについてまとめました。 ブログ配色の決め方 ブログを作成するときに使う色は[…]

the thor 色設定

 

THE THORのテーマカラーについて

 

THE THORは色のカスタマイズが簡単にできるように、テーマカラーを決めるだけで決まったパーツの色を変更できるように設計されています。

 

下記の画像はTHE THORのテーマカラーの変更前・変更後の画像です。赤(画像左)から青(画像右)へ、色が変わっているところにテーマカラーが反映されるようになっています。

 

TOPページ・投稿ページ、それぞれの画像を作成しましたので、だいたいの位置を確認してください。

 

Topページテーマカラー変更前the thor TOPページ
Topページテーマカラー変更後the thor テーマカラー

 

投稿ページテーマカラー変更前
投稿ページテーマカラー変更後the thor テーマカラー

 

THE THORのテーマカラーが反映されるところ

 

THE THORのテーマカラーが反映されるところを紹介していきます。

 

1.TOPページ ハンバーガーメニュー・サーチパネル
2.TOPページ ヘッダー検索窓
3.TOPページ カルーセルスライダー
4.TOPページ ピックアップ3記事
5.TOPページ メインカラム 記事一覧リスト
6.TOPページ 記事ランキング
7.TOPページ カテゴリごとの最新記事
8.TOPページ フッター SNS背景色
9.ウィジェットのタイトル
10.投稿 バイラル風デザインのアイキャッチ
11.投稿 Prev Next記事
12.投稿 関連記事
13.投稿 コメント

 

【テーマカラー1】TOPページ ハンバーガーメニュー・サーチパネル

 

the thor テーマカラー

 

TOPページのヘッダーレイアウトをシンプルを選択するとハンバーガーメニューの背景色にテーマカラーが反映されます。

 

the thor テーマカラー

 

検索アイコン・ハンバーガーメニューの上にマウスが乗ると、アイコンの色がテーマカラーに変わります。

 

【テーマカラー2】TOPページ ヘッダー検索窓

 

the thor テーマカラー

 

TOPページヘッダーエリアのヘッダー検索窓と注目キーワードを表示を選択すると、注目エリアの背景色にテーマカラーが反映されます。

 

the thor テーマカラー

 

検索窓の検索アイコンの上にマウスが乗ると、アイコンの色がテーマカラーに変わります。

 

【テーマカラー3】TOPページ カルーセルスライダー

 

the thor テーマカラー

 

TOPページカルーセルスライダーの表示を選択、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。

 

カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。

 

【テーマカラー4】TOPページ ピックアップ3記事

 

the thor テーマカラー

 

TOPページピックアップ3記事の表示を選択、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。

 

カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。

 

【テーマカラー5】TOPページ メインカラム 記事一覧リスト

 

the thor テーマカラー

 

TOPページメインカラム記事一覧リストは、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。

 

カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。

 

【テーマカラー6】TOPページ 記事ランキング

 

the thor テーマカラー

 

TOPページ記事ランキングは、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。

 

カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。

 

【テーマカラー7】TOPページ カテゴリごとの最新記事

 

the thor テーマカラー

 

TOPページカテゴリごとの最新記事は、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。

 

カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。

 

【テーマカラー8】TOPページ フッター SNSフォロー背景色

 

the thor テーマカラー

 

TOPページフッターのSNSフォロー背景は、色を指定していないとき、テーマカラーが反映されます。

 

SNSフォロー背景のカスタマイズ方法は、別ページで解説していますので参考になさってください。

 

【テーマカラー9】ウィジェットのタイトル

 

the thor テーマカラー

 

ウィジェットタイトルの色を指定していないとき、テーマカラーが反映されます。

 

ウィジェットの色の指定方法は、別ページで解説していますので参考になさってください。

 

【テーマカラー10】投稿 バイラル風デザインのアイキャッチ

 

the thor テーマカラー

 

投稿のページタイトルデザインをバイラル風を選択したとき、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。

 

カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。

 

【テーマカラー11】投稿 Prev Next記事

 

the thor テーマカラー

 

投稿のPrev Next記事の表示を選択すると「Prev Next」の背景にテーマカラーが反映されます。

 

【テーマカラー12】投稿 関連記事

 

the thor テーマカラー

 

投稿の関連記事設定の表示を選択すると、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。

 

カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。

 

【テーマカラー13】投稿ページ コメント

 

the thor テーマカラー

 

投稿のコメントを許可すると、日時・コメントを送信ボタンにテーマカラーが反映されます。

 

THE THOR テーマカラーのカスタマイズ方法

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー  基本スタイル設定基本設定>基本スタイル設定>テーマカラーを指定

 

カラーパネル

色の指定をしてカスタマイザー公開 をクリック

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力する

 


 

おつかれさまでした。

 

以上、【THE THORテーマカラー】決められたパーツの色が自動的に変わるでした。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

お読みいただき、ありがとうございました。

Chiharu

Chiharu

この記事を書いたのは

元歯科衛生士のWebデザイナー。素の自分を出せるようにブログをはじめました。お伝えしているのは、ブログのはじめ方と毎日を楽しく過ごすコツについて。