見出し命！ブログに必要なデザイン - 格安！レンタルサーバー比較

large_3170431061

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

見やすい事！

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

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

photo credit: Javier Piragauta via photopin cc

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

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

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

です。

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

hタグ（見出し）のデザイン

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

基本を最低限抑えると

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

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

STINGERではこんな感じ。

h2タグのデザイン

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

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;
}

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;

}

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

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

.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;
}

.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-repeat: no-repeat;

background-position: left top;

}

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

2013-10-14_205141

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

2013-10-14_205253

h3タグについて

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

.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;
}

.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-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」を変える事ができます。

2013-10-14_205646

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

tagicon.zip (1618 downloads)

引用のデザイン

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

こんな感じ

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

.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;
}