はてなブログで文章の余白・文字間を調整、CSSを使った簡単テクニック紹介

そんな悩みに答えます。

結論からいうと、「はてなブログ」のデザインCSSにコードを貼り付けることでブログ記事の文字間、余白を調整、変更することができます。

この記事では、ブログ記事の文字間の余白を調整する簡単な方法を詳しく解説します。

文章の余白・文字間が読者に与える印象はとても大きいです。

読者にとって読みやすいと感じる要素で重要なパートなので、しっかりと調整してみやすさを意識して活用してきましょう。

「余白」って大切

文章を読んだ時に改行や余白のない文章だと読みづらいと感じる人も多いと思います。

余白をつけることはいわば、「文字のデザイン」と言われるくらい、文章を作るにはかかせません。

一般的には、文字サイズは小さすぎない14px ～ 16p、段落間の余白は1〜2文字（1~2em）が多いと言われています。

余白を調整してみた

実際に調整をする前はこのような感じです。

ちなみにこのブログでは『Under Shirt』というテーマを使っています。

この文字の改行の幅を調整しようと思い、実際にやってみました。

この部分ですね。

今回こちらのサイトさまを、参考にしました。

方法はいたって簡単で、こちらに載っているCSSコードをデザインCSS に貼り付ければOK。

貼り付け方は管理画面からデザイン→カスタマイズ→デザインCSSです。

色・行高・文字色を自分の好みに変更して設定します。下に変更したコードを貼っておきます。

p {

font-size: 16px;

color: #383c3c;

margin-bottom: 2em;

line-height: 1.7;

}

解説は下記になります。

これを貼り付けた結果がこちらです。

改行したときの若干ではありますが幅が広くなりました。

個人的にはこの若干の違いでも、スッキリと読みやすくなったかなと思います。

まとめ

このように、改行などの余白を調整すると文章が読みやすくなります。この場合、自分が見やすいと思うように調整するのがコツです。

ブログは特に、流し読みをすることも多いので読みやすく工夫できれば良いですよね。

ぜひ、参考にしてみてくださいね。読みやすいブログを作るきっかけになれば幸いです。