「初心者ブロガー必見!」読みやすいブログを書くコツ

ブログ運営

皆さんこんにちは!

今回は、読みにくいブログを改善するための情報収集をした結果得られた、様々な学びを皆さんに共有していきたいと思います。

なんか自分にのブログ、読みにくいな、、、

と思われている方の参考になれば幸いです!読者にとって読みやすいブログを一緒に作りましょう!

読みやすいブログにするために私がしたこと

今回は、今皆さんが見ているブログ『「意識高いね」は褒め言葉』と有名ブロガーマナブさんのブログを比較しました。

やっぱり、成功している人をパクる、マネするってのが成功する最短距離だと思うので(笑)

読みやすいブログのための改善ポイント

太字を使い過ぎない

自分のブログとマナブさんのブログを比較してみて気づいたことは、やたらと太字を使用しているこということ。

そして実際に、太字とブログの関係について調べてみると衝撃の事実が、、、、

太字の使い方にルールがあることが判明しました。それがこちらです。

①見出しタグと太字を併用しない
②太字は1記事で最大3個まで
③太字は文章ごとではなく単語単位で使用する
④太字の箇所を適度に分散させる

です。

もともと太字は、「大切な部分を強調する」という役割を担っているため、あまりにも乱用しすぎるとどこが重要だかわからなくなってしまうし、SEO的にもよろしくないのだとか、、、

そのため、太字は使用しすぎないようにしましょう。読みやすくなるし、SEO的にも効果があるので一石二鳥です。

ちなみに、どうしても太字の文を書きたいときは、ビジュアルから出ではなくコードから太字にしましょう。

具体的には、<strong>を使用するのではなく<b>を使用するのです。

すると不思議なことに、SEOに悪影響が出にくいのだとか、、、!

改行のタイミングはスマホ画面で3~5行

パソコン画面では見やすくても、スマホ画面で見たら文字がぎっちり、なんてことはよくあります。広々使えるパソコン画面では気づきにくいところですよね。

今や大半の人がスマホを持っている時代。だからこそ、記事はスマホで読まれることのほうが多いしスマホユーザーを意識した記事構成にする必要があります。

マナブさんのブログを見てみたところ、スマホ画面で段落が3~5行で一段落になっています。20文字で一行なので、一段落60~100文字程度ということですね。

そして、適切な改行があって見やすい。

3~5行を目安に、適度に改行を入れてみましょう!

フォントサイズ、行間、段落の改行をCSSで調整する

改行を積極的に入れるようにしてみたのですが、どうしてか自分のブログは見にくい(笑)

ちなみに見やすいブログにする前の自分のブログはこんな感じ。

マナブさんのブログと自分のブログを比較して、

1行の改行じゃあ見にくい!2行くらい改行しないとダメなのか!

と思ったのですがどうやらそうでもなさそう!

デフォルトでサイト訪問者に「読みやすいサイト」と思ってもらえるCSSを発見しました!それがこちら。

.entry-content {
font-size : 16px ; /*フォントサイズ*/
line-height : 1.7 ; /*行間*/
}
.entry-content p {
margin-bottom: 1.8em; /*段落の余白*/
}

です!参考サイトはこちらになります。

ワードプレスを使用されている方なら、上記をコピーしたうえで、ワードプレスの管理画面にて

「外観」→「テーマエディター」→「スタイルシート」→「スタイルシートに貼り付け」

をすると自動で読みやすい文章を作ってくれるようになりますよ!

ちなみにこのCSSを組み入れたことで僕のブログも(ちょっと)見やすくなった気がします!ビフォーアフターを載せますね!

■before

■after

あまり違いが分かりませんが、、、、
一般的なWEBデザインでの行間は『1.4から1.7倍』と言われています。本当に微妙な間隔の調整で見た目が変わるのでとても重要です!

スマホ一画面を文字だけで埋めない

スマホ一画面を文字だけでぎっしりと埋めてしまうと読み手は読みにくいし疲れてしまいます。

そのため、枠や図、画像などをちりばめることで読み手にとって読みやすくなるような記事構成を作ることが必要になります。

例えば、段落のすぐ下に画像を入れてみるとか!マナブさんはやっていますね!

不自然にならない程度にやってみましょう!

文字のサイズを変えすぎない

ここ強調したいな、、、

という文字を自分は大きくしていたのですが、これってよくないですね(笑)

主張が激しすぎるというか、場所をたくさん取るというか、、、スマホ画面だと特に顕著ですね(笑)

どうしても強調したい部分については、<b>で太字にすることにとどめましょう。わざわざフォントを変えて文字を大きくする必要はありません。

枠の使い方にこだわってみよう!

枠を使いこなすことで、記事の見栄えが良くなります。

枠とは例えば

こんなの物だったり
あんな物だったり
こんなかわいいものまで!

僕が使っているテーマ「cocoon」には、大変ありがたいことにその枠がデフォルトでついています!

そう考えると、cocoonって素晴らしいですね!(笑)

マナブさんのブログでも、枠をいい感じに利用されています。

まとめ

①太字を多用しない
②改行のタイミングはスマホ画面で3~5行
③フォントサイズ、行間、段落の改行をCSSで調整する
④スマホ一画面を文字だけで埋めない
⑤文字のサイズを変えすぎない
⑥枠の使い方にこだわってみよう!

成功している人をマネする、比較することがよりよいものを作っていくための近道かなと思います!

引き続き、成功している人の「いいところ」を利用しながら、日々いいブログを皆さんにお届けできたらな~と考えています!

 

コメント

タイトルとURLをコピーしました