はてな文章と図のレイアウト－右や左の編集など

f:id:Zzak:20220409215304j:plain

はてな文章と図のレイアウト－右や左の編集など

(図 Futuristic Pixabay by LemonTreeArt、Colorful Pixabay by garageband & Amimal Pixabay by Peri Priatna)

　レイアウト項目

１. 文章のレイアウト

２. 図のレイアウト(中央配置)

３. 図の横並び

４. 図と文章のレイアウト(図の左配置と右配置)

５. 文字の大きさ、マニュアル指定

６. 段落と改行

７. 上付きと下付き

はてなのエディタには、文章のレイアウトがサポートされていません。それほど頻繁には利用しませんが、たまに利用需要があります。なので、文章のHTML編集について、いくつかのことをメモ書きとして残します。

「HTML編集でいろいろと出来ます、自由にやって下さい」とは、裏を返せばエディタとして未完成の品質なのでしょう。これからに期待しましょう。

１. 文章のレイアウト

特に何も指定しないと、文章は左揃えになります。中央揃えはたまに使いたくなります。右揃えは英文のレターを書くときくらいしか利用機会がないかも知れません。HTMLコードの書き込みにより、文章の位置を指定できます。

あちらと思えばこちら(左揃え)

こちらと思えばそちら(中央揃え)

そちらと思えばあちら(右揃え)

このときのHTMLコードは次のようになります。

<div style="text-align: left;">あちらと思えばこちら(左揃え)</div>
<div style="text-align: center;">こちらと思えばそちら(中央揃え)</div>
<div style="text-align: right;">そちらと思えばあちら(右揃え)</div>

もう１つの記法

中央揃えの文章

このときのHTMLコードは簡略が許されているようです。

<center>中央揃えの文章</center>

２. 図のレイアウト(中央配置)

図や写真などを中央に整えたいときに便利です。

このときのHtMLコードは次のようになります。

参考までに、図だけの左詰め、右詰めのHTMLコードは同様に、

３. 図の横並び

はてなに備わった機能の、「＋写真を投稿」の下欄で「横並び」を選択してから、[選択した写真を張り付け] を実施します。

このときのHTMLコードの概要は

横並びで貼りつけると、マウスのドラッグによるサイズ変更ができないようですので、HTML編集で直接ピクセル数を指定します。

図の大きさ指定は、width、height にピクセル数を直接与えることができますが、縦横比率を維持したいとき手間になります。例えば、width を数値指定し縦横比率を維持したい場合、height を削除します。
タイル状に上下を揃えたいときは、height を数値指定し縦横比率を維持するために、width を削除します。