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

今回は、WordPressテーマ「THE THOR」で可能な色のカスタマイズについてまとめました。

ブログ配色の決め方

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

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

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

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

3色の役割

・メイン：Webサイトのイメージカラー
・アクセント：一番目立つカラー
・ベース：調和するカラー

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

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ページ・投稿、それぞれ２パターン作成したので参考にどうぞ。

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

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

 

基本設定＞基本スタイル設定＞全体の背景色を指定

色の指定をして をクリック

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

 

基本設定＞基本スタイル設定＞全体の背景画像を登録

背景画像の選択をしてをクリック

「画像を選択」をクリック

「ファイルをアップロード」をクリック

「ファイルを選択」をクリック

使う画像を選択して「選択」をクリック

選択した画像にチェックがついているのを確認してから「画像を選択」をクリック

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

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

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

TOP　テーマカラー変更前

TOP　テーマカラー変更後

投稿　テーマカラー変更前

投稿　テーマカラー変更後

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

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

 

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

色の指定をして をクリック

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

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

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

 

共通エリア設定＞ヘッダーエリア設定＞ヘッダー設定＞ヘッダーの背景色を指定

色の指定をして をクリック

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

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

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

 

共通エリア設定＞ヘッダーエリア設定＞ヘッダー設定＞ヘッダーのテキストカラーを選択

黒文字・白文字を選択して をクリック

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

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

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

共通エリア設定＞ヘッダーボトムエリア設定＞ヘッダー検索窓の表示設定＞それぞれの設定

それぞれ指定をして をクリック

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

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

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

 

共通エリア設定＞ヘッダーボトムエリア設定＞ヘッダーお知らせの表示設定＞それぞれの設定

それぞれ指定をして をクリック

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

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

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

 

Topページ設定＞メインビジュアル下お知らせ設定＞メインビジュアル下の注目エリア設定

それぞれ指定をして をクリック

 

色の指定は「色を選択」をクリック白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

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

ウィジェットを設置できる位置は、メインカラム・サイドカラム・フッターエリア・メニューパネルの4箇所。それぞれにカスタマイズが必要です。

メニューパネルは、メニューが表示されている開閉のできるパネルのこと。

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

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

 

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

それぞれ指定をして をクリック

 

見出しデザインの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

 

共通エリア設定＞サイドカラムエリア設定＞ウィジェット見出しデザイン設定＞ウィジェット見出しの色を設定

それぞれ指定をして をクリック

 

見出しデザインの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

 

共通エリア設定＞フッターエリア設定＞ウィジェット見出しデザイン設定＞ウィジェット見出しの色を設定

それぞれ指定をして をクリック

 

見出しデザインの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

 

共通エリア設定＞ヘッダーエリア設定＞メニューパネルの設定＞ウィジェット見出しの色を設定

それぞれ指定をして をクリック

 

見出しデザインの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

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

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

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

 

.l-footer .bottomFooter {
background: #背景色に使う色番号;
}

Copy

 

.bottomFooter__copyright {
color: #コピーライトに使う色番号;
}
.bottomFooter__list li {
color: #フッターのメニュー色に使う色番号;
}
.bottomFooter__link {
color: #フッターのブログ名に使う色番号;
}

Copy

 

入力できたら をクリック

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

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

・メインビジュアルのリンクボタン
・フッターCTAのリンクボタン
・お問い合わせページの「送信する」ボタン

などの共通ボタンのカスタマイズ方法は、下記のページを参考にしてください。

投稿などで使うボタンのカスタマイズ方法は、下記のページを参考にしてください。

タグ・タグランキングのリンクボタンの色のカスタマイズは、下記のページを参考にしてください。

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

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

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

 

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

色の指定をして をクリック

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

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

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

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

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

 

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

それぞれ指定をして をクリック

 

リボンの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

アイコン名がわからないときは、左上「アイコンオプション」をクリック

 

 

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

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

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

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

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

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

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

 

共通エリア設定＞フッターエリア設定＞SNSフォロー背景色の設定＞SNSフォローエリアの背景色を指定

それぞれ指定をして をクリック

 

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

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

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

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

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

1. 色の指定は「色を選択」をクリック白い丸・白い四角をクリックしながら動かして色を選択または、カラーコードを直接入力
2. をクリック

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

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

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

1. ダッシュボード
2. 投稿
3. 新規追加

クラッシックエディタ

1. カテゴリー名を入力
2. 新規カテゴリーを追加をクリック
3. をクリックしてカテゴリの追加が完了

ブロッククエディタ

1. カテゴリー名を入力
2. 新規カテゴリーを追加をクリック
3. をクリックしてカテゴリの追加が完了

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

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