ブログの文章を読みやすくするCSSサンプルデザイン

Article

テキストを書き出しただけのような文章は、たとえ良い内容だったとしても読んでいくのに疲れてしまいます。ブログの記事を楽しく読んでもらえるようにするためにするためには少し工夫が必要です。

今回は、少しの画像とCSSで文章を華やかに読みやすくするデザインをサンプルコードつきでご紹介します。

見出しのサンプルデザイン

シンプルな見出しのサンプル

この見出しのソースコードをみる

女性的な見出しのサンプル

この見出しのソースコードをみる

見出しをつけることによる効果

文章をブロック化して見出しをつけることで、読んでいる人に内容を理解して貰えやすくなります。そして、記事を読むのに疲れてきたな・・と思いだした時に、魅力的な見出しがあると、続きも読みすすめたくなります。

リストのサンプルデザイン

  • シンプルなリストのサンプル1
  • シンプルなリストのサンプル2

このリストのソースコードをみる

  • チェックリストのサンプル1
  • チェックリストのサンプル2

このリストのソースコードをみる

リストをつけることによる効果

重要な部分をリスト化することで、読んでる方に理解してもらいやすくなります。また、単調な文章にメリハリを持たせることができます。

ボックスのサンプルデザイン

シンプルなボックスのサンプル

このボックスのソースコードをみる

角丸なボックスのサンプル

このボックスのソースコードをみる

ボックスによる効果

見出し、リスト同様に文章にメリハリを持たせることができます。また、ボックスで文章を囲むことによりその内容に注目してもらいやすくなります。

シンプルな見出しのサンプル

HTML

シンプルな見出しのサンプル

CSS

.simple-heading {
	padding: 0.5em 1em;
	background: #F3F3F3;
	border-top: 5px solid #039;
	border-bottom: 1px solid #B3B3B3;
	text-shadow: 1px 1px 1px #FFF;
}

見出しのサンプルデザインへ

女性的な見出しのサンプル

HTML

女性的な見出しのサンプル

CSS

.female-heading {
	padding: 0.5em 1em;
	border-top: 2px dotted #F69;
	border-bottom: 4px double #F69;
}

見出しのサンプルデザインへ

シンプルなリストのサンプル

HTML

  • シンプルなリストのサンプル1
  • シンプルなリストのサンプル2

CSS

.simple-list {
	padding-left: 20px;
	background: url(■ 画像URL ■) no-repeat left center;
}

使用画像

リスト青 リスト緑 リスト黒 リスト赤

リストのサンプルデザインへ

チェックリストのサンプル

HTML

  • シンプルなリストのサンプル1
  • シンプルなリストのサンプル2

CSS

.check-list {
	padding-left: 25px;
	background: url(■ 画像URL ■) no-repeat left center;
}

使用画像

チェックリスト

リストのサンプルデザインへ

シンプルなボックスのサンプル

シンプルなボックスのサンプル

CSS

.simple-box {
	padding: 10px;
	background: #EBEDFF;
	border: 2px solid #039;
}

ボックスのサンプルデザインへ

角丸なボックスのサンプル

CSS3を使用しています。IE9以下のブラウザでは角は丸く表示されません。

HTML

角丸なボックスのサンプル

CSS

.simple-box {
	padding: 10px;
	background: #F3F3F3;
	border: 1px solid #999;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

ボックスのサンプルデザインへ

ブログの記事もカスタマイズ

ブログのカスタマイズとなると、テンプレート全体にばかりに気を取られがちですが、大事な部分はブログの記事内容です。

あまり派手な装飾をしてしまうと逆に読みづらくなってしまうのですが、適切な装飾をしてあげることで読みやすく楽しいブログになります。

ブログを書いていたらつい長文になってまとまりがなくなる・・という方は是非やってみて下さい。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。