ここあです。
WordPressテーマ「THE THOR」の
見出しデザインのバリエーションは
全部で「53種類」もあります。
とは言え、バリエーションを全て試して
チェックするのは非常に大変^^;
確かに記事の見出しはブログやサイトを運営する際
読者の目をひくアイキャッチの要素としても重要ですし
たくさんのデザインが選べるに越したことはありません。
しかし、さすがに53種類もデザインがあると
どう組み合わせたら良いか分からないと
あなたはお困りではないでしょうか?
と言うか、考えるのが面倒ですよね?^^;
私はそう(笑)
ということで、
見出しのデザインが多いのは嬉しいけど
- 考えるのが面倒くさい!
- どう組み合わせたらいいか分からない!
というあなたのために
今回は有名サイトをお手本とさせていただき
見出しの最適な組み合わせや、それに付随する設定方法
見出しのカスタマイズ方法について解説させていただきます。
なので、もしもあなたが「これだ!」という
組み合わせが見つかったら、ぜひ採用してみてください。
THE THORの見出しをカスタマイズする方法
まず最初にTHE THORの見出しを
カスタマイズする方法を簡単に説明しておきますね。
THE THORの見出しをカスタマイズする場合は
ダッシュボードメニューから外観 → カスタマイズをクリックし
続いて、パーツスタイル設定[THE]をクリック。
さらに、見出し設定(固定ページ用)をクリックすると
そこから見出しのデザインが変更できます。
なので、これから説明する見出しの変更方法と書いてあるところは
ここで設定してください。
そして、さらにカスタマイズ方法と書いてある部分は
CSSコードの記述が必要となりますので、CSSは以下の場所
ダッシュボードメニューから外観 → カスタマイズをクリック
一番下の「追加CSS」をクリックして
CSSコードを以下の部分に貼り付けるようにしてください。
コードをコピペすれば、表示が勝手に変わりますので^^
以上の設定箇所を踏まえた上で、あなたがお気に入りの
見出しデザインを探してみてくださいね。
THE THORの見出しに最適な組み合わせを探そう!
THE THORの見出しに最適な組み合わせを探してみてください。
設定方法やカスタマイズ方法(CSSコード)も記載しますので
ぜひ試してみてくださいね^^
「ferret」風見出しデザイン
※見出し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
←上線の種類・太さ・色
線種に関してはsolid
をdashed
にすると破線に
dotted
にすると点線になります。
色や太さ、線種などはお好みで変更してみてくださいね。
「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;
←左線の太さ・線種・色
左線の幅を超する場合は5px
を3px
にしたり
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;
←下線の線種・太さ・色
下線の幅を超する場合は2px
を4px
にするなどして
調整してみてください。
下線の色も#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」
こちらのサイトも見出しはシンプルで分かりやすいです。
設定方法はこちら。
設定方法
「見出し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の見出しデザイン設定は
確かにたくさんありますが、個性を重視しすぎているのか
少し奇抜すぎて使いにくいのもありますよね^^;
いずれにしても見出しは記事のポイントとなる
非常に重要な要素なので、だからこそ
- 読者が見出しとして認識できる
- 見やすくて分かりやすいデザイン
にすることが重要となってきます。
だから、もしもあなたが見出しのデザインで
悩んだ時は、ただ闇雲にいろんな設定を試すのではなく
様々なサイトを見た上で
- どんな見出しデザインが分かりやすいのか?
- どんな見出しデザインなら好感が持てるか?
など
色々と検証した上で、そのイメージに
近づけるように見出しデザインを設定してみてください。
なんやかんや言っても、あなたはデザインのプロではありません。
なので、少しでもあなたのサイトを
「良いデザインにしたい」と思うのであれば、今回ご紹介したように
様々なサイトを参考にしながら、デザインを組んでみてください。
やはり、良いサイトにはデザインにしろ、記事にしろ
「人気のある理由」が必ずあります。
デザインの考え方さえ分かれば
あなた一人の力で十分サイトはオシャレにできます。
なので、ぜひいろんなサイトを研究しながら
あなたの愛着の湧く素敵なサイトを作ってくださいね。
私は少しでもそんなあなたのお力になれたら嬉しいです^^
ということで、
最後までお読みいただきありがとうございました!