ネット副業道場

副業・副職・兼業についての総合情報サイト

【はてなブログ】htmlがわからない人向け!行間の幅がバラバラになった時に直す方法

pc

はてなブログを使い始めた人で、行間の幅がキレイにならなかったり、思ったような見た目にならなかったりした経験がある人は多いのではないでしょうか。

特に初心者の方ですと「見たまま編集モード」で入力をしているかと思いますので、htmlを見ないと原因に気づきにくいです。

原因にはいくつかのパターンがありますので、今回はhtmlを知らない人でも理解できるように説明をしていきます。

ブログに広告を掲載する方法を知りたい方はこちらの記事へどうぞ。

確認のためにhtmlを見よう

pc

入力は見たまま編集モードを使っても何も問題はありません。プレビューをして問題があった時だけ、html編集で確認するようにします。

まず、html編集モードに切り替えましょう。記事を作成する画面の上部に「HTML編集」というタブがありますのでクリックして下さい。

タグについてちょっとだけ基礎知識

tag

あなたが入力した文章は、HTML編集モードで確認すると以下のような表記がされているかと思います。

  • <h3>見出し</h3>
  • <p>段落1</p>
  • <p>段落2</p>

「h」や「p」といったアルファベットで文章が挟まれていますね。この記号<>を「タグ」と呼びます。<h>は見出しで、<p>は段落です。

行間がバラバラな原因は?

boy

あなたの文章の行間がバラバラになってしまっている場合、文章の中に<br/>のようなタグがありませんか?これは改行を表すタグです。

バラバラになってしまう原因の一つとして、<p>の段落で行が変わっている場合と、<br/>の改行で行が変わっている場合とで行間の幅が異なることが挙げられます。

直し方は?

girl

対策としては、<br/>タグを削除しましょう。基本的には<br/>タグはあまり使わなくても文章を書くことができます。当Webサイトではほとんど使用していません

見たまま編集モードでは<br/>タグが使用されていても違和感はありませんが、html編集で確認すると<br/>タグが多用されている文章はかなり確認しづらくミスが起きやすいです。

まとめ

自分のブログの記事で行間の幅がバラバラになってしまっているときは、HTML編集モード<br/>タグを削除すると、ほとんどの場合解決します。

初心者の内は見たまま編集モードで入力し、おかしい部分を見つけた時だけHTML編集モードで確認をしよう!