【コピペだけ!】THE THORの見出しをおしゃれにカスタマイズ!

ここあです。

 

WordPressテーマ「THE THOR」の

見出しデザインのバリエーションは

全部で「53種類」もあります。

 

とは言え、バリエーションを全て試して

チェックするのは非常に大変^^;

 

確かに記事の見出しはブログやサイトを運営する際

読者の目をひくアイキャッチの要素としても重要ですし

たくさんのデザインが選べるに越したことはありません。

 

しかし、さすがに53種類もデザインがあると

どう組み合わせたら良いか分からないと

あなたはお困りではないでしょうか?

 

と言うか、考えるのが面倒ですよね?^^;

私はそう(笑)

 

ということで、

見出しのデザインが多いのは嬉しいけど

  • 考えるのが面倒くさい!
  • どう組み合わせたらいいか分からない!

というあなたのために

 

今回は有名サイトをお手本とさせていただき

見出しの最適な組み合わせや、それに付随する設定方法

見出しのカスタマイズ方法について解説させていただきます。

 

なので、もしもあなたが「これだ!」という

組み合わせが見つかったら、ぜひ採用してみてください。

 カスタマイズは必ず自己責任でお願いします。※サイトによっては見出し4の設定がない場合もございますので、あらかじめご了承ください。

 

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

まず最初にTHE THORの見出しを

カスタマイズする方法を簡単に説明しておきますね。

 

THE THORの見出しをカスタマイズする場合は

ダッシュボードメニューから外観 → カスタマイズをクリックし

ダッシュボードメニュー

 

 

続いて、パーツスタイル設定[THE]をクリック。

パーツスタイル設定

 

 

さらに、見出し設定(固定ページ用)をクリックすると

見出し設定

 

 

そこから見出しのデザインが変更できます。

見出しデザイン設定

 

なので、これから説明する見出しの変更方法と書いてあるところは

ここで設定してください。

 

そして、さらにカスタマイズ方法と書いてある部分は

CSSコードの記述が必要となりますので、CSSは以下の場所

ダッシュボードメニューから外観 → カスタマイズをクリック

ダッシュボードメニュー

 

 

一番下の「追加CSS」をクリックして

追加CSS

 

 

CSSコードを以下の部分に貼り付けるようにしてください。

コードをコピペすれば、表示が勝手に変わりますので^^

追加CSS

 

以上の設定箇所を踏まえた上で、あなたがお気に入りの

見出しデザインを探してみてくださいね。

 

THE THORの見出しに最適な組み合わせを探そう!

THE THORの見出しに最適な組み合わせを探してみてください。

設定方法やカスタマイズ方法(CSSコード)も記載しますので

ぜひ試してみてくださいね^^

 

 これから紹介する見出しデザインに変更したい場合は、必ずTHE THORの見出し設定を同じにしてください。設定が違うとCSSの指定コードが変わり、同じ結果を得られなくなりますので、ご注意ください。

 

「ferret」風見出しデザイン

THE THOR 見出し

※見出し4の設定はありません。

 

マーケティングなどに関する情報には非常に詳しい「ferret」

 

どんなデザインにも合いそうなシンプルで

オーソドックスな見出しデザインを採用しています。

 

設定方法

見出し2の設定は以下の通りです。

  • デザインを選択:背景-基本[カラーA:文字 B:背景]
  • カラーAを設定:#fff
  • カラーBを設定:#303030
  • カラーCを設定:設定なし

 

見出し3の設定

  • デザインを選択:下線-基本[カラーA:文字 B:下線]
  • カラーAを設定:設定なし
  • カラーBを設定:設定なし
  • カラーCを設定:設定なし

 

見出し3の設定は、上記設定に加えて

以下のCSSコードを「追加CSS」にコピペしてください。
※THE THORには上下線の見出し設定はありません。

追加CSSにコピペ

.partsH3-1 h3 {
color: #555;
padding: 15px;
border-bottom: solid 1px #555;
border-top: solid 1px #555;
}

 

[CSSコードの調整方法]

color: #555;←文字の色
padding: 15px;←文字と線の余白
border-bottom: solid 1px #555;←下線の種類・太さ・色
border-top: solid 1px #555←上線の種類・太さ・色

 

線種に関してはsoliddashedにすると破線に

dottedにすると点線になります。

