こんなブログは嫌だ!やってはいけないブログのHTMLやCSS

落胆する彫刻

今のブログサービスは多機能で、ボタンひとつでブログ記事に様々な装飾(CSS)やHTMLを加えたり、全体のCSS(外部CSS)を編集できたりしますよね。

CSSを使って装飾することによって、楽しく、読みやすいブログになって良いのですが、これだけはやってはいけない、ブログ記事内のHTMLやCSSを挙げていこうと思います。

リンクじゃないところに下線がひいてある

「ここは重要な所ですよ」という意味で使っている方をたまに見かけますが、リンクじゃない所に下線を入れるのはリンクと勘違いされやすいです。

これは普通のテキストです。

これはリンクに見えますが、普通のテキストだったりします。

これはリンクです。

FC2ブログの機能で下線を装飾するボタンがあり、それを使うとHTMLでは<u>で囲まれます。<u>は、ほとんどの場合使うべきではないHTMLタグです。

特に重要なテキストには<strong>を、強調したいテキストには<em>を使うようにしましょう。そして、自分のブログに合った装飾を外部CSSなどで指定してあげましょう。

余談ですが、昨晩 iPhoneでブログを色々見ていた時に、リンクじゃないテキストに下線を使っているブログに遭遇しまして、5回位気づかずタップしていました。6回目にテキストだと気づきました。(ただのバカでした。)

ブログの文章がカラフルすぎる

注目して欲しいテキストの色を変えるのは、楽しいブログになり、若い方への受けも良いと思います。

ですが、色数が多かったり、色が変更されている部分が多すぎると、読みづらくなり、どこが注目部分なのかも分からなくなってしまいます。

若い方の受けを狙って楽しいブログをつくっています。

注目してほしい部分の色を変えたりして色々工夫しています。

本当に注目して欲しい部分はココなのに・・あれ?わかりますか?

また、自分のブログのリンク色と同じ色をテキストに使ったり、リンクと間違われやすい色(#0000FF や #810081 など)を使うのも控えた方が良いです。

ブログの文字が小さい、行間が狭い

ブログの文字が小さいと、視力が悪い方にとって読むのが苦痛になります。また、行間(テキストとテキストの行の間)が狭いと読みづらくなります。特にテキストの量が多いブログは気をつけましょう。

ブログの文字が小さいと、視力が悪い方にとって読むのが苦痛になります。また、行間(テキストとテキストの行の間)が狭いと読みづらくなります。ブログの文字が小さいと、視力が悪い方にとって読むのが苦痛になります。また、行間(テキストとテキストの行の間)が狭いと読みづらくなります。

文字の大きさはfont-size、行間はline-heightをCSSで指定してあげることで、読みやすいブログになります。

body {
	font-size: 16px;
	line-height: 1.5;
}

上記の指定はあくまでも一例ですので、自分のブログに合った数値と単位で指定してあげてくださいね。

また、ブログの文字が大きすぎる、行間が広すぎる場合も読み手に不快感を与えてしまうので気をつけましょう。

段落と段落の余白が狭い、または広い

段落(文章のまとまり)の間の余白が狭すぎても、広すぎても読みづらいです。また、意味も無く段落の間の余白を変えるのも読み手に不快感を与えてしまいます。

段落の間の余白が狭いと読みづらいですよね。

段落なのか、行間なのか分かりづらく、長文のものになると読む気も失せてしまいます。

だからといって広すぎてもどうかと思います。読み手に無駄なスクロールやフリックをさせないでください。

意味もなく段落の余白が変更してある文章は、読者を不快にさせてしまいます。一定のリズムで読めるようなブログにしましょう。

Enterでの改行で自動的に<br>が挿入される機能(自動改行)を使っている方は、段落の余白が狭いという事は無いと思うのですが、無駄に段落の余白を作りすぎたり、意味もなく余白の長さを変えてしまう事に注意してください。

段落を変えるタイミングも、多すぎず、少なすぎず、読んでくださる方の事を考えて作っていきたいですね。(わたしも試行錯誤中です・・。)

適切な場所に適切なスタイルを

適切なスタイルというのは、ブログのジャンルや文章によっても変わってくると思うので凄く難しいものです。

色々なブログを見て、「このブログは読みやすかった」なぜ読みやすかったのか?、「このブログは読みにくかった」なぜ読みにくかったのか?、と考えることで、少しづつわかってくるものだと思います。

そして、一番に考えるのが自分のブログを読んでくださる方の事ですよね。

一度に全ての事を考えてブログをつくるのは難しいと思いますが、まずはこの記事で紹介した「これだけはやめておきたい事」をしないように気をつけていきましょう。(わたしも気をつけます!)

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