はてなブログの小技

【はてなブログの小技】段落をインデントする方法 - 行の先頭だけでなく段落全体を字下げする(右へずらす)

2020-10-18

はてなブログの小技 タイトル

こんにちは、のぴたん係長です^^

はてなブログで記事を書いていて困ったことと、その解決方法を書いていきいます。

今回は、段落全体をインデントする(右へずらす)方法 です。

注意事項

ここで紹介するやり方は はてなブログPro が前提です。

無料版ではできませんので、ご了承ください。

スペース文字(空白文字)を使う方法がダメな理由

段落を右側へずらす方法としてまず思いつくのが、スペース文字(空白文字)を使う方法ですが、これは絶対にやってはいけません

理由は、記事を読む人によってディスプレイの横幅が異なるため、行が折り返されるとレイアウトが崩れる からです。

いちばん分かりやすい例は、パソコンでは問題なく表示できれも、スマホではダメになるケースです。

パソコンではOKだけど・・・

空白文字でインデント PCで表示

スマホではダメ

空白文字でインデント スマホで表示

このように、見たままモード では、段落全体をきれいにインデントさせることはなかなか難しいのですが、HTMLモード を使えば、簡単にできます!

では、その方法を見ていきましょう。

HTMLモードで段落全体をインデントする

まず、画面左上の HTML編集 をクリックして、HTMLモード にします。

HTML編集でインデント 手順1

次に、インデントしたい段落の頭の <p> タグを見つけます。

HTML編集でインデント 手順2

最後に、<p> タグに、段落の左側に余白を空けるためのHTMLコードを追加します。

HTML編集でインデント 手順3

ここでは、以下のHTMLコードを追加しました。

style="margin-left: 2em;"

この 2em は「2文字」を意味しています。

つまり、段落の左側に2文字分の余白を空ける、ということです。

空けたい余白の大きさに応じて、この数字を変更すればOKです。

作業はたったのこれだけ、簡単ですね!

HTMLモードで正しくインデントすれば、レイアウトは崩れない

それでは、HTMLモード でインデントした結果がどうなったか、見てみましょう。

パソコンでは・・・

HTML編集でインデント PCで表示

スマホで表示すると・・・

HTML編集でインデント スマホで表示

レイアウトが崩れることなく、段落全体がきれいにインデントされていますね!

このように、HTMLモード を使えば、きれいなインデントを簡単に実現できます。

それでは、今回はこの辺で。

-はてなブログの小技
-, , , , ,

© 2021 のぴたん係長のブログ