【THE THOR(ザ・トール)】見出しカスタマイズ方法とデザイン一覧

見出しのカスタマイズ方法は2パターン

見出しをカスタマイズするには、大きく分けて2パターンあります。

1. 【THE THOR(ザ・トール)】の見出しカスタマイズ機能を利用する
2. CSSを記述して、見出しをカスタマイズする

【THE THOR(ザ・トール)】では、見出しのカスタマイズを簡単に設定できる機能が備わっています。

まずは、【THE THOR(ザ・トール)】の見出しカスタマイズ機能からご紹介します。

【THE THOR(ザ・トール)】見出し(h2〜h5)のカスタマイズ方法

【THE THOR(ザ・トール)】の見出しカスタマイズ機能を利用すると、見出し(h2〜h5)を簡単に設定する事ができます。(※h1の見出し設定は後述します)

見出しカスタマイズ機能を利用する箇所は、次の通りです。

WordPress管理画面のメニューから、(1)「外観」→(2)「カスタマイズ」→(3)「パーツスタイル[THE]」→(4)「見出し設定(個別ページ用)」へと進みます。

見出し設定(個別ページ用)の使い方

見出し設定(個別ページ用)の使い方は、次の通りです。

1. 見出しデザインを変更できる箇所となります
2. 選択中のデザイン「カラーA」の色を変更できます
3. 選択中のデザイン「カラーB」の色を変更できます
4. 選択中のデザイン「カラーC」の色を変更できます

デザインやカラーA〜Cを変更すると、自動で画面右側に見出しイメージを反映してくれるので、プレビュー確認する事ができます。

イメージに合う見出しを決めるまで、何度でもデザインや色を切り替えて確認が可能です。

お気に入りのデザインを見つけられたら、画面上部の「公開」を選択して、設定を保存しましょう。

【THE THOR(ザ・トール)】見出しデザイン一覧

THE THOR(ザ・トール)では、見出しのデザインが53種類と豊富に用意されています。

それぞれのデザインを分かりやすく確認できるように、見出しサンプルは、デザインパターンを次の配色で設定しています。

• カラーAは「黒色(#000000)」
• カラーBは「赤色(#dd3333)」
• カラーCは「青色(#1e73be)」

それでは、デザインタイプごとに全53種類をご紹介していきます。

【1】基本デザイン

1.基本[カラーA:文字](default)

【2】下線デザイン

2.下線-基本[カラーA:文字　B:下線]

3.下線-2本[カラーA:文字　B:下線]

4.下線-1本点線[カラーA:文字　B:下線]

5.下線-1本2色[カラーA:文字　B:下線左　C:下線右]

6.下線-マーカー[カラーA:文字　B:下線]

7.下線-1本矢印[カラーA:文字　B:下線]

8.下線-ストライプ[カラーA:文字　B:下線　C:下線]

9.下線-グラデ[カラーA:文字　B:下線左　C:下線右]

10.下線-センター[カラーA:文字　B:下線]

11.下線-センター矢印[カラーA:文字　B:下線]

【3】左線デザイン

12.左線-基本[カラーA:文字　B:下線]

【4】左下線デザイン

13.左下線-基本[カラーA:文字　B:左線　C:下線]

14.左下線-下点線[カラーA:文字　B:左線　C:下線]

15.左下線-左2色[カラーA:文字　B:左線上　C:左線下＆下線]

【5】背景デザイン

16.背景-基本[カラーA:文字　B:背景]

17.背景-下線[カラーA:文字　B:背景　C:下線]

18.背景-左線[カラーA:文字　B:背景　C:左線]

19.背景-左下線[カラーA:文字　B:背景　C:左線]

20.背景-吹き出し[カラーA:文字　B:背景]

21.背景-吹き出し線付[カラーA:文字　B:背景　C:線]

22.背景-リボン[カラーA:文字　B:背景　C:影]

23.背景-ボックス[カラーA:文字　B:背景　C:影]

24.背景-ステッチ[カラーA:文字　B:背景　C:線]

25.背景-ストライプ[カラーA:文字　B:背景　C:背景]

26.背景-線[カラーA:文字　B:背景　C:線]

27.背景-点線角丸[カラーA:文字　B:背景　C:線]

28.背景-括弧[カラーA:文字　B:線]

29.背景-はみ出す線[カラーA:文字　B:線]

【6】グラデデザイン

30.グラデ-基本[カラーA:文字　B:背景　C:背景＆線]

31.グラデ-角丸[カラーA:文字　B:背景　C:背景＆線]

32.グラデ-ラウンド[カラーA:文字　B:背景　C:背景＆線]

33.グラデ-シンプル[カラーA:文字　B:背景　C:背景＆線]

34.グラデ-シンプル角丸[カラーA:文字　B:背景　C:背景＆線]

35.グラデ-シンプルラウンド[カラーA:文字　B:背景　C:背景＆線]

36.グラデ-上線(文字黒)[カラーA:上線　B:背景　C:背景＆線]

37.グラデ-上線角丸(文字黒)[カラーA:上線　B:背景　C:背景＆線]

38.グラデ-上線(文字白)[カラーA:上線　B:背景　C:背景＆線]

39.グラデ-上線角丸(文字白)[カラーA:上線　B:背景　C:背景＆線]

【7】ラインマークデザイン

40.ラインマーク-基本[カラーA:文字　B:マーク]

41.ラインマーク-背景角丸[カラーA:文字＆マーク　B:背景]

42.ラインマーク-背景線角丸[カラーA:文字＆マーク　B:背景　C:線]

43.ラインマーク-グラデ上線(文字黒)[カラーA:上線＆マーク　B:背景　C:背景＆線]

44.ラインマーク-グラデ上線(文字白)[カラーA:上線＆マーク　B:背景　C:背景＆線]

【8】丸マークデザイン

45.丸マーク-基本[カラーA:文字　B:マーク]

46.丸マーク-背景角丸[カラーA:文字＆マーク　B:背景]

47.丸マーク-背景線角丸[カラーA:文字＆マーク　B:背景　C:線]

48.丸マーク-グラデ上線(文字黒)[カラーA:上線＆マーク　B:背景　C:背景＆線]

49.丸マーク-グラデ上線(文字白)[カラーA:上線＆マーク　B:背景　C:背景＆線]

【9】先頭大デザイン

50.先頭大-基本[カラーA:文字　B:先頭文字]

51.先頭大-先頭下線[カラーA:文字　B:先頭文字＆先頭下線]

52.先頭大-下線[カラーA:文字　B:先頭文字　C:下線]

53.先頭大-線角丸[カラーA:文字　B:先頭文字　C:線]

【THE THOR(ザ・トール)】見出し(h1)は、カスタマイズできる？できない？

h1の見出しは、h2〜h5のように設定変更用の画面が用意されていません。

h1の見出しをカスタマイズする場合は、CSSを記述してデザイン変更しましょう。

CSSの記述先は、次の通りです。

WordPress管理画面のメニューから、(1)「外観」→(2)「カスタマイズ」→(3)「追加CSS」へと進み、(4)「追加CSSの枠内」に、h1タグのCSSを記述しましょう。

さいごに

【THE THOR(ザ・トール)】の見出しカスタマイズ方法と、デザイン一覧(全53種類)をご紹介してきました。

豊富に用意されたデザインから、ぜひお気に入りの「見出し」を見つけてみて下さい。