【THE THOR(ザ・トール)】デフォルトの見出しを変更する方法を解説するよ!

ゆず
ネコ先生!見出しのデザインってどこで変更するの?
ネコ先生
ネコ先生
見出しのデザインの変更はとっても簡単ですよ。
目次

見出しの変更方法

H2からH5までの見出しデザインの変更は、ダッシュボードの「外観」⇒「カスタマイズ」から変更します。

ダッシュボード「外観」⇒「カスタマイズ」

カスタマイザーを開いたら、メニューの「パーツスタイル設定[THE]」⇒「見出し設定(個別ページ用)」をクリックします。

 

H2からH5まで、それぞれ見出しのデザインと色を設定します。

見出し設定画面

設定が完了したら、上にある「公開」ボタンをクリックして終了です。

 

見出し一覧

いちいち試すのも面倒だと思うので、すべての見出しデザインの一覧を作りましたので参考にしてください。

色の設定は3カ所設定でき、各色は適当に

A:#000000、B:#dd9933、C:#dd3333

で統一しています。

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

超シンプルなデフォルトの見出しデザインです。

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

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

デフォルトのデザインに下線がついた見出しです。

下線基本[カラーA文字B下線

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

デフォルトのデザインに2本の下線がついた見出しです。

下線2本[カラーA文字B下線

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

デフォルトのデザインに1本の点線がついた見出しです。

下線1本点線[[カラーA文字B下線

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

テキストの下がB色の実線、残り右側にC色の実線がひかれたデザインです。

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

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

デフォルトのデザインにマーカー風の下線がひかれた見出しです。

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

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

右側に向かった矢印の下線がひかれたデザインです。

下線1本矢印[[カラーA文字B下線]

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

B色とC色のストライプの下線がひかれたデザインです。

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

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

左からB色、右からC色がストライプ状になった下線がひかれたデザインです。

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

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

テキストが中央寄せになり、中央に短い下線がひかれたデザインです。

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

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

テキストは中央寄せ、中央に下に向いた矢印がついた下線がひかれたデザインです。

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

左線ー基本[カラーA:文字 B:左線]

左側に縦線が入ったデザインです。

左線ー基本[カラーA:文字 B:左線]

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

左側にB色の縦線とC色の下線が入ったデザインです

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

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

左側にB色の縦線とC色の下線(点線)が入ったデザインです。

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

左下線ー左2色[カラーA:文字 B:左線上 C:左線下&下線]

左側に上下色分けした縦線とC色の下線がひかれたデザインです。

左下線ー左2色[カラーA:文字 B:左線上 C:左線下&下線]

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

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:左線]」にC色の下線がひかれたデザインです。

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

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

吹き出し風のデザインです。

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

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

吹き出し風のデザインに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:背景]

背景がB色とC色のストライプになったデザインです。

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

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

テキストは中央寄せ、B色の背景をC色の線で囲ったデザインです。

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

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

背景の角が丸くなり、それをC色の点線で囲ったデザインです。

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

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

B色の「」で囲ったデザインです。

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

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

背景の角の線がはみ出したデザインです。

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

グラデー基本[カラーA:文字 B:背景 C:背景&線]

背景のグラデーションが上下2段になったデザインです。

グラデー基本[カラー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:背景 C:背景&線]

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

「グラデーシンプル[カラーA:文字 B:背景 C:背景&線]」の両サイドが丸くデザインされたものです。

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

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

文字色が黒に固定され、背景のグラデーションの上部にA色の線がひかれ、背景の角が丸くなったデザインです。

グラデー上線角丸(文字黒)[カラー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:背景]

ラインマークー基本[カラーA:文字 B:マーク]に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:マーク]

デフォルトのデザインの左側に丸マークがついた見出しデザインです。

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

丸マークー背景角丸[カラーA:文字&マーク B:背景]

丸マークー基本[カラーA:文字 B:マーク]に角が丸くなった背景がついた見出しデザインです。

丸マークー背景角丸[カラーA:文字&マーク B:背景]

丸マークー背景線角丸[カラーA:文字&マーク B:背景 C:線]

丸マークー背景角丸[カラー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:先頭文字]

デフォルトのデザインのテキストの先頭の1文字が大きく表示されたデザインです。

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

先頭大ー先頭下線[カラーA:文字 B:先頭文字&先頭下線]

先頭大ー基本[カラーA:文字 B:先頭文字]の先頭の1文字に下線がひかれたデザインです

先頭大ー先頭下線[カラーA:文字 B:先頭文字&先頭下線]

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

先頭大ー基本[カラーA:文字 B:先頭文字]にC色の下線がひかれたデザインです。

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

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

先頭大ー基本[カラーA:文字 B:先頭文字]にC色の線で角を丸く囲った見出しデザインです。

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

まとめ

いかがでしたか?

今回は見出しのデザインの変更方法について説明しました。

見出しのデザインを変えるだけでサイトの印象がガラリと変わりますので、活用してくださいね。

⇒⇒THE THOR(ザ・トール)のレビュー&特典付き購入はこちらから

メルマガ登録バナー1

最新情報をチェックしよう!