ブログのデザインでもっとも大切なのは
見やすい事!
他のサイトとは違い、ブログは「記事」がメイン。
だから、文章がとにかく見やすい事が重要です。
ブログのカスタマイズは楽しくてついついのめり込み、このシンプルで大事な事を忘れがちになります。
photo credit: Javier Piragauta via photopin cc
ブログを始める前に決めておきたいデザイン
ブログの記事を魅力的にするのに重要なのは
- H1(大見出し※STINGERの場合はタイトル)
- H2(中見出し)
- H3(小見出し)
- H4(小見出し)
- ul li(リストタグ)
- blockquote(引用タグ)
です。
これを最初にちゃんと明確にしておくと、どんな記事も
メリハリのある記事となり印象も2割増し~5割増し!になります。
hタグ(見出し)のデザイン
hタグのデザインが魅力的だと非常にブログも魅力が上がるのですが、
なかなかユニークなデザインというのが難しい。
基本を最低限抑えると
- 文字サイズを変える。
- 適切な余白をあける
というのが最低条件になります。
とくにこの「余白」は結構重要なのでぜひ、意識して下さい!
STINGERではこんな感じ。
h2タグのデザイン
h2のタグは、よくある「ボーダー」系のデザインです。
CSSはこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h2 { font-size: 24px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 35px; border-left-width: 5px; border-left-style: solid; border-left-color: #1a1a1a; color: #333; line-height: 30px; margin-top: 20px; margin-right: 0px; margin-bottom: 20px; margin-left: -40px; } |
ちなみに9行目の#1a1a1aをこちらを参考に変えれば好きな色にできます。
スマートフォンはsmart.cssの方になりますので併せて変更が必要です。
で実は、STINGERの新しいものには
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.demo h2 { font-size: 24px; padding-top: 10px; padding-right: 10px; padding-bottom: 20px; padding-left: 75px; color: #000; line-height: 30px; margin-top: 20px; margin-right: 0px; margin-bottom: 20px; margin-left: -65px; background-image: url(images/cah2-bk.png); background-repeat: no-repeat; background-position: left top; } |
と隠しCSSがあります。
これの「.demo」を取って、現在のh2のcssを消すと
と「吹き出しデザイン」に変わります。
これは、今後変更するかもしれませんが多数、フォルダにバージョンを入れてありますので画像名を変える事で変わります。
h3タグについて
h3タグは、汎用性の高い「チェック」デザインを採用しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.kizi h3 { font-size: 20px; margin-bottom: 30px; margin-top: 10px; padding-top: 15px; padding-right: 10px; padding-bottom: 15px; padding-left: 60px; color: #000000; line-height: 30px; background-image: url(images/cah3-bk.png); background-repeat: no-repeat; background-position: left center; margin-left: 0px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999999; } |
こちらも、いくつか用意しているので11行目の「cah3-bk.png」を変える事ができます。
※最近のバージョンのみです。ない方は以下からダウンロードして下さい。
tagicon.zip (4340 downloads)引用のデザイン
ブログはよく、「引用」を用いますのでこれが「引用だ!」とわかるようにしておくと便利ですし読みやすいです。
こんな感じ
で、先の文を見ても分かると思うのですがこのデザインは引用以外でも使いやすいので僕は別途CSSを用意しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.blockqmodoki { background-color: #f3f3f3; background-image: url(images/quote.png); background-repeat: no-repeat; background-position: left top; padding-top: 70px; padding-right: 20px; padding-bottom: 20px; padding-left: 40px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: -40px; border-left-width: 1px; border-left-style: solid; border-left-color: #CCC; } |
通常のblockquoteは、googleに引用文として捉えられるので、必ず使い分けましょう。
その他のhタグのデザイン
見出しタグのCSSデザインに関しては多数まとめられています。
簡単なジェネレーターもあるようです。
他の人のマネしよう
まとめサイト
見出しタグにはいくつかの参考サイトもあります
ブログのデザインの参考
今回の記事の為にいくつかのサイトを巡ったのですが
意外と皆さんこだわっていない・・・
その中でも、「うわ~拘ってるなぁ。。」と思うサイトを紹介します。
WebDesignRecipies
タイトル
見出し
リスト
もう、拘りまくっていますね。
NANOKAMO BLOG
タイトル
見出し
NANOKAMOさんはとにかく全体的に吹き出しで統一しています。非常に凝った面白いデザインです。
ホームページを作る人のネタ帳
タイトル
見出し
リスト
ネタ帳さんはWebクリエイターボックスのmanaさんのデザインですね。
当然、彼女のブログも拘っていて素敵です。
バニデザノート
タイトル
見出し
バニデザさんのブログは凄く可愛いデザインですね。
http://vanidesign.blog.fc2.com/
まとめ
こんな風に、
「見出し」「引用」「リスト」などのデザインにも注目してみると
今後のデザインにとても役立つと思いますよ。
「デザインは細部に宿る。」って言いますし。
よければ、こちらもぜひ読んで下さい。
「脱」初心者の為のブログのSEO