色や太さ、線種などはお好みで変更してみてくださいね。

 

「LIGブログ」風見出しデザイン

LIGブログ様風見出しデザイン※見出し4の設定はありません。

 

オウンドメディアの超有名サイト「LIGブログ」

こちらのサイトもよくお世話になっています。

 

有名サイトというのはシンプルな見出しが多いですね。

つまり、Simple is best! ということ。

 

設定方法

見出し2の設定は以下の通りです。

  • デザインを選択:下線-基本[カラーA:文字 B:下線]
  • カラーAを設定:#333333
  • カラーBを設定:#181818
  • カラーCを設定:設定なし

 

見出し2の設定は、上記設定に加えて

以下のCSSコードを「追加CSS」にコピペしてください。
※下線の太さを加えなくて良い場合、CSSコードは不要です。

追加CSSにコピペ

.partsH2-1 h2 {
border-bottom: solid 2px #181818;
}

 

[CSSコードの調整方法]

border-bottom: solid 2px #181818;←下線の種類・太さ・色

初期設定では下線の太さが4pxになっていますが

それを細くするためのコードを追加しています。

 

下線の色を変更したい場合は、

#181818のカラーコードを変更してください。

 

見出し3の設定

  • デザインを選択:背景-基本[カラーA:文字 B:背景]
  • カラーAを設定:#333333
  • カラーBを設定:#f3f3f3
  • カラーCを設定:設定なし

 

見出し3の設定は、上記設定に加えて

以下のCSSコードを「追加CSS」にコピペしてください。

追加CSSにコピペ

.partsH3-21 h3 {
border-radius:10px;
}

 

[CSSコードの調整方法]

border-radius:10px;←角丸の変更

 

背景の角丸が10pxと大きいので

少しシャープにしたい場合は5pxなどに変更しましょう。

それだけでかなり印象が変わります。

 

「バズ部 」風見出しデザイン

「バズ部 」様風見出しデザイン※見出し4の設定はありません。

 

こちらもオウンドメディアの超有名サイト「バズ部」

やはり見出しはシンプルです。

 

設定方法

見出し2の設定は以下の通りです。

  • デザインを選択:背景-左線[カラーA:文字 B:背景 C:左線]
  • カラーAを設定:#383838
  • カラーBを設定:#f6f6f6
  • カラーCを設定:#205a97

 

見出し2の設定は、上記設定に加えて

以下のCSSコードを「追加CSS」にコピペしてください。

 

追加コードは「左線の太さを揃えるためのもの」なので

初期設定の太さで気にならない場合は、CSSコードは不要です。

追加CSSにコピペ

.partsH2-23 h2{
border-left: 5px solid #205a97;
}

 

[CSSコードの調整方法]

border-left: 5px solid #205a97;←左線の太さ・線種・色

 

左線の幅を超する場合は5px3pxにしたり

7pxにしたりして調整してください。

色は#205a97のカラーコードで変更してください。

 

見出し3の設定

  • デザインを選択:下線-基本[カラーA:文字 B:下線]
  • カラーAを設定:#383838
  • カラーBを設定:#205a97
  • カラーCを設定:設定なし

 

見出し3の設定は、上記設定に加えて

以下のCSSコードを「追加CSS」にコピペしてください。

こちらも下線の太さが気にならない場合、CSSは不要です。

追加CSSにコピペ

.partsH3-1 h3 {
border-bottom: solid 2px #205a97;
}

 

[CSSコードの調整方法]

border-bottom: solid 2px #205a97;←下線の線種・太さ・色

 

下線の幅を超する場合は2px4pxにするなどして

調整してみてください。

下線の色も#205a97のカラーコードで変更可能です。

 

「サルワカ 」風見出しデザイン

「サルワカ 」様風見出しデザイン

 

Webデザインで分からないことがあれば

必ずチェックしているサイト「サルワカ」。

 

「サルワカ」はフラットデザインを採用しているので

そんなサイトにしたい場合にオススメです。

 

設定方法

見出し2の設定は以下の通りです。

  • デザインを選択:背景-左下線[カラーA:文字 B:背景 C:左線]
  • カラーAを設定:#333333
  • カラーBを設定:#f7f7f7
  • カラーCを設定:#f89174

※特にCSSの設定はありません。

 

