CSS で h タグをちょっとだけカスタマイズしてみました

見出しは超重要!

多くのブロガーさんや大手サイトでは「記事の書き方」を解説してくれています。それを読むと、見出しを効果的に使うことが、読みやすい記事を書く上での必須項目であるとわかります。

見出しの種類

見出しというのはHTMLで書くときの「hタグ」のことです。

  • h1(大見出し)
  • h2(中身出し)
  • h3(小見出し)
  • h4(小見出し)
  • ・・・(以下続く)

もちろん、ほかにも「ul li(リストタグ)」や「blockquote(引用タグ)」だって重要ですが、何事も順番にやっていくことが肝要だとおもいますので、今回はhタグをカスタマイズすることにしました。

見出しが整理されている=体系化された文章

見出しを整えることで何かいいことがあるのでしょうか。書くときに見出しを意識しながら書くようになる、というメリットがあります。つまり、目次を意識しながら書くようになるということです。

単行本でもそうですが、よく内容が整理された目次は、それだけで本の要約になっています。目次を読めば、その人が結論として何を言いたくて、どういった根拠を持ち出し、そのような論理展開で話を進めていくのか、まで見えてきます。

下書きをしないと文章はとんでもない方向に行ってしまう

「下書きをせずに文章を書き始めると、最初に考えていたことから話がどんどんずれてきて、最終的に反対の結論になってしまった」というのは、そう珍しいことでもありません。冒頭の問題提起の結論を述べずに、全然ちがう話題の議論を展開してしまうこともあるでしょう。

それは書きながら考えているからです。文章を作っていく過程で、新たなアイデアが湧き、それについて考えて、回答してしまうからです。

分かりやすく整理された文章は必ず下書きをしている

下書きをするのは全体の構成をあらかじめ頭に入れておくためです。全体の構成を知っていれば、各論を書いていても結論を見失いません。いま書いている文章がどこに向かっていて、スタート地点からどれくらいの距離に達しているのか、を把握することができます。

書き手が文章の構成をしっかりと理解していなければ、その文章が他人にわかるように書くことなんてできるはずがないでしょう。

あらかじめ整理した内容を、分かりやすく文章化するためにも、目次を作っておくことは大切です。論文作成の基本といってもいいですね。

hタグを整理して、使いやすいようにしておくことは、書くときに目次を作りやすくすることであり、読んでくれる人にわかりやすくすることです。

参考にしたサイト

ということで、CSSでhタグをカスタマイズしました。といっても、使うのはh2h3なので、それら2つだけです。h1はタイトルになるので変更していません。

h2タグ:Webpark – ウェブサイト作成に役立つことをいろいろと

このサイトではCSSの「:before」や「:after」などの擬似要素を使った方法を教えてくれました。

CSSの擬似要素を使った見出しデザイン|Webpark

h3タグ:WordPressテーマのSTINGER3公式サイト

このブログのWordPressテーマは「Stinger3」を利用しています。こちらでも見出しの大切さは力説されていて、しかも具体的なカスタマイズ方法まで教えてくれます。ありがたいですね。

見出し命!ブログに必要なデザイン(WordPressテーマのSTINGER3公式サイト)

カスタマイズしてみた

とくにむずかしいことをしたわけではありません。サンプルとして無料配布しているコードを使って、少し修正をしただけです。

h2タグのカスタマイズ

Webparkさんの記事の中から「8.ワンポイントを付ける」を利用させてもらいました。(CSSの擬似要素を使った見出しデザイン|Webpark)。

変更したのは①ワンポイントの色を変更、②文字サイズ24pxに拡大、③アンダーラインを追加、の3点です。

h3タグのカスタマイズ

Stinger3公式サイトからは、あらかじめ用意されている「チェック」デザインの色を変更しました。画像の指定を変えるだけです。「cah3-bl.png」を使います。

①ドット線を消して、②チェックマークを青色に変更し、③文字を大きくしました。

修正した結果

これでちょっとだけ好みの見出しになりました。

【修正前】

hタグのカスタマイズ前

【修正後】

hタグのカスタマイズ後

サンプル集のあるブログやサイトが参考になる

とはいえ、まだまだですね。これからも細かい改善が必要なようです。こだわりだすとキリがないですが、こういうのは書籍などで勉強してみるといいかもしれません。

ほかにも、ブログやまとめサイトなどで、参考になる例がいっぱいありました。

【CSS】コピペで出来る見出しデザイン集 – NAVER まとめ
【CSS】CSSで作る見出しデザインの参考になるサイト – W3Q
デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE

関連記事

Google Developers の PageSpeed Insights で計測したら瞬間的にモバイル・PC共に99点になったので記念にキャプチャしておきました【追記あり】

ひさしぶりにプラグインや画像処理、jQueryなどの修正をしてみたら、瞬間的にPageSpeed Insightsで99点になりました。わたしはあまりこの数値にこだわりすぎないようにしているのですが、これだけの高得点はなかなか無いと思うので…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…