Bloggeの作成ビューの標準と段落の違い。＜ DIV＞タグと＜ p＞タグの違いでした。その意味とは？-monocotoyom

　さて、Bloggeでブログを始めた初心者の方が標準と段落の設定をみたら標準を使うと思いませんか？
　ところが、作成ビューのデフォルトは段落なのです。
　いちいち、標準に切り替えるのって変だなぁと思いながら、もちろん私は、標準で書いていました。

　なんで、段落がデフォルトなんだろう・・・段落って何に使うんだろう？
　しかし、ここに重大な問題が！
　この段落は2020年8月15日に追加された新機能だったんです。

　ということで、今回は段落と標準の違いと問題、対策についてわたしの体験をもとに具体的にわかりやすくまとめて記事にしています。

Bloggeの標準と段落の違い。＜DIV＞タグと＜ｐ＞タグの違いでした。その意味とは？

　さて、標準と段落の違いはなんでしょうか？

　それは、HTMLタグの違いになります。

段落は＜ｐ＞タグを使用
標準は＜DIV＞タグを使用

　で？それでいったい何がかわるんだろうか？
　というところを次から確認していきます。
　簡単なところですと、HTMLでは＜ｐ＞タグで閉じられたところは一行空白の行がはいります。しかし、そうともいえないのがややこしいところです。

　まず、話がややこしくなるので、Bloggeの”投稿：編集”の”作成ビュー”での見え方を図を一緒に掲載して説明します。
　理由はタグはCSS等で調整されており、テンプレート毎にブログ上での表示が変わるからです。

＜DIV＞タグの動作確認

　＜DIV＞タグは作成ビューでは以下のように表示されます。

例１）エンターのみの文字列改行

　標準＜DIV＞タグでの”キーボードのエンター”での改行例

例２）SHIFT＋エンターでの文字列改行
　標準＜DIV＞タグでの”キーボードのSHIFT＋エンター”での改行例
　標準＜DIV＞タグでの”キーボードのSHIFT＋エンター”での改行例

上記のようにエンターの改行例とSHIFT＋エンターの改行には違いがありません。

HTMLビューのコードでは、上図から、

エンターの改行例では一行毎に＜DIV＞タグで囲まれている。

一方、SHIFT＋改行例では2行が＜DIV＞タグに囲まれ、＜ｂｒ/＞で改行されている

の違いがあります。

＜ｐ＞タグの動作確認

　＜DIV＞タグは作成ビューでは以下のように表示されます。

例１）エンターでの改行

　段落＜ｐ＞タグでの”キーボードのエンター”での改行例

例２）SHIFT＋エンターでの改行

　標準＜DIV＞タグでの”キーボードのSHIFT＋エンター”での改行例
　標準＜DIV＞タグでの”キーボードのSHIFT＋エンター”での改行例

　上記のようにエンターとSHIFT＋エンターでは改行幅が異なります。
　この改行幅はブログのテーマやテンプレートで変わる場合があります。
　改行幅については備忘録を参照ください。

HTMLビューのコードでは、上図から、

エンターの改行例では一行毎に＜ｐ＞タグで囲まれている。

一方、SHIFT＋改行例では2行が＜ｐ＞タグに囲まれ、＜ｂｒ/＞で改行されている

の違いがあります。

＜DIV＞タグと＜ｐ＞タグの違いとは

　上記では＜DIV＞と＜ｐ＞の改行幅に関して説明しました。
　また、＜ｐ＞タグは＜ｂｒ/＞で区切られるか、＜/ｐ＞で閉じられるかで、その改行幅がことなります。

　しかし、テーマやテンプレートなどの見栄えで調整されていることがあります。

　例えば、ＱｏｏＱやＳｍａｒｔでは、デフォルトでは改行幅が同じ（マージンが０）になっているようです。
　＜ｐ＞の改行幅がBloggeの投稿：編集画面の作成ビューと見え方が異なることに違和感があるかたはCSS等で調整を行う必要があります。

備忘録（＜ｐ＞タグのマージン設定）

＜ｐ＞タグの段落（＜/ｐ＞）の改行幅を調整する方法

　QooQの場合

#single-content p{margin-top: 1.8em;margin-bottom: 1.8em;}
}

Ver1.28より上記の＜p＞タグマージンのパラメータがあり対応済み。

　Smartの場合

    /* 段落設定 */
    .post-content p {
      margin: 0;
    }

部分のmarginを変更必要。

今後、上記部分を修正・検証いたします。
なんとなく、”1.0em”がいい感じかな。
もし、このブログをみてて、段落毎にあいてそうならテンプレをカスタマイズ済みです。

Bloggeの投稿：編集の作成ビューは段落”＜ｐ＞”タグが良い

　Bloggeの投稿：編集の作成ビューのデフォルトである”段落”を使用した方がよいようです。

　”標準”を使用して作成ビューで記事を書いた場合、以下の３つの問題に悩まされます。

問題１

　2021年3月26日現在で、標準で作業していると＜/DIV＞が閉じない場合があります。
　作成ビュー上からは問題にはならないのですが、スケ郎の部屋さんで配布されている目次自動生成が誤動作し、目次が正しく作成されません。

問題２

無料テンプレートSmart標準で目次を自動生成するバージョンがありますが、その際に生成する条件となる<span></span>を＜DIV＞＜/DIV＞で囲んでしまうため正常に動作しません。

問題３

　標準を指定すると、思わぬ範囲が＜DIV＞で囲われてします。
　作成ビューで”標準”を指定すると意図しない範囲まで＜DIV＞で囲われてしまう場合があり問題１，２の要因が発生する場合があります。

　この問題が内在すると、あとからカスタマイズをやってみようと思った初心者さんの禍根になりかねません。

対策

　問題１も２も”段落”を使用してれば回避できます。

　言い換えると、初心者は作成ビューでは”標準”は使わない方がいいでしょう。

　この”段落”は冒頭に述べたように2020年8月15日という時期に実装され多機能です。
　現状、このことについて調査すると情報が交錯していて、こんがらがります。

　素直に、”段落”を使用するといろいろ楽ちんですよ。

まとめ

今回はBloggeの投稿：編集の作成ビューでの注意点です。

”標準”はゼッタイ使わないこと

につきますね。

編集後記

　冒頭述べましたが、わたしは”標準”を使用していました。

　しかし、これは思わぬ問題を誘引していました。

　標準を使用していたのは改行時に不要な行間が発生するのに違和感があったからでした。
　しかし、これは、キーボードで”SHIFT＋エンター”を行うことで解決します。

　一方で、テンプレートによっては段落がBloggeの投稿：編集の作成ビューと同じ見え方をしない場合があるという課題もあるようです。

　これは今後カスタマイズの方針を考えてブログに適用していきたいと思います

　ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします！

Bloggeの作成ビューの標準と段落の違い。＜ DIV＞タグと＜ p＞タグの違いでした。その意味とは？