【THE THOR】見出しデザインのサンプル一覧と変更方法【全53種類】

WordPressのテーマ THE THOR（ザ トール）には、53種類もの見出しデザインが用意されています。

ボタン1つで、好きな色を選ぶだけでカスタマイズができるのですが、「変更を適用してみないとどんなデザインがわからない」のが少し不便です。

そこで、これからTHE THORでブログを始めようと思った方が、少しでも便利になるかと思い、一覧にして視覚的にわかるようにしてみました。

このページを横に置きながら、自分好みの見出しをカスタマイズしてみてくださいね。

THE THOR（ザ トール）で設定できる見出し一覧

THE THORで用意されている見出しは、以下の50種類です。

ここではわかりやすいように、

• カラーA：青色　#1e73be
• カラーB：黄色　#eded00
• カラーC：赤色　#dd3333

に設定しています。この色は自由にカスタマイズできますので、何通りもの組み合わせからあなたのサイトに合ったデザインを選んでみてくださいね。

以下、サンプル一覧です。

デフォルトの見出し

基本［カラーA：文字］

下線スタイルの見出し一覧

下線‐基本［カラーA：文字　B：下線］

下線‐2本［カラーA：文字　B：下線］

下線‐1本点線［カラーA文字　B：下線］

下線‐1本2色［カラーA：文字　B：下線左　C：下線右］

下線‐マーカー［カラーA：文字　B：下線］

下線‐1本矢印［カラーA：文字　B：下線］

下線‐ストライプ［カラーA：文字　B：下線　C：下線］

下線‐グラデ［カラーA：文字　B：下線左　C：下線右］

下線‐センター［カラーA：文字　B：下線］

下線‐センター矢印［カラーA：文字　B：下線］

左線スタイルの見出し

左線‐基本［カラーA：文字　B：左線］

左下線スタイルの見出し一覧

左下線‐基本［カラーA：文字　B：左遷　C：下線］

左下線‐下点線［カラーA：文字　B：左線　C：下線］

左下線‐左2色［カラーA：文字　B：左線上　C：左線下＆下線］

背景スタイルの見出し一覧

背景‐基本［カラーA：文字　B：背景］

背景‐下線［カラーA：文字　B：背景　C：下線］

背景‐左線［カラーA：文字　B:背景　C:左線］

背景‐左下線［カラーA：文字　B：背景　C：左線］

背景‐吹き出し［カラーA：文字　B：背景］

背景‐吹き出し線付［カラーA：文字　B：背景　C：線］

背景‐リボン［カラーA：文字　B：背景　C：影］

背景‐ボックス［カラーA：文字　B：背景　C：影］

背景‐ステッチ［カラーA：文字　B：背景　C：線］

背景‐ストライプ［カラーA：文字　B：背景　C：背景］

背景‐線［カラーA：文字　B：背景　C：線］

背景‐点線角丸［カラーA：文字　B：背景　C：線］

背景‐括弧［カラーA：文字　B：線］

背景‐はみ出す線［カラーA：文字　B：線］

グラデスタイルの見出し一覧

グラデ‐基本［カラーA：文字　B：背景　C：背景］

グラデ‐角丸［カラーA：文字　B：背景　C：背景］

グラデ‐ラウンド［カラーA：文字　B：背景　C：背景&線］

グラデ‐シンプル［カラーA：文字　B：背景　C：背景&線］

グラデ‐シンプル角丸［カラーA：文字　B：背景　C：背景&線］

グラデ‐シンプルラウンド［カラーA：文字　B：背景　C：背景＆線］

グラデ‐上線（文字黒）［カラーA：文字　B：背景　C：背景＆線］

グラデ‐上線角丸（文字黒）［カラーA：上線　B：背景　C：背景＆線］

グラデ‐上線（文字白）［カラーA：上線　B：背景　C：背景&線］

グラデ‐上線角丸（文字白）［カラーA：上線　B：背景　C：背景&線］

ラインマークスタイルの見出し一覧

ラインマーク‐基本［カラーA:文字　B：マーク］

ラインマーク‐背景角丸［カラーA：文字&マーク　B：背景］

ラインマーク‐背景線角丸［カラーA：文字&マーク　B：背景　C：線］

ラインマーク‐グラデ上線（文字黒）［カラーA：上線&マーク　B：背景　C：背景&線］

ラインマーク‐グラデ上線（文字白）［カラーA：上線&マーク　B：背景　C：背景&線］

丸マークスタイルの見出し一覧

丸マーク‐基本［カラーA：文字　B：マーク］

丸マーク‐背景角丸［カラーA：文字&マーク　B：背景］

丸マーク‐背景線角丸［カラーA：文字&マーク　B：背景　C：線］

丸マーク‐グラデ上線（文字黒）［カラーA：上線＆マーク　B：背景　C：背景&線］

丸マーク‐グラデ上線（文字白）［カラーA：上線＆マーク　B：背景　C：背景&線］

先頭大スタイルの見出し一覧

先頭大‐基本［カラーA：文字　B：先頭文字］

先頭大‐先頭下線［カラーA：文字　B：先頭文字&先頭下線］

先頭大‐下線［カラーA：文字　B：先頭文字　C：下線］

先頭大‐線角丸［カラーA：文字　B：先頭文字　C：線］

THE THORで用意されている見出しデザインは以上です。

THE THORで見出しのデザインをカスタマイズする方法

では、実際にTHE THORで見出しをカスタマイズする方法を解説します。

見出しは、

• H2
• H3
• H4
• H5

の4階層になっているので、どのデザインにカスタマイズするか4つ選んでくださいね。

H2が一番大きな見出しで、下に行くほど文字も小さくなりますよ。

1.　ダッシュボードの外観からカスタマイズ画面へ進む

WordPressダッシュボードの左サイドメニューから、外観＞カスタマイズをクリック

2.　パーツスタイル設定［THE］へ進む

カスタマイズ画面の左サイドメニューから、パーツスタイル設定［THE］をクリック

3.　見出し設定（個別ページ用）へ進む

パーツスタイル設定画面の左サイドメニューから、見出し設定（個別ページ用）をクリック

4.　見出しデザイン設定でデザインとカラーを指定する

■［デザインを選択］で、上の一覧から選んだデザイン名を選択する

■カラーA,B,Cはそれぞれに対応する色を好きに選ぶ

カラーは、カラーチャートから選ぶこともできますし、カラーコードを指定することも可能です。

同様に、H3,H4,H5も設定してTHE THORの見出しカスタマイズは完了です。

おわり！