NAGOLOG

ナゴログ

はてなブログの見出しをカスタマイズ

休日の今日はサイトのCSS(スタイルシート)を少しイジッてました。僕はBrooklynというデザインテーマを使ってます。表示速度が速くシンプルなので気に入ってます。しかし白黒を基調にしてるので見出しに圧迫感があるのが気になってました。

 

brooklyn.hatenablog.jp

 

数日前に見出しを変更してましたが、せっかくのBrooklynのシンプルさが台無しになってます。これはデザインセンスの問題で、僕にはこういうセンスが足りないようです。

 

見出しのカスタマイズに挑戦

 

Brooklynの製作者、シロマさんのサイトにカスタマイズ用の記事があります。

www.notitle-weblog.com

 

 

見出しの効果とデザインテーマについて

www.nago-lifestyle.com

 

出来るだけ出しゃばらない見出しをつくる事を目標にしたので、見出しに背景色は付けません。出しゃばらず、それでいて本文とハッキリ区別できるスッキリとした見出しをつくるのが今回の目的です。

 

 

記事タイトル部分は文字を小さく

記事タイトル部分は通常でっかい文字になってます。なもんで2行表示になってたりします。まず疑問が「これデカい文字」にする必要あるの?でした。

 

記事タイトルは検索画面に表示されたときタイトルが切れないようにするには32文字以内で書く必要があります。32文字書くとどうしても2行になるのが気に入りません。タイトルのお仕事は訪問した時点で終わってるので小っちゃくてもいいじゃないの?ってわけで20pxに変更しました。

20pxまで落とすとタイトルを32文字にしても折り返しなく表示されました。

それだけだと味気ないので枠を入れましたら、今度はセセコましくなったので、マージンを調整して枠を広げてみました。結局通常と変わらないスペースを使ってしまったけど、スッキリ感は増しました。

 

大見出し(h2)のカスタマイズ

はてなの大見出しは(h3)になってますが、記事タイトルが(h1)なので順番的には(h2)を使います。訪問者が最初に接触する見出しなので重要度は最も高いといえます。

 

視認性を上げるため大きく表示するため30pxに。

 

デザインは違和感を与えないように記事タイトルと類似したものにして罫線の色で区別化してみました。

 

 

はてなの大見出し(h3)と中見出し(h4)の違いは文字の太さ

はてなブログの大見出しは(h3)中見出しは(h4)となってます。

僕のサイトで使うのは(h4)まで、サイズは共に21pxで設定しました。h3とh4は文字の太さ以外は同じものにしました。

 

色は主張しない物を選んだが・・

主張しすぎると品がなくなり、控えすぎると見出しの働きをしないので、おさえた青を使ってみたが、青はリンクカラーとして古くから認識されてることを忘れていた。

 

不都合を感じたら変更する予定です。

 

余白の美学とギャップ

文字の大きさやマージンなどで余白とギャップを意識したつもり。余白は特に重要で内容はべつにしても見た感じがスッキリして美しく読みやすく感じる。

目次はスルーされる場合が多いので小さい文字で、特に大見出しの直下で表示されるので良い感じでギャップを演出できたのではないでしょうか?

 

 

kimix.hatenablog.com

目次はkimixさんのサイトからお借りしました。

 編集後記

見た目が大事なのはブログ記事にしても同じで、見やすさにつながるカスタマイズはユーザビリティをあげることにつながります。しかし必要以上のカスタマイズはサイトの表示速度を遅くする原因になるので注意が必要です。

いくら装飾したところで見慣れたら同じ、表示速度を落とさないように気を付けるべきでしょう。

 

今日は名護市長選挙の投票日、朝早くに投票はすませました。

もうすぐ開票時間です。

 

NAGOでした See you