こんにちは、のぴたん係長です＾＾
はてなブログで記事を書いていて困ったことと、その解決方法を書いていきいます。
今回は、段落全体をインデントする（右へずらす）方法 です。
注意事項
ここで紹介するやり方は はてなブログPro が前提です。
無料版ではできませんので、ご了承ください。
目次
スペース文字（空白文字）を使う方法がダメな理由
段落を右側へずらす方法としてまず思いつくのが、スペース文字（空白文字）を使う方法ですが、これは絶対にやってはいけません。
理由は、記事を読む人によってディスプレイの横幅が異なるため、行が折り返されるとレイアウトが崩れる からです。
いちばん分かりやすい例は、パソコンでは問題なく表示できれも、スマホではダメになるケースです。
パソコンではOKだけど・・・
スマホではダメ
このように、見たままモード では、段落全体をきれいにインデントさせることはなかなか難しいのですが、HTMLモード を使えば、簡単にできます！
では、その方法を見ていきましょう。
HTMLモードで段落全体をインデントする
まず、画面左上の HTML編集 をクリックして、HTMLモード にします。
次に、インデントしたい段落の頭の <p> タグを見つけます。
最後に、<p> タグに、段落の左側に余白を空けるためのHTMLコードを追加します。
ここでは、以下のHTMLコードを追加しました。
style="margin-left: 2em;"この 2em は「2文字」を意味しています。
つまり、段落の左側に2文字分の余白を空ける、ということです。
空けたい余白の大きさに応じて、この数字を変更すればOKです。
作業はたったのこれだけ、簡単ですね！
HTMLモードで正しくインデントすれば、レイアウトは崩れない
それでは、HTMLモード でインデントした結果がどうなったか、見てみましょう。
パソコンでは・・・
スマホで表示すると・・・
レイアウトが崩れることなく、段落全体がきれいにインデントされていますね！
このように、HTMLモード を使えば、きれいなインデントを簡単に実現できます。
それでは、今回はこの辺で。