さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなブログ】簡単解説!文章の余白・文字間を調整する方法

f:id:sanrisesansan:20200828203002p:plain

ブログ記事の文字間、余白を調整、変更したいけど、簡単にできる方法はないだろうか?

そんな悩みに答えます。

やり方を先にいうと、

はてなブログ」のデザインCSSにコードを貼り付けるだけの簡単作業です。

今回は、ブログ記事の文字間の余白を調整する簡単な方法を詳しく見てきたいと思います。

 


スポンサードリンク
 

「余白」って大切

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

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

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

余白を調整してみた

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

f:id:sanrisesansan:20200828200631j:plain

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

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

この部分ですね。

f:id:sanrisesansan:20200828201615p:plain

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

naifix.com

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

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

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

p {

font-size: 16px;

color: #383c3c;

margin-bottom: 2em;

line-height: 1.7;

}

解説は下記になります。

font-size→文字の大きさ

color→文字の色

margin-bottom→改行の幅

line-height→行間

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

f:id:sanrisesansan:20200828201329j:plain


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

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

まとめ

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

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

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

最後まで読んでいただき、ありがとうございます。

この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村