
THE THORテーマカラー以外のカスタマイズ方法は、こちらにまとめてありますので参考になさってください。
初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]
THE THORテーマカラー以外の色のカスタマイズ方法は、こちらにまとめてありますので参考になさってください。
Chiharu今回は、THE THOR(ザ・トール)色のカスタマイズについて、お伝えします。 ブログ配色の決め方 ブログを作成するときに使う色は3色にしぼる。この3色にしぼることがポイ[…]
- 1 THE THORのテーマカラーについて
- 2 THE THORのテーマカラーが反映されるところ
- 2.1 【テーマカラー1】TOPページ ハンバーガーメニュー・サーチパネル
- 2.2 【テーマカラー2】TOPページ ヘッダー検索窓
- 2.3 【テーマカラー3】TOPページ カルーセルスライダー
- 2.4 【テーマカラー4】TOPページ ピックアップ3記事
- 2.5 【テーマカラー5】TOPページ メインカラム 記事一覧リスト
- 2.6 【テーマカラー6】TOPページ 記事ランキング
- 2.7 【テーマカラー7】TOPページ カテゴリごとの最新記事
- 2.8 【テーマカラー8】TOPページ フッター SNSフォロー背景色
- 2.9 【テーマカラー9】ウィジェットのタイトル
- 2.10 【テーマカラー10】投稿 バイラル風デザインのアイキャッチ
- 2.11 【テーマカラー11】投稿 Prev Next記事
- 2.12 【テーマカラー12】投稿 関連記事
- 2.13 【テーマカラー13】投稿ページ コメント
- 3 THE THOR テーマカラーのカスタマイズ方法
THE THORのテーマカラーについて
THE THORは色のカスタマイズが簡単にできるように、テーマカラーを決めるだけで決まったパーツの色を変更できるように設計されています。
下記の画像はTHE THORのテーマカラーの変更前・変更後の画像です。(画像左)から
(画像右)へ、色が変わっているところにテーマカラーが反映されるようになっています。
TOPページ・投稿ページ、それぞれの画像を作成しましたので、だいたいの位置を確認してください。




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ページ ハンバーガーメニュー・サーチパネル
TOPページのヘッダーレイアウトをシンプルを選択するとハンバーガーメニューの背景色にテーマカラーが反映されます。
検索アイコン・ハンバーガーメニューの上にマウスが乗ると、アイコンの色がテーマカラーに変わります。
【テーマカラー2】TOPページ ヘッダー検索窓
TOPページヘッダーエリアのヘッダー検索窓と注目キーワードを表示を選択すると、注目エリアの背景色にテーマカラーが反映されます。
検索窓の検索アイコンの上にマウスが乗ると、アイコンの色がテーマカラーに変わります。
【テーマカラー3】TOPページ カルーセルスライダー
TOPページカルーセルスライダーの表示を選択、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー4】TOPページ ピックアップ3記事
TOPページピックアップ3記事の表示を選択、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー5】TOPページ メインカラム 記事一覧リスト
TOPページメインカラム記事一覧リストは、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー6】TOPページ 記事ランキング
TOPページ記事ランキングは、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー7】TOPページ カテゴリごとの最新記事
TOPページカテゴリごとの最新記事は、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー8】TOPページ フッター SNSフォロー背景色
TOPページフッターのSNSフォロー背景は、色を指定していないとき、テーマカラーが反映されます。
SNSフォロー背景のカスタマイズ方法は、別ページで解説していますので参考になさってください。
【テーマカラー9】ウィジェットのタイトル
ウィジェットタイトルの色を指定していないとき、テーマカラーが反映されます。
ウィジェットの色の指定方法は、別ページで解説していますので参考になさってください。
【テーマカラー10】投稿 バイラル風デザインのアイキャッチ
投稿のページタイトルデザインをバイラル風を選択したとき、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー11】投稿 Prev Next記事
投稿のPrev Next記事の表示を選択すると「Prev Next」の背景にテーマカラーが反映されます。
【テーマカラー12】投稿 関連記事
投稿の関連記事設定の表示を選択すると、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー13】投稿ページ コメント
投稿のコメントを許可すると、日時・コメントを送信ボタンにテーマカラーが反映されます。
THE THOR テーマカラーのカスタマイズ方法

- WordPressのダッシュボード
- 外観
- カスタマイズ



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

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

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。
これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。
おつかれさまでした。
以上、【THE THORテーマカラーのカスタマイズ】初心者向けに画像付きで解説でした。
わからないことや、ご相談は、お気軽にお声がけくださいね。
お読みいただき、ありがとうございました。
Chiharu