空色の風

空を見上げて、風を感じてみると元気になれる気がします

はてなブログ 改行時の行間広すぎ問題解決!

改行時の行間広過ぎ問題は、.entry-content p { margin:0}で解決できますよ。

 

はてなブログを書いていて、改行時になんだか行間が広すぎて 間が抜けた感じがして、見づらいな~とずっと感じていました。

はてなブログの場合、改行は単なる改行ではなくて、段落を分けるというコードが入っているため、改行するたびに段落を分けているということになるので、行が広くなるとのことです。

私は、区切りのいい所ですぐに改行してしまう癖があるので、 なんだか間の抜けた感じになってしまうのが気になっていましが、以外と簡単な方法で解決できることが分かりました。

ちなみに、全く改行無しの文章を”石板文字”と呼ぶのだそうです。

 

◆以前の文章はこんな感じだったのですが 

f:id:kkind:20190509102519j:plain

 

◆行間を狭くしたらこんな感じになりました ↓

f:id:kkind:20190509102527j:plain

 

好みもあるでしょうが、私はあまり広すぎる行間だと読みにくいと感じてしまいます。

 

行間を狭くする方法は、CSSに .entry-content p { margin:0}を張り付けるだけです。

ブログを書くのに慣れてきたら、いろいろとカスタマイズしたくなりますが

へんにいじって、フォームが崩れるのも怖いしというのはありますが、

実際にやってみないと、どこがどう変わるのかわかりませんよね。

私も、プログラム的なことはあまり詳しくありませんが、分かりやすい解説だとそれなりに分かったりします。

はてなブログは無料の分でも、3個までブログを開設できるので、テスト用に非公開のブログを作って、いろいろ試してみる方法もアリですね。

 

行間を狭くする方法

①デザインを選択

     f:id:kkind:20190509111114j:plain

 

②カスタマイズを選択

     f:id:kkind:20190509111124j:plain

 

 

③デザインcssを選択

      f:id:kkind:20190509111222j:plain

 

④記述する箇所

      f:id:kkind:20190509111230j:plain

 

.entry-content p { margin:0} をコピペするか記述する

 

       f:id:kkind:20190509111239j:plain

 

 

⑤最後に忘れずに、”変更を保存する”をクリック

      f:id:kkind:20190509111246j:plain

 

CSSを触らない方法で、行間を狭くしたい場合

文字の終わりに shift+enter で改行するという方法もあるようですが

ちょっとメンドクサイですよね。

 

cssって言葉はよく聞くけどいまひとつよく分からない・・・・

調べると以下のようなことが書いてあります。 

CSSというのは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略

・デザイン、装飾のために作られている

・見栄えを整える役割

・見やすいページを作るのに大事

 

私なりの解釈すると

モノクロ画面がカラー画面になるような見やすさ
サイト全体を指令することができる魔法の杖・・・・みたいな? 感じですかね?