漫画・小説・ビジネス書なんでも最大100冊分が半額

洗練された見出しタグの作り方!!コピペでは上手くいかない理由

見出しの作り方

前回「見出しタグ」は”h2〜h4”しか使わないと解説しました。

HTML見出しタグ【見出しタグの使い方】記事はh2〜h4だけで構成しよう

今回は見出しのCSSを書こうと思ったのですが、コピペだけだと洗練された見出しを作ることができません。なぜなら、”テーマの幅””本文のフォントサイズ”に合わせる必要があるからです。

そこで、急遽”見出しデザインの基礎&注意点”を解説することにしました。

もちろん、デザインの世界に”正解”の2文字はありません。あくまで私が考える最適解や気をつけている点をお伝えしていきます。

見出しと本文の文頭を揃える

まずは以下の文章を比べてみてください。


見出しの文頭揃え

デザインに興味のない方でも、一目瞭然(いちもくりょうぜん)ではないでしょうか?

個人的な観測範囲だと、9割以上のサイトは②番のpadding(内側の余白)で、文頭が右に寄っています。

③番はmarginで記事幅より余白を広げる中級者向けデザインなので、そう多くはありません。(後ほど解説する)

カゲサイーヒカメヒカメ

そっか、じゃあpaddingで調整すればいいのね。それなら私にもできそうだわ。

カゲサイーカゲオカゲオ

ところが、そう簡単にはいかないんだ。上記の上下ボーダー線で囲むデザインだと、paddingの調整だけで済むんだけど、別のデザインだと内側の余白がないと不自然になってしまうんだよ。

背景ベタ塗り見出しは内側の余白が必要


文頭が揃った見出し①

見出しと本文の書き出し位置は同じだが、余白がないため不恰好。

文頭が右にズレた見出し②

本文の書き出しより見出しが右側にズレているが、左側の余白は開いている。

文頭が左にズレた見出し③

本文の書き出しより、見出しが左側にズレているので論外。

文頭と余白のバランスが良い見出し④

このようにすれば背景色が入っても問題ない。


先ほどは均等で美しく見えた①番の見出しも、背景色が加わった途端、窮屈なイメージではないでしょうか?

ところが②番のように、paddingだけで余白を取ろうとすると、どうしても右側にズレてしまい、文頭は揃いません。

かといって③番のように、marginだけで調整すると左により過ぎてしまい、やはり文頭は揃わないのです。

そこで④番のように、paddingmargin両方を調整します。

この時の注意点はmarginにマイナスの値を指定して、記事幅にピッタリ合わせること。記事幅はテーマごとに違うので、あなたのサイトに合わせる必要があります。

カゲサイーヒカメヒカメ

ちょっと難しいわね。

私にできるかしら……。

カゲサイーカゲオカゲオ

少し難しいかもしれないね。

でも、まだやることがあるんだ。

見出しをレスポンシブ対応させよう

スマホの見出しがはみ出る

PC用コードだけだと、スマホで見たときに見切れてしまうのです。

なのでスマホの幅、こだわるのであればタブレットの幅にも合わせてコードを書く必要があります。もっといえば”縦幅””横幅”も別に書かなければいけません。

しかし昨今、様々なサイズのデバイスが登場し、全てに対応させようとするのは非効率かつ現実的ではありません。そこで損切りをします。

例えば、スマホを横向きにして読む割合は少ないだろうから、横幅のコードは捨てたり、タブレットは横向きでみるユーザーもいそうだから検討しようなど、あなたのサイトの属性に合わせる必要があります。

属性の分析は”Googleアナリティクスのデバイスごとの見方 ”を参考にしてください。

見出し外側の上下余白は絶対解がある

続いて、見出し外側の上下余白について。見出しは下側の文章に対し作成しているので、余白のバランスを適切に取れば視覚的にわかりやすくなります。


見出し上下の余白

パッと見①番の上下均一の見出しが良く見えますが、④番が正解です。これに関しては例外はなく、どのサイトもこのバランスを推奨します。

見出し内の上下余白は十分に取ろう

今度は見出しの内側の上下余白を調整します。ここも自由ですが、ちょっと広すぎかな?くらいにしておくと見やすいサイズになります。

では、比べてみましょう。


内側の余白が広過ぎる見出し①

広すぎると野暮ったい。

内側の余白が狭すぎる見出し②

狭すぎると見出しだと認識されない。

内側の余白がちょうどいい見出し③

