どうも。
Bloggerの投稿UIに仕様変更があったみたいです。
Bloggerの投稿に<p>タグが使われる仕様変更
投稿の編集画面でHTMLビューにすると分かりますが、8月8日以降に新しい投稿記事を書いた場合、生成されるHTMLで<p>タグが使われる様に変更されています。
2020年5月中旬以前は、文の段落にタグは付けられておらず、改行をすると<br>が自動で付くくらいでした。
2020年5月中旬には、段落が<div>（笑）で囲まれるよう仕様変更が行なわれました。文字入力の後に開業を入れると</div>で段落が閉じられます。この変更では続けて改行すると<br>が<div>で囲まれる事に…。
そもそも段落を<div>で囲む事自体に何の意味があるのか？と思っていたので、今回の段落が<p>タグで囲まれるのは正解でSEO的にも正しいはず。
また、作成ビューで文字入力している時に、改行1回だと</p>で段落を閉じて、続けて改行すると<br>タグを<p><br></p>と囲ってしまいます。<br>だけ出力される改行のボタンを用意してくれればいいのに。
一部対応されていない場合も…
ブログの設定で「投稿テンプレート（省略可）」に何か定型文を入力している場合は今回の変更が適用されていません。
適用漏れなのか？バグなのか？
テーマによっては記事の見た目が変わる？
通常<p>タグを使うとHTML上では段落として認識され、<p>タグの前後には1行改行された表示（1行空白）になりますが、テーマによっては投稿文が<p>タグになった事により段落の表示に影響があるかも知れません。
例えば、Vaster2とQooQでは仕様上表示が変わってきます。
QooQでは改行により<p>タグが閉じられると段落は変わりますが、空白行は表示されません。
同様にVaster2で<p>タグを閉じると1行空白が表示され今迄の表示と異なります。
どの様に<p>タグを表示させるかはブログ毎に検討する必要があると思います。
Vaster2で空白行を消したり、QooQで空白行を追加したり
Vaster2の場合、<p>タグで囲まれた段落に空白行が入ります。
この表示が苦手な場合は、css内の.main-outer pについて以下の変更を行います。
cssを変更します。
テーマ（テンプレート）のバックアップを取り、cssを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテーマを変更します。
尚、変更については自己責任でお願いします。
Vaster2の場合
css内の.main-outer pを変更します。padding-bottom:24px;をコメントアウトor 削除して以下の青字を追加します。この変更により<p>タグで囲った段落前後の空白はなくなります。
font-size:16px;
line-height:1.6em;
/*padding-bottom:24px; */
margin-block-start: 0;
margin-block-end: 0;
}
必要に応じて空白行を調整しても良し。
QooQの場合
逆にQooQで投稿の段落の空白行を入れたい場合、cssの何処かに.post-body pを追加します。
margin-block-end: 1.8em;
}
元々上下マージンを付けていないので、下のマージンのみ追加しています。
個人的には<p>タグの後は１行空白があった方が見やすいと思っていますが、ブログを作成する方の好みや投稿文次第ですかね？
以上
コメント