【THE THORテーマカラーのカスタマイズ】初心者向けに画像付きで解説

the thor テーマカラー
Chiharu
Chiharu
今回は、THE THOR(ザ・トール)テーマカラーのカスタマイズ方法についてお伝えします。

 

THE THORテーマカラー以外のカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

THE THORテーマカラー以外の色のカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

Chiharu今回は、THE THOR(ザ・トール)色のカスタマイズについて、お伝えします。 ブログ配色の決め方 ブログを作成するときに使う色は3色にしぼる。この3色にしぼることがポイ[…]

the thor 色設定

 

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

 

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

 

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

 

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

 

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

 

投稿ページテーマカラー変更前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サポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 


 

おつかれさまでした。

 

以上、【THE THORテーマカラーのカスタマイズ】初心者向けに画像付きで解説でした。

 

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

 

お問い合わせはこちら

 

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

Chiharu