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

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には上下線の見出し設定はありません。

/*見出し3カスタマイズ*/
.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コードは不要です。

/*見出し2カスタマイズ*/
.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」にコピペしてください。

/*見出し3カスタマイズ*/
.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コードは不要です。

/*見出し2カスタマイズ*/
.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は不要です。

/*見出し3カスタマイズ*/
.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>直上の自由入力エリアに

高度な設定

 

 

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

クリックしてください。

<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に貼ってください。

/*見出し4カスタマイズ*/
.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コードの調整方法]

/*見出し4カスタマイズ*/
.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」にコピペしてください。

/*見出し3カスタマイズ*/
.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コードの調整方法]

/*見出し3カスタマイズ*/
.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コードを追加しましょう。

/*h2見出し*/
.partsH2-27 h2 {
padding:10px 15px;
}

.partsH2-27 h2::before {
content: none;
}

 

「見出し3」の設定

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

 

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

/*h3見出し*/
.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コードを追加しましょう。

/*h4見出し*/
.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の見出しデザイン設定は

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

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

 

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

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

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

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

 

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

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

様々なサイトを見た上で

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

など

 

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

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

ということで、最後までお読みいただき

ありがとうございました!

 

もしも設定で分からないことがありましたら

お気軽にご相談くださいね。

「ここあ」に問い合わせをする

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?