はてなブログで見出しの線がはみ出す時の対処方法

ブログ

主にはてなブログを運営されている方向けの記事で見出しの記事がなぜかはみ出てしまう方への対処方法を紹介しています。(css.html対策)

※私は現在はてなブログからWordpressへと移行していますが、はてなブログを使っていた頃に書いた記事です。

経緯

以前投稿した記事に見出しをつけて投稿していたところ、なぜか中見出しの左側につける水色の縦線がはみだしてしまいました。(はてなの見たまま記法で書いてました)

この水色の線を本当は文字にあうようにもう少し短くしたかったのですが下の画像のようになぜか出来ませんでした。

f:id:praktischer:20191026174111j:plain

しかし一方ではなぜか下記のように正常に機能している見出しもありました。

この水色の線は文字に対して長さぴったりでうまく機能していますよね。

f:id:praktischer:20191026174240j:plain

色々調べて、何時間もデザインcssをいじってみたのですが、一向に解決しませんでした、、

 原因

半ば諦めながらHTML編集を見ていたら、

はみ出していた見出しの中には以下の画像のように

f:id:praktischer:20191007193837j:plain

<br />

といったものがいつのまにか挿入されていました。これを正常な見出しと比較すると、なんと挿入されていません!!

解決方法

結果、ただこれをHTML編集で消すだけで解決できたので(笑)

もし同じようにお困りの方がいたらぜひ試してみてください!

iPadではてなブログの見たまま編集をいつもやっているのですが、その画面では明らかに改行は入っていません。ただbrとは改行という意味なのでバグか何かで意図せず改行要素が入ってしまっていたようです。

コメント

タイトルとURLをコピーしました