sagi’s blog(サジのブログ)

12月生まれの記録 | テクノロジー | マーケティング | アート関連のネタ帳

はてなブログの行間を広げたい!

f:id:taftan:20200312233446j:plain


(タイトル、ついいきおいで書いてしまいました)

はてなブログの行間の広さとは?

はてなブログでは本文の記事の行と行の間の広さが、1.5emになっています。エディトリアルデザインの基本は1.15程度ですが、ブログだと結構読みにくい。はてなブログのデフォルトのデザインは、シンプルでとても好きですが、個人的には、pの行間がちょっと狭すぎる気がしていました。このままだと、私はぎゅと息がつまってしまいます。

ゆるゆるなブログを書きたいからかな。

はてなブログの行間の広さを変える方法

ネットでググってみると、はてなブログには「デザインCSS」という機能があるようですね!

でも、ネットでググって知ったのですが、

ほとんどの人が行間が広すぎる!って思ってた。。。

いや、デザインとかってほんとそれぞれ好みは違いますよね。(無理やり)

 

さて、実際に変更する方法は、まずはダッシュボード画面から左の「デザイン」というメニューをクリックします。

 

f:id:taftan:20200307175020j:plain

行間の広さを変えるにはデザインページから

 次に、「{}デザインCSS」という項目を開いて、こちらの簡単なコードを追記します。

f:id:taftan:20200308083847j:plain

パナマークの「カスタマイズ」の中の「{}デザインCSS」に設定

そのコードとは、以下の青色の一文です。こちらを枠の中に追記してください。

/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

.entry-content {line-height : 2 ;}

行間の広さを好みの広さに変える

line-height: は行間を決定するコードです。

指定の方法には、数字、em、%の3つがあります。

詳しい解説はこちらのサイトで確認できます。

 

qiita.com

 私が「.entry-content {line-height : 2 ;}」と、数字を2としているのは、行間を本文の文字幅と同じ幅にする、という指定です。

結果、すっきりゆるゆるとした感じになって気に入っております

いま読んでいただいているブログは、すでに変更したものになっています。

どうでしょう。

なかなかよい!

最後までお読み下さりありがとうございます。