少し広めに取ることで、スマホの高速スクロールでも目に止まる。


この辺りは、カラーによって適切な数値が変わります。例えば当サイトのように、黒などの収縮色ならばpadding:20pxほど取っても、違和感はありません。

しかしサンプルのように赤など明るい膨張色の場合padding:15pxくらいがちょうどいいかもしれません。(サンプルは上下15px)実際のサイトに数値を当てて調整してみましょう。

参考までに同じ数値でも高さが変わって見える目の錯覚をご覧ください。

赤系PCはpadding:20px・スマホは15px
黒系PCはpadding:20px・スマホは15px

上の方が広く見えませんか?

見出しのフォントサイズも調整しよう

内側の余白はフォントサイズに合わせて調整されるため、”PC””スマホ”それぞれ指定する必要があります。

もし本文のフォントがスマホ「16px」PC「17px」と過程するならば、以下のサイズがおすすめです。

style.css
@media(max-width:700px){
/* スマホフォントサイズ */
.entry-content h2,.entry-content h3,.entry-content h4{
font-size:1.2em!important;
}}
/* PCフォントサイズ */
.entry-content h2{
font-size:1.6em;
}
.entry-content h3{
font-size:1.5em;
}
.entry-content h4{
font-size:1.4em;
}

スマホは”h2”〜”h4”すべて統一、PCは単位を1つずつ下げるとバランスが取れます。

見出しのフォントは太字にしよう

デフォルトで太字指定されていますが、あえて細字にしているサイトを見かけます。

しかし余程センスに自信がなければ、フォントは太字のままを推奨します。

細字にすれば、スタイリッシュになりますが、ご覧の通り目に留まりにくくなるからです。


見出しの細字フォント

スタイリッシュだが、目立たない。

見出しの太字フォント

モッサリするが、目立つ。

見出しを太字のままフォントファミリーを変更

どうしても変更したくなったら、フォントファミリーを変更するのはアリ。


例えば、こちらの洋楽おすすめ記事は、見出しをすべて英字にし、フォントを変更しています。

ダンスミュージック洋楽おすすめ【思わず踊りたくなる】ノリノリ洋楽おすすめ20曲
補足

日本語の場合は、”明朝体””ゴシック体”の混同は避けましょう。

見出しをセンタリングする場合は改行しよう

基本的に見出しのセンタリングは、おすすめしません。なぜなら、”余白”や”フォント”に加え、適切な位置で改行しないといけないからです。

これもサンプルを見た方が早いですね。

改行なしのセンタリング見出しはすべてを台無しにするデザインだ

意図的に改行しないと自動改行され、一撃でデザイン崩壊を起こす。

改行ありのセンタリング見出し折り返す位置を適切にすれば問題ない

改行位置を指定している。


折り返し地点に<br>タグを置くと好きな位置で改行できます。

こういったことが面倒なら、見出しのセンタリングはやめておきましょう。

センタリング見出しの参考記事はこちらをどうぞ

ワンピース名場面ランキング【動画付き】ワンピースの感動シーンランキングベスト101巻完結の恋愛漫画1巻完結の漫画・短編集から面白い恋愛漫画を10作紹介させてくれ

見出しのh2〜h4のデザインは一貫性を保とう

正直、ここがズレているサイトは一気に素人感が増します。

実際の例を見てみましょう。

h2見出し
h3見出し
h4見出し
h2見出し
h3見出し
h4見出し

①は”カラーがバラバラ”②はh2よりh3の方が目立っていて”アンバランス”

基本的にh2→h3→h4の順に目立つデザインにします。

ここまで極端なサイトは滅多にありませんが、この辺りは一貫性を持たせましょう。

見出しデザイン【まとめ】

デザインに興味がない人からしたら「こんな細かいとこ誰が見るねんっ」と思ったかもしれませんね。しかし見出しは記事中で、もっとも目に触れるデザインです。

現在ノースキルの学生や主婦(夫)の方でも気軽にブログを立ち上げられる時代。こうした小さな気配りの積み重ねが”信頼性”や”専門性”を高め、初めてプロのサイトであると認知されるのです。

もし今までデザインをお座なりにしていたなら、今回あげた注意点を一度見直してみてください。

こういったことも含め、次回は「実践ですぐに使える”h2〜h4”見出しのデザインセット」をいくつか作成します。

見出しの使い方はこちらをどうぞ

HTML見出しタグ【見出しタグの使い方】記事はh2〜h4だけで構成しよう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です