見出し3の設定

  • デザインを選択:左線-基本[カラーA:文字 B:左線]
  • カラーAを設定:#333333
  • カラーBを設定:#ffc778
  • カラーCを設定:設定なし

※特にCSSの設定はありません。

 

見出し4の設定

  • デザインを選択:下線-基本[カラーA:文字 B:下線]
  • カラーAを設定:設定なし
  • カラーBを設定:設定なし
  • カラーCを設定:設定なし

※見出し4はFont Awesomeというアイコンフォントを使ってカスタマイズするのですが
一番シンプルなコードを指定すると
他のパーツにも影響が出そうなので、念の為、
下線-基本[カラーA:文字 B:下線]の設定を選んでいます。

 

それでは、先に見出し4のアイコンフォントを使うため

Font Awesomeを読み込むコードを設定しましょう。

 

コードの設置先は、ダッシュボードメニューから

外観 → カスタマイズをクリックし基本設定[THE]をクリック。

 

続いて「高度な設定」をクリックして

◾️</head>直上の自由入力エリアに

高度な設定

 

以下のコードをコピペして「公開」ボタンを

クリックしてください。

Font Awesomeのコード
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css"type="text/css" media="all" />

 

ついでと言ってはなんですが、上記コードは

FontAwesomeをアニメーションさせるためのコードも

含んでいます。

 

いずれは使う機会もあると思いますので

入れておいて損はありません^^

 

ということで、FontAwesomeのコードが

所定の場所にコピペできたら続いて、以下の

CSSコードを追加CSSに貼ってください。

追加CSSにコピペ

.partsH4-1 h4::before{
content: "\f058";
font-family: "Font Awesome 5 Free";
left: 0;
position: absolute;
color: #f89174;
}.partsH4-1 h4{
margin-left:22px;
border-bottom:none;
}

 

上記コードをコピペした時点で、アイコンフォントが頭についた

見出し4のデザインに変わるハズです。

 

[CSSコードの調整方法]


.partsH4-1 h4::before{
content: "\f058";←アイコンはここで変更
font-family: "Font Awesome 5 Free";
left: 0;
position: absolute;
color: #f89174;←色はここで変更
}

.partsH4-1 h4{
margin-left:22px;←アイコンと文字の隙間はここで変更
border-bottom:none;←ここで下線を消しています。
}

 

なお、Font Awesome 5のアイコンを変更したい場合は

こちらの記事を参考にしてください。

Font Awesome(Webアイコンフォント)の使い方をやさしく解説!

※Font Awesomeのアニメーションコードを入れておくと
 このようにアイコンを点滅させたりもできるようになります。

 

「LISKUL 」風見出しデザイン

「LISKUL 」風見出しデザイン

 

オウンドメディアやマーケティングに関する記事が充実している「LISKUL」

こちらのサイトも見出しはシンプルで分かりやすいです。

設定方法はこちら。

 

設定方法

見出し2の設定は以下の通りです。

  • デザインを選択:背景-左線[カラーA:文字 B:背景 C:左線]
  • カラーAを設定:#3d3d3d
  • カラーBを設定:#fdf5d2
  • カラーCを設定:#ee7700

※特にCSSの設定はありません。

 

見出し3の設定

  • デザインを選択:下線-基本[カラーA:文字 B:下線]
  • カラーAを設定:設定なし
  • カラーBを設定:設定なし
  • カラーCを設定:設定なし

 

見出し3の設定は、上記設定に加えて

以下のCSSコードを「追加CSS」にコピペしてください。

追加CSSにコピペ

.partsH3-1 h3::before{
content: "\f14a";
font-family: "Font Awesome 5 Free";
font-weight:400;
left: 0;
position: absolute;
color: #f89174;
}.partsH3-1 h3{
padding-left:25px
}

※見出し3のアイコンフォントを表示するには
Font Awesomeのコードを設置する必要があります。
(サルワカ風見出しデザインの設定をご参照ください)

 

「見出し4」の設定は以下の通りです。

  • デザインを選択:左線-基本[カラーA:文字 B:左線]
  • カラーAを設定:#3d3d3d
  • カラーBを設定:#ee7700
  • カラーCを設定:設定なし

※特にCSSの設定はありません。

 

[CSSコードの調整方法]


.partsH3-1 h3::before{
content: "\f14a";
font-family: "Font Awesome 5 Free";
font-weight:400;
left: 0;
position: absolute;
color: #f89174;←アイコンの色はここで変更
}

 

