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

the thor 色設定

ChiharuChiharu

今回は、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. カテゴリイメージカラー

 

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

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

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

 

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

 

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

 

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

 

TOPページ変更前
the thor TOPページ
TOPページ背景色変更
the thor TOPページ
TOPページ背景画像使用
the thor TOPページ

 

投稿ページ変更前
the thor 投稿ページ
投稿ページ背景色変更
the thor 投稿ページ
投稿ページ背景画像使用
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ヘッダー検索窓を使うときの背景色を好きな色にカスタマイズすることができます。

 

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーボトムエリア
カスタマイザー 検索窓

共通エリア設定>ヘッダーボトムエリア設定>ヘッダー検索窓の表示設定>ヘッダーの検索窓を表示するか選択>注目キーワードを表示するか選択>注目キーワードのタイトルを入力>背景色を指定

カラーパネル

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

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

 

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

 

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

 

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーボトムエリア
カスタマイザー お知らせ

共通エリア設定>ヘッダーボトムエリア設定>ヘッダーお知らせの表示設定>ヘッダーお知らせを表示するか選択>お知らせとして表示する文章を入力>リンク先URLを入力>背景色を指定

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

 

【カスタマイズ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 THORリンクの文字色は、投稿ページ・固定ページで使うリンクテキスト(リンクの文字色)を好きな色にカスタマイズすることができます。

 

リンクテキスト

 

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

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

カラーパネル

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

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

 

【カスタマイズ12】記事一覧リストのNEW・ピックアップの色

 

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

 

アーカーブマーク選択

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー 記事一覧リスト
カスタマイザー マーク

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

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

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

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

 

アイコン名を調べる
アイコン名がわからないときは、左上の「アイコンオプション」のボタンをクリック
アイコン
アイコン一覧が表示されたら、好きなアイコンのコードをコピー

 

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

 

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

 

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

 

snsフォロー背景

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー フッター
カスタマイザー フッター

共通エリア設定>フッターエリア設定>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