フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

\おすすめのカスタマイズ/

ブログの本文を読みやすくする基本のカスタマイズ

どうも!フジグチです!

今日はブログの基本に返って記事を読みやすくするカスタマイズを確認したいと思います。

この設定はブログを書き始める時に出来るだけ早くやると、記事の書き方のルールを固めることが出来るので早めにすることをお勧めします。

100記事超えてから変更するとリライトに苦労するかも。。。

珍しく長い記事となっていますが、各項目の説明をした後に当ブログで設定しているコードを紹介しているので、最後までお付き合いください。

ブログの本文を読みやすくする基本のカスタマイズ

フォントサイズ

まずはフォントサイズです。

cssでの指定はfont-size:値○○;になります。

ブラウザのデフォルトの値は16pxになっていますが、フォントサイズはテーマ毎に指定されたりもしています。

フォントサイズの実例

はてなブログの人気テーマのフォントサイズを見ながら確認してみます。

15px

Minimalismは15pxに指定されています。少し小さめです。「Minimalism」という雰囲気には合っているかもしれませんね。

16px

Brooklynは16pxに指定されています。標準的なサイズなので特に違和感なく読むことができますね。

17px

このブログは17pxに指定されています。たった1pxされど1px。目が疲れづらく読みやすいかな?と思い変更しています。

Googleの推奨フォントサイズは16px「以上」とありますが、あまり大きすぎるとスマホ表示時に何度も改行され目の動きが多くなり逆に読みづらくなるので、16px前後で好みで決めて良いと思います。

真面目な固い文なのにフォントが大きすぎても不恰好ですし、明るく楽しい記事なのにフォントが小さいと楽しさ半減⤵のようにブログの雰囲気にも影響してくると思うので、ご自身のブログのコンセプトに合わせて決めると良いです。

フジグチ
フジグチ
個人的には16px~17pxがいいですね

行間

実は文字の大きさ以上に読みやすさに関わってくる重要な部分。

cssでの指定はline-height:値○○;になります。

行間の実例

実際にline-heightの例を挙げて見てみましょう。

line-height:1の場合
line-height:1の場合

line-height:2の場合
line-height:2の場合

近すぎるのは当然のことながら、あまり広すぎるのも一つの段落として捉えづらくなってしまいます。

フジグチ
フジグチ
個人的には1.6から1.9の間が読みやすいと思います

行間について詳しく知りたい方はサルワカさんのこの記事が分かりやすいです。
この記事を読んだら、分かりやす過ぎて行間について詳しく書く気がなくなりました(笑)

【CSS】line-heightで行間を調整する方法:おすすめの値は?

段落の余白

段落の終わりに下に出来る余白です。記事を書く際にenterキーを押した時に段落が変わります。その段落間の余白です。

CSSでの指定方法は色々ありますが、ここではp margin-bottom:値○○;とします。

段落間の余白の説明画像

ちなみにこの文章は自分のお気に入りの記事の一部を抜粋したものです。

改行で余白の調整をしない

ここで注意して欲しいことがあります。
下の画像はメインブログの記事の一部を抜粋したものですが、一見すると余白がしっかり取れているように見えます。

段落間の余白の説明画像2

 

しかし文章を反転させてみると、段落を空欄にして余白を無理やり作っているのが分かります。

段落間の余白の説明画像3



この無駄な改行をなくす為にCSSで余白の調整を行うのです。

ちなみにこの記事は私のブログについて妻が書いた記事です。よかったらお読みください。

話を戻して、この時のHTMLの状態を見てみます。(今この瞬間に勝手に、妻の記事編集画面を開いたことがバレました)

段落間の説明画像5

<p></p>タグの間に「」があるのが分かりますでしょうか?この「」の正体は&nbsp;(ノーブレークスペース)というものです。

これは空白を作ろうとしてenterキーを連続して押すと空の<p>タグが生成され、その空の状態を補完するために自動で挿入されたものです。

「&nbsp;の多用はseo的に不利になる」という記事や▽

【HTML】SEO的にNG?やってはいけない「改行」を”2つ”紹介するよ! | nuconeco

「Googleのお偉いさんがそのことについては否定している」という記事もあります。▽

正しいHTMLは検索順位に影響する? | アレグロのSEOブログ
興味のある方は上のサイトを参考にしてみてください。

