見出し命!ブログに必要なデザイン

large_3170431061

ブログのデザインでもっとも大切なのは

見やすい事!

他のサイトとは違い、ブログは「記事」がメイン。
だから、文章がとにかく見やすい事が重要です。

ブログのカスタマイズは楽しくてついついのめり込み、このシンプルで大事な事を忘れがちになります。

photo credit: Javier Piragauta via photopin cc

ブログを始める前に決めておきたいデザイン

ブログの記事を魅力的にするのに重要なのは

  • H1(大見出し※STINGERの場合はタイトル)
  • H2(中見出し)
  • H3(小見出し)
  • H4(小見出し)
  • ul li(リストタグ)
  • blockquote(引用タグ)

です。

これを最初にちゃんと明確にしておくと、どんな記事も
メリハリのある記事となり印象も2割増し~5割増し!になります。

hタグ(見出し)のデザイン

hタグのデザインが魅力的だと非常にブログも魅力が上がるのですが、
なかなかユニークなデザインというのが難しい。

基本を最低限抑えると

  • 文字サイズを変える。
  • 適切な余白をあける

というのが最低条件になります。
とくにこの「余白」は結構重要なのでぜひ、意識して下さい!

STINGERではこんな感じ。

2013-10-14_204722

h2タグのデザイン

h2のタグは、よくある「ボーダー」系のデザインです。
CSSはこんな感じ。

ちなみに9行目の#1a1a1aこちらを参考に変えれば好きな色にできます。
スマートフォンはsmart.cssの方になりますので併せて変更が必要です。

で実は、STINGERの新しいものには

と隠しCSSがあります。
これの「.demo」を取って、現在のh2のcssを消すと

2013-10-14_205141

と「吹き出しデザイン」に変わります。
これは、今後変更するかもしれませんが多数、フォルダにバージョンを入れてありますので画像名を変える事で変わります。

2013-10-14_205253

h3タグについて

h3タグは、汎用性の高い「チェック」デザインを採用しています。

こちらも、いくつか用意しているので11行目の「cah3-bk.png」を変える事ができます。

2013-10-14_205646

※最近のバージョンのみです。ない方は以下からダウンロードして下さい。

tagicon.zip (1428 downloads)

引用のデザイン

ブログはよく、「引用」を用いますのでこれが「引用だ!」とわかるようにしておくと便利ですし読みやすいです。

こんな感じ

で、先の文を見ても分かると思うのですがこのデザインは引用以外でも使いやすいので僕は別途CSSを用意しています。

通常のblockquoteは、googleに引用文として捉えられるので、必ず使い分けましょう。

その他のhタグのデザイン

見出しタグのCSSデザインに関しては多数まとめられています。

【CSS】コピペで出来る見出しデザイン集

【CSS】CSSで作る見出しデザインの参考になるサイト

簡単なジェネレーターもあるようです。

CSS見出し ジェネレータ

他の人のマネしよう

まとめサイト

見出しタグにはいくつかの参考サイトもあります

2013-10-14_210843

見出しデザイン.com

2013-10-14_211122

croppy.org

ブログのデザインの参考

今回の記事の為にいくつかのサイトを巡ったのですが
意外と皆さんこだわっていない・・・

その中でも、「うわ~拘ってるなぁ。。」と思うサイトを紹介します。

WebDesignRecipies

2013-10-14_214343

タイトル

2013-10-14_211428

見出し

2013-10-14_211504

リスト

2013-10-14_211517

もう、拘りまくっていますね。

http://webdesignrecipes.com/

NANOKAMO BLOG

2013-10-14_214407

タイトル

2013-10-14_211820

見出し

2013-10-14_211902

NANOKAMOさんはとにかく全体的に吹き出しで統一しています。非常に凝った面白いデザインです。

http://nanokamo.com/

ホームページを作る人のネタ帳

2013-10-14_214431

タイトル

2013-10-14_212247

見出し

2013-10-14_212257

リスト

2013-10-14_212316

ネタ帳さんはWebクリエイターボックスのmanaさんのデザインですね。
当然、彼女のブログも拘っていて素敵です。

http://e0166.blog89.fc2.com/

バニデザノート

2013-10-14_214451

タイトル

2013-10-14_212640

見出し

2013-10-14_212724

バニデザさんのブログは凄く可愛いデザインですね。

http://vanidesign.blog.fc2.com/

まとめ

こんな風に、
「見出し」「引用」「リスト」などのデザインにも注目してみると
今後のデザインにとても役立つと思いますよ。

「デザインは細部に宿る。」って言いますし。

よければ、こちらもぜひ読んで下さい。
「脱」初心者の為のブログのSEO

公開日: