yuma's LOG

なんでも書いちゃう雑記ブログ!

はてなブログの行間を狭くする方法。初期設定では広すぎるので修正しよう!

こんにちは、裕真です。

 

ワードプレスからはてなブログに変更した初日から思っていたことですが、、、

 

 

はてなブログは行間が広すぎる!」

 

 

現在、このページを見ているあなたは修正後なので特に見にくいとは感じないと思いますが、以前にアクセスしてくれた人は行間がありすぎて読みにくかったことでしょう。

 

ということでようやく修正しました!

 

修正方法

修正は簡単です。CSSというWEBページのデザインを決めているコードを直せばいいのですが、プログラミングの知識がない人向けにコピーして治す方法を紹介します。

 

1.ダッシュボードからデザイン

f:id:Yumasty:20170213141457p:plain

 

2.工具のマーク→デザインCSS

f:id:Yumasty:20170213141526p:plain

 

3.コードを入力

f:id:Yumasty:20170213141655p:plain

 

コードを入力する画面が表示されるので、以下のコードを入力してください。

 

.entry-content p { margin:0}

 

入力後、上部にある「変更を保存する」ボタンをクリックすれば修正が完了します。ブログにアクセスして確認してみてください。

 

※過去のものを含め全てが修正されます。

 

解説

解説は見なくても上記で修正可能ですが、興味のある人向け。

 

はてなブログでは、記事を書くときに書き始めから改行までをpタグで囲むような仕組みになっています。pタグとはParagraphのことで、囲まれている区間を段落としてみるためのものです。

 

この段落として見られること自体は問題がないですが、はてなブログではこの段落ごとに行間を広め(0.8文字分の余白)に設定してあります。このため、改行して次の行から文章を書き始めたときに行間がかなり空いてしまいますし、空白行を1行いれると0.8+1+0.8の2.6文字分のスペースが空いてしまうということになります。

 

この行間をなくすためのコードが"p { margin:0}"になります。

これはpタグの余白を0にするという意味のコードです。左右上下の余白が0になるため、余分な行間をなくすことができます。

 

まとめ

この行間、気になっているけど直し方がよくわからないから放置している、という人は多いとおもいます。普通にブログを書くだけならHTMLやCSSの知識はいらないですし。

やってみると簡単に修正できますので、気になっている人はぜひ修正してみてください!かなり読みやすくなります。

 

他にもこのCSSを知って書けるようになるとブログのデザインを自由に変更できて楽しいので興味があって時間がある人は調べてみるのをおすすめします。1週間もあればだいたい理解することができます!