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

 

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

 

ブログ配色の決め方

 

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

 

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

 

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

 

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

 

3色の役割

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

 

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

ブログ 3色 イメージ

 

ブログ 3色 イメージ

 

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パターン作成したので参考にどうぞ。

 

Topページ 色の変更

 

投稿 色の変更

 

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

 

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

 

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

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

THE THOR カラーパネル

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

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

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

 

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

 

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

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

 

画像アップロード

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

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

THE THOR カラーパネル

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

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

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

 

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

 

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

 

the thor ヘッダー背景色

 

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

 

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

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

THE THOR カラーパネル

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

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

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

 

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

 

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

the thor ヘッダー黒文字

黒文字

the thor ヘッダー白文字白文字

 

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

 

カスタマイザー ヘッダー

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

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

 

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

 

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

 

the thor ヘッダー検索窓

 

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

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

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

THE THOR カラーパネル

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

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

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

 

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

 

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

 

the thor ヘッダーお知らせ

 

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

 

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

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

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

 

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

 

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

 

the thor メインビジュアル 注目エリア

 

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

 

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

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

 

THE THOR カラーパネル

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

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

 

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

 

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

 

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

 

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

 

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

 

the thor ウィジェット 見出し

 

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

 

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

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

 

THE THOR カラーパネル

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

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

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

 

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

 

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

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

 

THE THOR カラーパネル

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

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

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

 

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

 

the thor フッター コピーライト共通エリア設定>フッターエリア設定>ウィジェット見出しデザイン設定>ウィジェット見出しの色を設定

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

 

THE THOR カラーパネル

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

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

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

 

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

 

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

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

 

THE THOR カラーパネル

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

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

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

 

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

 

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

 

赤字を書き換えてコードをstyle-user.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の投稿ページ・固定ページで使うリンクテキスト(リンクの文字色)は、好きな色にカスタマイズできます。

 

the thor リンク テキスト

 

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

 

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

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

THE THOR カラーパネル

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

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

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

 

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

 

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

 

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

 

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

 

the thor マーク

 

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

 

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

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

 

THE THOR カラーパネル

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

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

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

 

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

 

the thor アイコン

 

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

 

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

 

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

 

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

 

the thor フッターフォロー背景色

 

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

 

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

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

 

THE THOR カラーパネル

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

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

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

 

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

 

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

 

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

 

ダッシュボード>投稿>カテゴリー
  1. ダッシュボード
  2. 投稿
  3. カテゴリー
カテゴリー
  1. 色の指定は「色を選択」をクリック白い丸・白い四角をクリックしながら動かして色を選択または、カラーコードを直接入力THE THOR カラーパネル
  2. 更新 をクリック

 

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

 

ダッシュボード>投稿>カテゴリー
  1. ダッシュボード
  2. 投稿
  3. カテゴリー
カテゴリー
  1. カテゴリーの名前を入力
  2. カテゴリーのURLをアルファベットで入力
  3. 新規カテゴリーを追加 をクリック

 

ダッシュボード>投稿>新規
  1. ダッシュボード
  2. 投稿
  3. 新規追加
カテゴリー

クラッシックエディタ

  1. カテゴリー名を入力
  2. 新規カテゴリーを追加をクリック
  3. ダッシュボード 公開 をクリックしてカテゴリの追加が完了
カテゴリー

ブロッククエディタ

  1. カテゴリー名を入力
  2. 新規カテゴリーを追加をクリック
  3. ダッシュボード 公開 をクリックしてカテゴリの追加が完了

 


 

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

 

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

THE THORカスタマイズ

1人で悩んでいませんか?
設定やカスタマイズでお困りのときは
お気軽にご相談ください。

ご相談はこちらへどうぞ >