ブログ記事から改行を消した
はてなブログで記事を書くとき、書きやすさや原稿の読みやすさのために 適当な位置で改行を入れると思うのですが、 それらが残ったまま出力されることに気付きました。
HTML中の改行やタブの並びは基本的には半角スペース1個に変換されて表示されます。 そのため、改行の位置によっては変に間延びした文章が見られることがあると思います。 このようなことが問題となるよくある例としては、次のようなHTMLを記述して微妙なデザイン崩れを引き起こす、といったものが挙げられます。
<ul> <li>HTML中のインデントや改行が</li> <li>このリストの表示を微妙にずらしてしまう</li> <li>問題がよく見られます</li> </ul>
そこで、場当たり的ですが、はてなブログの[ 設定 ] -> [ 詳細設定 ]
からhead
タグ中に
次のJavaScriptが展開されるようにして、ブログ中の改行を取り除くようにしました。
処理効率(中身を見ないでreplace)とか色々怪しいところが満載なので、 こうした方がいいよ、という意見がありましたらコメント等で教えていただけると幸いです。
<script> (function(){ document.addEventListener("DOMContentLoaded", function(){ // 記事中に残る不要な改行を取り除く var target_p_tags = document.querySelectorAll(".entry-content p"); for (var i = 0; i < target_p_tags.length; ++i) { var target_p = target_p_tags[i]; var children = target_p.childNodes; for (var j = 0; j < children.length; ++j) { var child = children[j]; // 子要素となるDOMは対象外とする if (child.nodeName === "#text") { var original_text = child.textContent; child.textContent = original_text.replace(/\r?\n/g, ''); } } } }); })(); </script>