［はてなブログ］PC/スマフォアプリで、改行時の行間高さが変わる現象を解消！

　過去に二つのエントリーで、はてなブログの「見たまま」編集での、改行時の挙動に驚いたという記事を書きました。パソコン使用時と、スマートフォンアプリ使用時で処理が変わるので、記事内の行間の高さが変わってしまうんですよね。

　今回は、この「行間の高さが変わってしまう現象」の解決方法をご紹介します。

また「改行すると行間が空いてしまうのが嫌だ。」という方への改善策にもつながりますので、一読いただければと思います。
※ PC/スマートフォンアプリ共に、編集方法は「見たまま」編集を想定しています。

どうして高さが変わるの？

　はてなブログの「見たまま」編集を使っていると、必ず記事内のどこかで改行をすると思います。(※ 自動改行ではなく、Enterを押しての改行)

　この改行した時の処理が、PCとスマートフォンアプリで違いがあるようです。具体的にどのような違いがあるのか見てみましょう。

　PCとスマートフォンアプリで、以下の文章を打ち込んだパターンを見て解説していきます。(改行)の後に、Enterを押して改行しています。

Hello, World!(改行)

こんにちは、調子はどうですか？(改行)

私はおなかが空きましたよ。(改行)

どこかに食べに行きませんか？

さて、ではPCとスマートフォンアプリでHTMLにどのような違いが生まれるのかを確認してみましょう。

PC版

<p>Hello, World!(改行)</p>
<p>こんにちは、調子はどうですか？(改行)</p>
<p>私はおなかが空きましたよ。(改行)</p>
<p>どこかに食べに行きませんか？</p>

スマートフォンアプリ版

<p>Hello,World!(改行)</p>
<div>こんにちは、調子はどうですか？(改行)</div>
<div>私はおなかが空きましたよ。(改行)</div>
<div>どこかに食べに行きませんか？</div>

　PC版では、書き始めから改行までをpタグでくくっています。対して、スマートフォンアプリ版では、１行目がpタグ、それ以降はdivタグとなっています。

　このことが原因で、PC、スマートフォンアプリ間で行の高さのズレが生じてしまうんです。

pとかdivってなに？

　簡単にpタグとdivタグに関する解説をしておきます。

pタグとは？

<p> ~ </p>で囲んだ内容が、一つの段落であることを表しています。

paragraph(段落)の頭文字のpですね。

divタグとは？

これ事態は特に何も意味を持っていません。<div> ~ </div>で囲まれている範囲が、一つの塊であることを表しています。

解決方法

　本件の原因をさらに詳しく述べますと、「pタグとdivタグでCSSに違いがある」事です。

　CSSというのは、簡単に言いますと「見た目を変える」ものです。高さや幅はもちろん、色、隣との距離、位置など、おおよそ見た目のすべてを司っているものですね。

　さて、本件の解決方法は、「CSSを上書きして書き換えてやる」ことです。具体的な手順を見ていきましょう。

01. デザイン編集画面を開く

　上記の写真は私のブログページですね。上部バナー「HatenaBlog」の隣に、赤枠で囲っているように、自分のブログタイトルが書かれているかと思います。

　自分のブログタイトルをクリックしますと、黄枠のようなメニューが出てきます。その中にあるデザイン(青枠)という項目をクリックすると、デザイン編集画面に行くことができます。

02. デザインCSSを編集する。

　デザイン編集画面に行きますと、下の画像のような画面が表示されるはずです。

ここでCSSを書き換えていきましょう。

　まずは、赤枠で囲っているスパナのマークをクリックします。

　すると、このような、背景画像・背景色・ヘッダなどの編集ができる画面に移るかと思います。

その最下部、赤枠で囲まれたような「デザインCSS」と書かれた項目があります。ここで、CSSの書き換えを行うことができます。

03. CSSを書こう

　デザインCSSの項目を開きますと、よくわからない英語の羅列があるかと思いますが、気にしないようにしましょう。

　さて、では以下のコードを、デザインCSSの中にコピー&ペーストしてください。

03-1. 改行した際の妙に大きな行間をなくす。

.entry-content p,
.entry-content div{
    margin: 0;
}

　こう書くことで、Enterで改行した際、妙に行間が空くことがなくなります。

これはPC/スマートフォンアプリ共通の挙動となります。

また、段落間の空間を少しは取りたいという方もいるかと思います。その際は、項目03-2のコードをコピー&ペーストし、編集してください。

03-2. 段落間の空間を任意の高さだけ空ける。

.entry-content p,
.entry-content div{
    margin-bottom: 10px;
}

　”10px”と書かれている部分を、自分の好きなサイズに書き換えてください。もう少し空間がほしければ、数値を上げると上げた分だけ空間が大きくなります。

注意

　本記事での対策法はあくまで一つの案です。もっと効率よく、きれいな方法があるかもしれません。

　また、記事を編集中、HTML編集にて<div>や<p>を別途使う場合、その要素に対してもCSSが適応されますのでご注意ください。(HTML編集を触らない場合は問題ありません。)

さいごに。

　一つ心配なことがありまして、はてなブログのデザインテンプレートによって、本記事で紹介した方法が効いたり効かなかったりするのではないかということです。

　もし、本記事を読んでいただいて、紹介している方法を試しても改善しなかった場合は、お気軽にご連絡ください。別途、改善案を提示させていただきます。