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

 

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

 

ブログ配色の決め方

 

ブログを作成するときに使う色は3色にしぼる。この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. カテゴリイメージカラー

 

書き出すと、なんだかたくさんありますけど、カスタマイズをはじめると意外とサクッと終わるので安心してください。

 

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

 

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

 

下記の画像は変更前・背景色の変更・背景に画像を使ったサンプル画像です。

 

TOPページ・投稿ページの2パターン作成しましたので参考になさってください。

 

the thor TOP

 

the thor 投稿

 

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

 

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

カスタマイザー  基本スタイル設定基本設定>基本スタイル設定>全体の背景色を指定

 

カラーパネル

色の指定をしてカスタマイザー公開 をクリック

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

 

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

カスタマイザー  基本スタイル設定基本設定>基本スタイル設定>全体の背景画像を登録

 

カスタマイザー-サイトロゴ設定3
画像を選択をクリックして、メディアライブラリを表示する

 

画像選択
背景用画像を新しく追加するにはァイルをアップロードをクリック

 

画像選択
画像を選択して、選択ボタンをクリック

画像がダウンロードされて、チェックマークが付いているのを確認できたら画像を選択 をクリック

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

 

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

 

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

 

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

 

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

 

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

 

投稿 テーマカラー変更前the thor 投稿ページ
投稿 テーマカラー変更後the thor テーマカラー

 

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

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

 

カラーパネル

色の指定をしてカスタマイザー公開 をクリック

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

 

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

 

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

 

ヘッダー背景カラー

 

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

カスタマイザー  ヘッダー設定共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーの背景色を指定

 

カラーパネル

色の指定をしてカスタマイザー公開 をクリック

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

 

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

 

THE THORヘッダーの文字色は、黒文字・白文字の2種類から選ぶことができます。

 

黒文字

黒文字

白文字

白文字

 

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

カスタマイザー  ヘッダー設定

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

黒文字・白文字を選択してカスタマイザー公開 をクリック

 

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

 

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

 

the thor ヘッダー検索窓

 

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

カスタマイザー  ヘッダー検索窓共通エリア設定>ヘッダーボトムエリア設定>ヘッダー検索窓の表示設定>それぞれの設定

 

カラーパネル

表示・非表示を選択、ウィジェットの見出しデザインを選択しカスタマイザー公開 をクリック

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

 

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

 

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

 

thethor ヘッダーお知らせ

 

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

カスタマイザー  ヘッダーお知らせ

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

それぞれ選択して、最後にカスタマイザー公開 をクリック

 

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

 

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

 

メインビジュアル下

 

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

カスタマイザー  メインビジュアル下Topページ設定>メインビジュアル下お知らせ設定>メインビジュアル下の注目エリア設定

それぞれの選択や入力をして カスタマイザー公開 をクリック

 

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

 

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

 

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

 

ウィジェットは、メインカラム・サイドカラム・フッターエリア・メニューパネル、それぞれにカスタマイズが必要になりますので、ウィジェットの位置を確認してからカスタマイズをすすめるようにしてください。

 

メニューパネルとは、主にスマホやタブレットでWebページを見るときにタップして開くメニューのことです。

 

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

 

ウィジェット見出し

 

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

カスタマイザー メインカラム
共通エリア設定>メインカラムエリア設定>ウィジェット設定>ウィジェット見出しの色を設定

色を指定してカスタマイザー公開 をクリック

 

見出しデザインは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

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

 

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

 

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

色を指定してカスタマイザー公開 をクリック

 

見出しデザインは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

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

 

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

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

選択してカスタマイザー公開 をクリック

 

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

 

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

カスタマイザー サーチパネル共通エリア設定>ヘッダーエリア設定>メニューパネルの設定>ウィジェット見出しの色を設定

色の指定をしてカスタマイザー公開 をクリック

 

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

 

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

 

THE THORフッターの背景色と文字色のカスタマイズは可能ですが、カスタマイザーで対応していないので、自己責任でCSSにコードを書き込みます。赤字を書き換えてコードを貼り付けてください。

 

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

 

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

 

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

 

カスタムCSS
入力できたらファイル更新 をクリック

 

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

 

THE THORのボタンやボックスなどパーツのカスタマイズはこちらにまとめましたので、参考になさってください。

 

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

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

 

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

 

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

 

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

 

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

 

リンクテキスト

 

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

カスタマイザー  基本スタイル設定基本設定>基本スタイル設定>投稿内テキストリンク色を指定

 

カラーパネル

色の指定をしてカスタマイザー公開 をクリック

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

 

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

 

THE THOR記事一覧リストにNEWマーク・Pickupマークを表示することができます。マークの色は、それぞれ好きな色にカスタマイズすることができます。

 

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

 

アーカーブマーク選択

 

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

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

選択してカスタマイザー公開 をクリック

 

「リボンの色を指定」は、色の指定ができるので、「色を選択」をクリックして色の指定をします。

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

 

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

 

アイコン

 

アイコン一覧が表示されたら、好きなアイコンのコードをコピー

 

ダッシュボード 投稿一覧
  1. WordPressのダッシュボード
  2. 投稿
  3. 投稿一覧
ダッシュボード 投稿一覧
「クイック編集」をクリック
ダッシュボード 投稿一覧
「この投稿を先頭に固定表示」にチェック更新 をクリック

 

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

 

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

 

snsフォロー背景

 

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

カスタマイザー SNSフォロー共通エリア設定>フッターエリア設定>SNSフォロー背景色の設定>SNSフォローエリアの背景色を指定

選択してカスタマイザー公開 をクリック

 

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

 

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

 

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種類でした。

 

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

 

お問い合わせはこちら

 

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

Chiharu

Chiharu

この記事を書いたのは

元歯科衛生士のWebデザイナー。素の自分を出せるようにブログをはじめました。お伝えしているのは、ブログのはじめ方と毎日を楽しく過ごすコツについて。