今回は、WordPressテーマ「THE THOR」のテーマカラーについて。
テーマカラーは、決められたパーツの色をまとめて自動的に変えることができます。
THE THORテーマカラー以外の色のカスタマイズ方法は、下記のページを参考になさってください。
Chiharu今回は、WordPressテーマ「THE THOR」で可能な色のカスタマイズについてまとめました。 ブログ配色の決め方 ブログを作成するときに使う色は[…]
- 1 THE THORのテーマカラーについて
- 2 THE THORのテーマカラーが反映されるところ
- 2.1 【テーマカラー１】TOPページ ハンバーガーメニュー・サーチパネル
- 2.2 【テーマカラー２】TOPページ ヘッダー検索窓
- 2.3 【テーマカラー３】TOPページ カルーセルスライダー
- 2.4 【テーマカラー４】TOPページ ピックアップ３記事
- 2.5 【テーマカラー５】TOPページ メインカラム 記事一覧リスト
- 2.6 【テーマカラー６】TOPページ 記事ランキング
- 2.7 【テーマカラー７】TOPページ カテゴリごとの最新記事
- 2.8 【テーマカラー８】TOPページ フッター SNSフォロー背景色
- 2.9 【テーマカラー９】ウィジェットのタイトル
- 2.10 【テーマカラー１０】投稿 バイラル風デザインのアイキャッチ
- 2.11 【テーマカラー１１】投稿 Prev Next記事
- 2.12 【テーマカラー１２】投稿 関連記事
- 2.13 【テーマカラー１３】投稿ページ コメント
- 3 THE THOR テーマカラーのカスタマイズ方法
THE THORのテーマカラーについて
THE THORは色のカスタマイズが簡単にできるように、テーマカラーを決めるだけで決まったパーツの色を変更できるように設計されています。
下記の画像はTHE THORのテーマカラーの変更前・変更後の画像です。
（画像左）から
（画像右）へ、色が変わっているところにテーマカラーが反映されるようになっています。
TOPページ・投稿ページ、それぞれの画像を作成しましたので、だいたいの位置を確認してください。
THE THORのテーマカラーが反映されるところ
THE THORのテーマカラーが反映されるところを紹介していきます。
１．TOPページ ハンバーガーメニュー・サーチパネル
２．TOPページ ヘッダー検索窓
３．TOPページ カルーセルスライダー
４．TOPページ ピックアップ３記事
５．TOPページ メインカラム 記事一覧リスト
６．TOPページ 記事ランキング
７．TOPページ カテゴリごとの最新記事
８．TOPページ フッター SNS背景色
９．ウィジェットのタイトル
１０．投稿 バイラル風デザインのアイキャッチ
１１．投稿 Prev Next記事
１２．投稿 関連記事
１３．投稿 コメント
【テーマカラー１】TOPページ ハンバーガーメニュー・サーチパネル
TOPページのヘッダーレイアウトをシンプルを選択するとハンバーガーメニューの背景色にテーマカラーが反映されます。
検索アイコン・ハンバーガーメニューの上にマウスが乗ると、アイコンの色がテーマカラーに変わります。
【テーマカラー２】TOPページ ヘッダー検索窓
TOPページヘッダーエリアのヘッダー検索窓と注目キーワードを表示を選択すると、注目エリアの背景色にテーマカラーが反映されます。
検索窓の検索アイコンの上にマウスが乗ると、アイコンの色がテーマカラーに変わります。
【テーマカラー３】TOPページ カルーセルスライダー
TOPページカルーセルスライダーの表示を選択、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー４】TOPページ ピックアップ３記事
TOPページピックアップ３記事の表示を選択、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー５】TOPページ メインカラム 記事一覧リスト
TOPページメインカラム記事一覧リストは、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー６】TOPページ 記事ランキング
TOPページ記事ランキングは、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー７】TOPページ カテゴリごとの最新記事
TOPページカテゴリごとの最新記事は、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー８】TOPページ フッター SNSフォロー背景色
TOPページフッターのSNSフォロー背景は、色を指定していないとき、テーマカラーが反映されます。
SNSフォロー背景のカスタマイズ方法は、別ページで解説していますので参考になさってください。
【テーマカラー９】ウィジェットのタイトル
ウィジェットタイトルの色を指定していないとき、テーマカラーが反映されます。
ウィジェットの色の指定方法は、別ページで解説していますので参考になさってください。
【テーマカラー１０】投稿 バイラル風デザインのアイキャッチ
投稿のページタイトルデザインをバイラル風を選択したとき、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー１１】投稿 Prev Next記事
投稿のPrev Next記事の表示を選択すると「Prev Next」の背景にテーマカラーが反映されます。
【テーマカラー１２】投稿 関連記事
投稿の関連記事設定の表示を選択すると、カテゴリイメージカラーの色を指定していないとき、カテゴリ名の背景色にテーマカラーが反映されます。
カテゴリイメージカラーの色を指定する方法は別ページで解説していますので、参考になさってください。
【テーマカラー１３】投稿ページ コメント
投稿のコメントを許可すると、日時・コメントを送信ボタンにテーマカラーが反映されます。
THE THOR テーマカラーのカスタマイズ方法
- WordPressのダッシュボード
- 外観
- カスタマイズ
基本設定＞基本スタイル設定＞テーマカラーを指定
色の指定をして
をクリック
色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力する
おつかれさまでした。
以上、【THE THORテーマカラー】決められたパーツの色が自動的に変わるでした。
わからないことや、ご相談は、お気軽にお声がけくださいね。
お読みいただき、ありがとうございました。
Chiharu
