のぴたん係長のブログ

のぴたん係長の雑記ブログです^^

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

f:id:ChiefNopitan:20201018093209j:plain

 

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

 

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

 

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

 

注意事項:

ここで紹介するやり方は はてなブログPro が前提です。 
無料版ではできませんで、ご了承ください。

 

目次

 

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

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

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

 

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

 

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

空白文字でインデント:パソコンで表示した結果

 

スマホではダメ

空白文字でインデント:スマホで表示した結果

 

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

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

 

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

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

 

HTMLモードで段落全体をインデント 手順①

 

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

 

HTMLモードで段落全体をインデント 手順②

 

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

 

HTMLモードで段落全体をインデント 手順③

 

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

 

style="margin-left: 2em;"

 

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

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

この部分は、空けたい余白の大きさに応じて、適宜変更すればOKです。

 

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

 

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

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

 

パソコンでは・・・

HTML編集でインデント:パソコンで表示した結果

 

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

HTML編集でインデント:スマホで表示した結果

 

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

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

 

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

 

◆「はてなブログの小技」シリーズの他の記事はコチラ

はてなブログの小技 記事一覧