フジグチ
フジグチ
個人的にはHTML上にが散乱しているのがものすごく気になります

段落間の実例

ノーブレークスペースを使わないでも、段落間の余白を確保するためにCSSで段落下の余白の調整を行います。
実際に見てみましょう。

1emの場合

標準的な段落の余白です。

段落間1emは1文字分という意味です。

2emの場合

少し広めの段落の余白です。

段落間2emは2文字分という意味です。

これは好みで構わないと思いますが、上述した行間を広くした場合は、段落間の余白も広くしないと段落が変わったことが分かりづらくなるので、合わせて調節してください。

余白は少し広めのほうが読みやすい気がしますが、過剰に大きくしすぎると無駄なスクロールが増え、読者としてはストレスに感じるかもしれません。バランスを大事にしましょう。

字間

字間は1文字ごとの文字同士のスペースです。

cssでの指定はletter-spacing:値○○;になります。

はてなブログの人気テーマTOP10の中で調べると、字間の指定がされているのは4つのテーマでした。
中でも一番広かったのは当ブログでも使用している【UnderShirt】です。

何も指定しない0の状態のテーマも多いですが、UnderShirtのデフォルトの状態は0.08emという値が指定されています。

字間の実例

これも実際に見てみます。

letter-spacing: 0の場合

このブログの本文はカスタマイズして文字と文字の間の値を狭くしてあります

letter-spacing: 0.08emの場合

当ブログテーマのデフォルトの状態ではこれくらいの文字と文字の間隔でした

差が小さすぎて分かりづらいかもしれませんが、文字と文字の間のスペースが違います。
その違いによって改行の位置が変わり、文章の終わる場所も違います。

例はほんの35文字程度ですが、1記事3000文字と仮定するとその差はかなり大きいものになります。
またemという単位は1文字に対しての相対的な値なので、フォントサイズを大きくした場合、合わせて字間も広くなってしまうので注意が必要です。

フジグチ
フジグチ
当ブログは0に設定しています。個人的には0.05em以下であれば問題ないかな?と思っています。0.08emはちょっと広く感じました。

人気テーマの設定確認

はてなブログの人気テーマトップ10の設定はどうなっているか見てみましょう。

このリストは6/18時点で当ブログで確認したものです。ランキングは頻繁に変わっています。

画面サイズによってフォントサイズを変えているテーマもあるので、スマホ表示時の設定で比較しています。

比較しやすいように勝手に単位を変えているもの(例:Minimalismの行間34px⇒2.26)もあるのでご了承ください。

はてなブログ人気テーマ設定早見表
テーマ フォント 行間 段落間 字間
Minimalism 14px 2.26 1em 0
UnderShirt 16px 1.6 0.08em
Brooklyn 1.7 0
Haruni 1.6
Innocent 15px 1.7 1.5em
SOHO 14.6px 2 1em 0.04em
Blank 16px 1.7 1.6em 0
JOURNAL. 15px 1.85 1.5em 0.03em
DUDE 14.4px 1.8 1em 0
ZENO-TEAL 1.5em 0.01em

テーマ毎に設定がかなり違いますね。Minimalismの行間の広さが際立っています。

おすすめ設定

最後に当ブログの設定コードをご紹介します。

まずCSSを貼る場所を確認しておきます。

CSSの貼り付け方
STEP
ダッシュボードの【デザイン】を選択

CSSの貼り付け手順1

STEP
【スパナマーク】  【デザインCSS】の順に選択し、 枠内にコードを貼り付ける
CSSの貼り付け手順2

続いてコードです。

/*-----記事本文の設定-----*/
.entry-content p {
    font-size: 17px; /*フォントサイズ*/    
    line-height: 1.7; /*行間*/
    margin-bottom: 1.8em; /*段落の余白*/
    letter-spacing: 0; /*文字間*/
}

「段落の余白」の部分は今までの記事でenterキーによる改行でスペースを確保してきた方はデザインが大きく崩れる可能性がありますのでご確認ください。

お使いのテーマや先に入れたCSSと干渉してうまく反映されないことがあります。
その場合は「;」の前に!importantと付けることで反映することが出来ると思います。
例:font-size: 17px!important;
必ず半角で入力してください。

長くなりましたが、自分の書いた記事を快適に読んでもらうために必要なカスタマイズだと思いますので、参考にしてみてください。

最後までお読み頂きありがとうございました。

トップへ戻る