読者です 読者をやめる 読者になる 読者になる

はてなブログの見出しをインパクトあるように変更しました

まとめ まとめ-デザイン

f:id:mataro1:20150314212406j:plain

他の方々のブログを拝見していると、これいいなと思うデザインが多くありますよね。

そこで、私は少しずつブログデザインを変更し、記事を読みやすくする工夫をしようと思い、その中で実践したことを紹介しょうと思います。

はてなブログの見出し

はてなブログのデフォルトの見出しは基本的に文字の大小で分けられているため、読者に良心的なデザインとは言いがたいです。

どのようなデザインが良いのか

見出しの違いを分かりやすくするために、色や線を使用することで見出し(セクション)の区切りを分かりやすくすることが大切だと考えています。

また、色や線で区切れば、話の流れの区切りを明確にすることができます。

人気のあるサイトを拝見していると、シンプルなものもありますが、基本的に見出しは色や線を使用しているサイトが多い感じがします。

今回参考にした記事

こちらのサイトは多くの見出しの例が示してあり、大変参考になります。 しかし、はてなブログに適用するときは一部修正が必要です。.headding××の部分を変更する必要があります。(××は数字が入ります)


コピペで出来るCSS3で見出しスタイリング | 3streamer blog

 

こちらのブログははてなブログ向けに見出しの変更方法を紹介しています。

【はてなブログ】見出しデザインを変更する - AIUEO Lab2

見出しの変更方法

ブログデザインのCSSを上記サイトのコードを参考に変更すれば、見出しを変更できます。

はてなブログでは、スマートフォンのCSSも同様に変更して下さい。

また、紹介した上の方のサイトで「.headding02」などとなっている部分を「 .entry-content h2 」などとすれば、見出しにclassを設定する必要はありません。

見出しの使用方法

はてなブログで見たままモードなどで書く場合、大見出し(h3)を最初に使用しないようにして下さい。

ctrl+2のショートカットなどでh2を設定するようにしましょう。

記事の構成として、以下の様な構造が理想的です。しっかりと見出しの順番を守りましょう。

 

記事タイトル(h2)

h2

  -h3

  -h3

h2

  -h3

    -h4

    -h4

  -h3

    -h4

    -h4

おすすめ記事

www.mataro1.com

www.mataro1.com

www.mataro1.com