【THE THOR色のカスタマイズまとめ】背景色・文字色など14種類

ブログ配色の決め方

ブログ作成に使う色は３色にしぼる。この3色にしぼることがポイントです。

色が多すぎると混乱するため内容が頭に入りづらく、色が少ないと全体がぼやけてしまいます。

色をしぼることによって、メリハリのある見やすいブログを作成できます。

まずは、ブログのイメージに合わせてメインの色を決めてから、ほかの2色を選びます。

例えば、こんなイメージです。

THE THORは配色を考えて作成されたテーマなので、初心者さんも安心して使えますよ。

イメージに合わせた色を指定するだけで、あとは自動的に反映される仕組みになっています。

THE THORの色のカスタマイズについて

THE THORで色のカスタマイズができるは下記の14ヶ所。

（クリックすると、それぞれのカスタマイズへジャンプします。）

1. 背景色の変更・背景に画像を使う
2. テーマカラー
3. ヘッダー背景色　（メニューの背景色）
4. ヘッダー文字色　（メニューの文字色・ヘッダーテキストカラー）
5. ヘッダー検索窓の背景色
6. ヘッダーお知らせの背景色
7. メインビジュアル下の注目エリアの背景色
8. ウィジェット見出しの色
9. フッターの背景色・文字色
10. リンクボタンの色
11. リンクテキストの色
12. 記事一覧リストのNEW・ピックアップリボンの色
13. SNSフォロー背景色の色
14. カテゴリイメージカラー

書き出すとたくさんありますが、作業自体は簡単なので安心してくださいね。

【カスタマイズ１】背景色の変更・背景に画像を使う

THE THORの背景は、色の変更・画像を使えます。背景に画像を指定するとタイルのように画像をくり返して表示されます。

下記は変更前・変更後のサンプル画像です。TOPページ・投稿、それぞれ２パターン作成したので参考にどうぞ。

TOP　変更前

TOP 背景色変更

TOP 背景画像使用

投稿　変更前

投稿 背景色変更

投稿 背景色画像使用

では、背景色の変更・背景に画像を使う手順をそれぞれご紹介します。まずは背景色の変更手順から。

カスタマイザーを開く

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

ヘッダーの背景色を指定

1. 基本設定
2. 基本スタイル設定
3. 全体の背景色を指定

色の指定をして をクリック、背景色の変更は完了です。

次は背景に画像を使う手順について。あらかじめ、背景に使う画像を用意してください。

カスタマイザーを開く

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

ヘッダーに背景画像を登録

1. 基本設定
2. 基本スタイル設定
3. 全体の背景画像を登録

背景画像の選択をして をクリックすれば背景の変更は完了です。

【カスタマイズ２】テーマカラー

下記の画像の  から  へ変更している部分は、THE THORテーマカラーが反映される部分になります。

TOPページ・投稿ページ、それぞれの画像を作成しましたので参考になさってください。

TOP　テーマカラー変更前

TOP　テーマカラー変更後

投稿　テーマカラー変更前

投稿　テーマカラー変更後

THE THORテーマカラーについて、こちらのページで詳しくお伝えしていますので参考にしてください。

では、テーマカラーの変更手順についてお伝えします。

カスタマイザーを開く

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

テーマカラーを指定

1. 基本設定
2. 基本スタイル設定
3. テーマカラーを指定

テーマカラーを指定して をクリックすれば完了です。

【カスタマイズ３】ヘッダー背景色

THE THORのヘッダー背景色は、好きな色にカスタマイズできます。

カスタマイザーを開く

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

ヘッダーの背景色を指定

1. 共通エリア設定
2. ヘッダーエリア設定
3. ヘッダー設定
4. ヘッダーの背景色を指定

ヘッダー背景色を指定して  をクリックすれば完了です。

【カスタマイズ４】ヘッダーの文字色

THE THORヘッダーの文字色は、黒文字・白文字から選べます。

カスタマイザーを開く

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

ヘッダーのテキストカラーを指定

1. 共通エリア設定
2. ヘッダーエリア設定
3. ヘッダー設定
4. ヘッダーのテキストカラーを選択

黒文字・白文字を選択して  をクリックすれば完了です。

【カスタマイズ５】ヘッダー検索窓の背景色

THE THORヘッダー検索窓の背景色は、好きな色にカスタマイズできます。

カスタマイザーを開く

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

ヘッダー検索窓の設定

1. 共通エリア設定
2. ヘッダーボトムエリア設定
3. ヘッダー検索窓の表示設定
4. 背景色を指定

最後に  をクリックすればカスタマイズは完了です。

【カスタマイズ６】ヘッダーお知らせ背景色

THE THORヘッダーお知らせの背景色は、好きな色にカスタマイズできます。

カスタマイザーを開く

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

ヘッダーお知らせの背景色を指定

1. 共通エリア設定
2. ヘッダーボトムエリア設定
3. ヘッダーお知らせの表示設定
4. 背景色を指定

最後に  をクリックすればカスタマイズは完了です。

【カスタマイズ７】メインビジュアル下の注目エリアの背景色

