エウレカ!

好きなこと、気になること。音楽中心。たまに写真も。

[HOME] カテゴリー > [音楽] [動画] [YouTube] [写真] [その他]

   

はてなブログにおける行間問題ーパソコン備忘録

f:id:dandelion-hill:20180309183319j:plain

 

いつもはてなブログの編集画面でこのブログを書いているんですが、
行と行の間、つまり行間が前から気になっていて広すぎるんではないかと。

 

以前テーマをどれにするか色々探していた時、
今使っているテーマの説明を読んでいて、
読みやすいように行間を他のテーマより1.5倍かどうだったか、
広く表示させているとか言うような記述が確かあったように記憶していたのだけれども、
今見ると見当たらない。
あれは錯覚だったのだろうか。

 

 

 

要するに行間をもう少し狭くしたいのだが、
方法としてはテーマを変えるかCSSで設定するか、
というくらいのことしか素人考えでは思い至らない。

 

 

 

まずテーマの変更を考えたが、
ざっと見た限りではどのテーマも行間については何の説明もない。
しかも、いざテーマ変更となると、
トップの画像の見栄えが変わったりして、あとが大変そう。
自分でカスタマイズしたヘッダ部分の移行作業もあるし、
相当な面倒が予想されるため、
テーマ変更の選択肢は却下。

 

 

 

残るはCSSということになるわけですが、
いろいろググって出てきたのは
CSSの「line-height」で調整するというもの。

 

p {line-height: 1.8}

数値を変えて色々やってみたが、
何故か思うように行かない。
これはpタグで囲まれた文字列ごとの間隔を指定するもの。

 

 


はてなブログの場合、一行ごとに(行頭から改行まで)pタグが入るが、
一行の文字数が多くなると、pタグに関係なくブラウザ上で改行される(いや、もしかしてはてなの編集エディタの仕様?)ようで、
その時の間隔とp要素ごとの間隔とがうまく一致しない。
実は単に行間の調整と言っても、この二つの問題を同時に解決したい。
つまりはp要素ごとの行間と、p要素内で複数行に見かけ上表示される行間とを一致させたいのです。

 

 

 

わかりやすいように自分のブログ記事を画像にしてみました。
上がこれまでの行間で、下が変更後の行間。

 

 

 

f:id:dandelion-hill:20180309174328j:plain

 

 

f:id:dandelion-hill:20180309174409j:plain

 

記事本文の、1行目と2行目は一つのp要素で囲まれた文字列。
3行目と4行目はそれぞれ別のp要素。
下の画像のようにすべて等間隔のほうが良かろうと思い、
なおもググってみた結果、
やっと見つけました。

 

Yahoo!知恵袋で見つかりました。

detail.chiebukuro.yahoo.co.jp

 

 

これです(若干改変)。

div.entry-content p {
line-height: 1.2em; /* 段落内の文章の1行の高さ */
margin-top: 0.1em; /* 段落の上余白 */
margin-bottom: 0.1em; /* 段落の下余白 */
}

 

若干数値を変えて、うまく等間隔で自分好みの行間になるようにしてみた。
それがこれ。

/* はてなデザインCSS行間設定 */
div.entry-content p {
line-height: 1.8; /* 段落内の文章の1行の高さ */
margin-top: 0; /* 段落の上余白 */
margin-bottom: 0; /* 段落の下余白 */
}

 

はてなブログをお持ちで自分もとお考えの方のために、
やり方の説明。
「デザイン」からスパナのアイコンの「カスタマイズ」をクリック、
「{}デザインCSS」をクリック、
クリックして出てきたフォームにコードをコピーして貼り付け。
「変更を保存」をクリックで完了。

 

 

 

行間の広さにそれぞれ好みもあるだろうから、
プレビュー見ながら数値を変えてみるのがいいかなと。

 

 

 

このコードでどうしてp内の行間とpタグごとの行間が同じになるのか、
全く理解の外にいるわたしなんだけれども、
まあ、思い通りの結果なので、
良しとしよう。