ようやく追加されました、待ちに待ったBloggerでの「p」タグを用いた段落機能。ほとんどの方はなんのことやらさっぱりという感じだと思うのですが、Bloggerの愛用者の方やBloggerが最近気になっている！という方にぜひおすすめの機能ですので紹介させていただきます。
ちなみにテンプレートは「QooQ」を使わせていただいており、他のテンプレートでは異なる部分もあると思います。その点ご了承ください。
Bloggerに追加された「段落」機能
最近になって筆者愛用の「Blogger」に「段落」の欄が生じました。
これは今までに標準ではなかった「p」タグというのを利用できるようになったのです。
ちょっと難しめな話なんですが「p」タグというのは段落を定義するためのコードのことです。
↑ここまでの行を「p」タグつまり「段落」モードを使って書いています。
「段落でも標準でも見た目全く変わらないじゃん！」と思われたはずです。そうなんです。それでもHTMLコードには大きな違いが生じています。
最初の4行
次の4行
<div style="text-align: left;"><br /></div> <div style="text-align: left;">私も「標準」というモードでこれまで文章を書いており、行間を開けたいな…</div><div style="text-align: left;"><br /></div> <div style="text-align: left;">という時には改行、改行と連続して改行をしていたわけです。</div> <div style="text-align: left;"><br /></div> <div style="text-align: left;">するとHTMLコードがやたら長くなるのです。</div>
あれ？
ちなみに「標準」モードの「div」から始まるコードはグループ指定するもので「text-align: left」は左寄せというのを意味していて、最後にもう一度「div」で閉じています。
改行のコードは「br /」タグになります。この改行のためのbrコードを使うと記載が長くなることに繋がっていました。（これを回避する方法もほかにもあったようですが、デフォルトでこの仕様が続いていたようです）
pタグのCSSを追加
このようにpタグを使ってシンプルなHTML構造を作るのに少々細工をしています。
p {
margin: 1em 0; /* 上下に1em・左右に0px */
}
このようなコードをCSSの追加にて挿入しています。ちなみにCSS追加もちょっとモデルチェンジしています。というか現れたり消えたりしていませんか？夢か幻で見えたのかな？
「QooQ」テーマではメニュー⇒テーマ⇒HTML編集から「個別アイテム」の二つ目のところに記載するとCSSを追加していることになるようです。
これによって段落モードで記述して「Enter」キー1回でしっかり1行分の余白ができるため、作成のスピードも若干上がります。
また、HTMLのルール的にも段落をpタグで記述するのは正しいコードの書き方のようで、WordPressなどでは必ずpタグでの記述に自動的になっていました。
むしろBloggerが長い間このような仕様にならなかったのが謎、という感じがします。
「QooQ」ではVer1.28にて「pタグマージン」の追加がなされているため、最新のQooQを使ってれば自動的に行間が空くようになっています。
最新QooQでは /* 個別記事本文 */ の部分に
#single-content p{margin-top: 1.8em;margin-bottom: 1.8em;}
が付け加えられています。1.8emだと結構広く行間が空くため、私は1emと書き換えています。（1emとは1文字分の間隔になります
Bloggerの段落アップデートまとめ
あんまり日本で人気のないBloggerですので、頑張って宣伝してみなさんに良さを分かっていただきたいなと感じる日々です。そんな中での「段落」アップデートは個人的にはかなりうれしくて記事にしてしまいました。
pタグで行間も自動で開いてくれるため作業効率もアップします。個人的にも段落モードと標準モードもうまく使いこなしつつ今後もBloggerでの執筆をつづけてゆきたいと思います。
そもそもBloggerってなに？という方には次の記事をおすすめしております。