THE THORメインビジュアル下の注目エリアの背景色は、好きな色にカスタマイズできます。

カスタマイザーを開く

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

注目エリアの背景色を指定

1. Topページ設定
2. メインビジュアル下お知らせ設定
3. 注目エリアの背景色背景色を指定

注目エリアの背景色を指定して  をクリックすれば完了です。

【カスタマイズ８】ウィジェット見出しの色

THE THORウィジェットの見出しの色は、好きな色にカスタマイズできます。

ウィジェットを設置できる位置は下記の4箇所。それぞれにカスタマイズが必要です。

1. メインカラム
2. サイドカラム
3. フッターエリア
4. メニューパネル（メニューが表示されている開閉のできるパネル）

下記ページでウィジェットについて詳しく解説しています。

ウィジェットが使える位置・使う手順についてはこちらのページ、ウィジェットのカスタマイズ手順はこちらのページを参考にしてください。

カスタマイザーを開く

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

ウィジェットの位置によって手順が異なるので、カスタマイズしたい位置の手順を参考にしてください。

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

1. 共通エリア設定
2. メインカラムエリア設定
3. ウィジェット設定
4. ウィジェット見出しの色を設定

サイドカラムウィジェットの見出し色

1. 共通エリア設定
2. サイドカラムエリア設定
3. ウィジェット設定
4. ウィジェット見出しデザイン設定

フッターカラムウィジェットの見出し色

1. 共通エリア設定
2. フッターエリア設定
3. ウィジェット見出しデザイン設定
4. ウィジェットの見出しデザインを設定

ウィジェット見出しの色を指定して  をクリックすれば完了です。

【カスタマイズ９】フッターの背景色・文字色

THE THORフッターの背景色と文字色のカスタマイズは可能ですが、自己責任でCSSにコードを書き込みます。

赤字を書き換えてコードをstyle-user.cssに貼り付けてください。

1. ダッシュボード
2. 外観
3. テーマエディター
4. style-user.css

入力できたら をクリックすれば完了

【カスタマイズ１０】リンクボタンの色

THE THORのボタンやボックスなど、パーツのカスタマイズ下記ページを参考にしてください。

・メインビジュアルのリンクボタンのカスタマイズはこちらのページ
・フッターCTAのリンクボタンのカスタマイズはこちらのページ
・お問い合わせページの「送信する」ボタンはこちらのページ

【カスタマイズ１１】リンクテキストの色

THE THOの投稿ページ・固定ページで使うリンクテキスト（リンクの文字色）は、好きな色にカスタマイズできます。

カスタマイザーを開く

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

リンクテキストの色を指定

1. 基本設定
2. 基本スタイル設定
3. 投稿内テキストリンク色を指定

リンク色を指定して  をクリックすれば完了です。

【カスタマイズ１２】記事一覧リストのNEW・Pickupマークの色

THE THOR記事一覧リストは、NEWマーク・Pickupマークを表示できます。

マークの色は、それぞれ好きな色にカスタマイズできます。

• NEWマーク：投稿されてから指定した期間中自動で表示
• Pickupマーク：先頭固定された記事に表示

カスタマイザーを開く

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

記事一覧リストのマークの色を指定

1. アーカイブページ設定
2. 記事一覧リスト設定
3. NEW&ピックアップリボン設定

マークの色を指定して  をクリックすれば完了です。

アイコン名がわからない時は、次の手順を参考にしてください。

左上「アイコンオプション」をクリック

アイコン一覧が表示されたらコードをコピー

記事を先頭固定する場合は、次の手順を参考にしてください。

カスタマイザーを開く

1. ダッシュボード
2. 投稿
3. 投稿一覧

「クイック編集」をクリック

「この投稿を先頭に固定表示」にチェック をクリック

 【カスタマイズ１３】SNSフォロー背景色

THE THOR SNSフォローは、背景色を好きな色にカスタマイズすることができます。

カスタマイザーを開く

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

テーマカラーを指定

1. 共通エリア設定
2. フッターエリア設定
3. SNSフォロー背景色の設定
4. SNSフォローエリアの背景色を指定

SNSフォローエリアの背景色を指定して  をクリックすれば完了です。

【カスタマイズ１４】カテゴリイメージカラー

THE THORの投稿のカテゴリは、カテゴリごとにイメージカラーをカスタマイズできます。

カテゴリイメージカラーについて、詳しくはこちらののページを参考にしてください。

カテゴリーを開く

1. ダッシュボード
2. 投稿
3. カテゴリー

色を指定する

1. 色を選択
2.  をクリック

ヘッダー背景色を指定して  をクリックすれば完了です。

カテゴリーの作成手順もお伝えします。

カテゴリーからカテゴリーを作成する

1. ダッシュボード
2. 投稿
3. カテゴリー

カテゴリーを開く

1. カテゴリーの名前を入力
2. カテゴリーのURLをアルファベットで入力
3.  をクリック

以上、【THE THOR色のカスタマイズまとめ】背景色・文字色など14種類でした。

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