【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額980円にする手順

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

悩み人

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

そんな悩みに答えます。

どうも、ブログ運営者のポチ(@sunrise_033)です。

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

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

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

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

この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン

月間54,000PV/収益5桁達成

目次

「余白」って大切

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

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

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

余白を調整してみた

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

f:id:sanrisesansan:20200828200631j:plain

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

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

この部分ですね。

f:id:sanrisesansan:20200828201615p:plain

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

方法はいたって簡単で、こちらに載っている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アクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次