「ここあ 」風見出しデザイン

 

最後に、私「ここあ」風の見出しデザインの変更例も

一応ご紹介しておきますね

まぁ、同じにしたいという人はいないと思いますが(笑)

 

STORKだろうが、THE THORだろうが

CSSコードさえ使えば見出しのデザインは

全て同じにできます。

 

ということで、設定方法はこちら。

 

設定方法

見出し2の設定は以下の通りです。

  • デザインを選択:背景-リボン[カラーA:文字 B:背景 C:影]
  • カラーAを設定:#fff
  • カラーBを設定:#58a9ef
  • カラーCを設定:#959e9b

 

さらにCSSコードを追加しましょう。

追加CSSにコピペ

.partsH2-27 h2 {
padding:10px 15px;
}.partsH2-27 h2::before {
content: none;
}

 

見出し3の設定

  • デザインを選択:下線-基本[カラーA:文字 B:下線]
  • カラーAを設定:#3d3d3d
  • カラーBを設定:#808080
  • カラーCを設定:設定なし

 

さらにCSSコードを追加しましょう。

追加CSSにコピペ

.partsH3-1 h3::before{
font-family: "icomoon";
content: "\ea12";
font-size: 1em;
color: #5ab9ff;
margin-right:7px;
}.partsH3-1 h3{
border-bottom: solid 3px #808080f;
padding-bottom: 5px;
}

 

見出し4の設定

  • デザインを選択:背景-基本[カラーA:文字 B:背景]
  • カラーAを設定:設定なし
  • カラーBを設定:設定なし
  • カラーCを設定:設定なし

 

さらにCSSコードを追加しましょう。

追加CSSにコピペ

.partsH4-21 h4 {
background: none;
border:solid 1px #58a9ef;
border-radius:5px;
color:#58a9ef;
padding:8px 15px;
}

 

私の見出し設定はあえて「調整方法」はご紹介しません(笑)

カラーコードを変えれば、色ぐらいは変更できると思いますので

ご自身で色々試してみてくださいね。

 

THE THORの見出しをおしゃれにカスタマイズする方法まとめ

THE THORの見出しをおしゃれにカスタマイズする方法まとめ

 

今回は、THE THORの見出しをおしゃれに

カスタマイズする方法をご紹介しました。

 

とは言え、まだまだ全然紹介数が足りないと思っているので

今後、いろんなサイトを参考にしながら、さらに

見出しデザインの紹介パターンを増やしていきたいと思います。

 

今回、THE THORの見出しをカスタマイズする方法として

いろんなサイトの見出しを紹介しましたが

 

大量にアクセスの集まる人気サイトというのは

特に奇抜なデザインをしているのではなく

 

むしろ非常にシンプルな見出しが多いということが

お分かりいただけたのではないでしょうか。

 

なので、THE THORの見出しデザイン設定は

確かにたくさんありますが、個性を重視しすぎているのか

少し奇抜すぎて使いにくいのもありますよね^^;

 

いずれにしても見出しは記事のポイントとなる

非常に重要な要素なので、だからこそ

  • 読者が見出しとして認識できる
  • 見やすくて分かりやすいデザイン

にすることが重要となってきます。

 

だから、もしもあなたが見出しのデザインで

悩んだ時は、ただ闇雲にいろんな設定を試すのではなく

様々なサイトを見た上で

  • どんな見出しデザインが分かりやすいのか?
  • どんな見出しデザインなら好感が持てるか?

など

 

色々と検証した上で、そのイメージに

近づけるように見出しデザインを設定してみてください。

 

なんやかんや言っても、あなたはデザインのプロではありません。

 

なので、少しでもあなたのサイトを

「良いデザインにしたい」と思うのであれば、今回ご紹介したように

様々なサイトを参考にしながら、デザインを組んでみてください。

 

やはり、良いサイトにはデザインにしろ、記事にしろ

「人気のある理由」が必ずあります。

 

デザインの考え方さえ分かれば

あなた一人の力で十分サイトはオシャレにできます。

 

なので、ぜひいろんなサイトを研究しながら

あなたの愛着の湧く素敵なサイトを作ってくださいね。

私は少しでもそんなあなたのお力になれたら嬉しいです^^

 

ということで、

最後までお読みいただきありがとうございました!

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?