Bloggerでブログを書き始めてそれなりに時間が経ちましたが、今まで『段落（<p>タグ）』内での改行ができずに、『標準（<DIV>タグ）』と上手く使い分けられていなかったんですよね〜。
|
今回ようやくBloggerのUIを理解して、少しは美しい（？）HTMLを書けるようになったので紹介します😙。
■【Blogger備忘録】『段落（<p>タグ）』内で改行できるようにして、キチンと『標準（<DIV>タグ）』と使い分ける
目次[非表示]
●課題（問題点）・狙い（目指す仕様）
・課題（問題点）
HTMLの知識は少しはあるので、<p>タグと<DIV>タグの意味は理解しているつもりなのですが、Bloggerの編集画面でのUIが分からずうまく使い分けていませんでした。
- 今まで出来なかったこと
ひとつのまとまりある文章は1つの段落（<p>タグ）内に書きたかったんですが、段落の中で『Enter』キーを押すと、次行は別の段落になってしまって見た目も行間が広くなってしまうんですよね。
これはBloggerの投稿編集画面（作成ビュー）
|
| 作成ビュー（Blogger編集画面） |
HTMLビュー編集画面で見るとこんな感じで改行後は別段落になります。
|
| HTMLビュー（Blogger編集画面） |
で、ブラウザで確認すると行間にすき間が空いてしまいます。
|
| ブラウザビュー（プレビュー画面） |
「これでは使えないようなぁ。」という感じで今までは以下の対応をしていました。
- 今までの（暫定的な）対応
そこで今まではどうしていたかと言うと、標準（<DIV>タグ）で文章を書いていました。標準の中で『Enter』キーを押した場合、次行は別の標準（<DIV>タグ）にはなるのですが、ブラウザでの見た目はスッキリした改行状態になります。
これはBloggerの投稿編集画面（作成ビュー）
|
| 作成ビュー（Blogger編集画面） |
HTMLビュー編集画面で見るとこんな感じで改行後は別標準（<DIV>タグ）になります。
|
| HTMLビュー（Blogger編集画面） |
1行目と2行目は別の（文の）塊として認識されてしまいます。
ですが、ブラウザで確認すると行間にすき間が空かないので人間が読む分にはただの改行に見えます。
|
| ブラウザビュー（プレビュー画面） |
なので、今までは改行する時を考えて、この標準（<DIV>タグ）を使って記事本文を書いていました。
そのためソースコード（HTML）は<DIV>タグだらけの見通しの悪いものになっていました。
・狙い（目指す仕様）
ズバリ、『HTMLビュー編集画面を使わずに段落（<p>タグ）内で改行を行う』です😤。
●解決方法（『段落（<p>タグ）』内での改行）
偶然見つけたブログ記事で解決策を見つけました！
ブログ記事（投稿）の編集画面で『Shift』＋『Enter』キーを使うことにより、段落内での改行ができることが分かりました！
実際に使ってみるとこんな感じです。
これはBloggerの投稿編集画面（作成ビュー）
|
| 作成ビュー（Blogger編集画面） |
HTMLビュー編集画面で見るとこんな感じで改行後も同一の段落（<p>ダグ）内となります。
|
| HTMLビュー（Blogger編集画面） |
ブラウザで確認すると行間にすき間が空きません♪
|
| ブラウザビュー（プレビュー画面） |
狙い通りですね😋。
●使用感
段落を使って作成した記事（投稿）のソースコードは<DIV>タグが断然減って非常にスッキリしました。
・そのほか（期待出来る効果）
- ソースコード（HTML）がスッキリしたのでブラウザによるページの読み込み・表示が速くなることが期待できます。
- （今まで思わぬ場所に入っていた）自動広告が適切な場所に入ってくれると思います。
●改善要望点
- （スマホからも入力出来るように）ツールバーに『改行入力ボタン』が欲しいです。
- 作成ビュー画面で段落（<p>タグ）の塊（1つの段落が何処から何処までなのか）を表示出来る機能が欲しいです。
●まとめ
Bloggerの編集画面で『Shift』＋『Enter』キーを使うことにより、文章の改行が改善されてソースコード（HTML）がかなりスッキリしました。
この話は私の中では長年に渡ってモヤッとし続けていたので、今回ヒジョーにスッキリしました😆。
本当は今までの記事も書き換えたいですが、ちょっと数が多すぎるので😅、基本的には今後の記事のみに適用しようと思っています😋。
○参照サイト（外部リンク ⧉）
以下の記事のおかげで今回の解決策に辿り着きました！感謝感謝です！
- Bloggeの作成ビューの標準と段落の違い。＜ DIV＞タグと＜ p＞タグの違いでした。その意味とは？ - monocotoyom
