はてなブログのコメント欄がPC版とスマートフォン版で少しだけ見え方が違う

という質問を解決したお話。

その辺りはあまり気にしていなかった部分なのですが、言われてみると確かに少し違うので、それらしい解決策で対処したやつです。

q.hatena.ne.jp

PC版の はてなブログ デザイン設定 のカスタマイズ→デザインCSSに

.comment-content p {
	padding-bottom: .5em;
}

を追加して保存。3行でOKなやつです。

解説

テーマによってはコメント部分の<p>要素にマージンが設定されていない事があるため、違和感が発生します。

基本設定のみ書かれている boilerplateテーマでは、<p>タグの下部分のみにマージンが設定してあります。
(※このエントリー時点) *1

今回の質問では、設定のないテーマだったようですので、paddingを設定した。というお話です。

「10px」や「.5em」など、単位が色々ありますが、今回は文字の大きさ「em」を利用しています。
他の単位については検索した方が分りやすいので省略しますが、.5emと設定すると「0.5文字で頼む」という意味になります。

*2

くまやつ。

NEW リズムでともだち こぐまのトンピー ぬいぐるみ

*1: boilerplateテーマは公開されていますが、テーマストアには存在しないテーマです。手動で導入できます。

また、はてなブログ最初期のテーマ(非公開) も存在しますが、こちらは現在の仕様と大きく乖離しているため利用しない方が良いやつです。完全に自己満足で楽しむもの。

*2:boilerplateテーマを元に、色々アレコレしてテーマを作る予定ではあるのですが、プレーンなやつが一番しっくりくるのでこのままにしてある。というやつです。ごちゃごちゃしていないのが一番良い。