
ブログの根幹でもある、本文テキストの構造です。
カスタムにあたって知っておくと便利なことの紹介なので、座学的でつまらないものですが、ぜひ読んでくださるとうれしいです。
テキストの種類
Bloggerの作成ビューで、基本的に使用されるテキストの種類には以下のものがあります。
<h1> 主見出し
<h2> 見出し
<h3> 小見出し
<h4> 準見出し
<p> 段落
これがそのままHTMLとしてかかれているため、ブログ本体の中身はこんな感じになっています。
See the Pen 例文8718939065248079194 by Maica (@shiro-ka) on CodePen.
(<br/>は改行です。この次の項で出番がきます。)
ご自身のBloggerのHTMLを見てみるのも直感的に理解しやすいのでオススメです。
Bulma (css) のいろいろ
詳しくはBulma解説に譲り、ここでは軽く触れる程度にします。
基本的にはBulmaの設定そのままになっています。
再度になってしまいますが、見た目はこんな感じです。
<h1> 主見出し
<h2> 見出し
<h3> 小見出し
<h4> 準見出し
<p> 段落
<p> 段落
見出し類
見出し類はサイズ・太さが変更され、余白が設定されます。
1~4の数字の違いで、大きさ・余白が変わります。以上!
簡潔な説明ですが、 正直これさえ知っていればあまり困らないと思います。
見出しの機能面について知りたい方はこちら
文章類
<p> 段落
<p> 段落
文章類は、<p>なら下に余白アリ、<div>なら余白ナシとなります。
しかし、<p>でも「Shift」を押しながら改行することで、余白ナシの改行となります。
See the Pen
pとdiv8718939065248079194 by Maica (@shiro-ka)
on CodePen.
そのためdivで文章を書くメリットはあまりなく、のねしんぷるでは <p>「段落」で文章を書くことを推奨させていただきます。
文章に関するcss全般やリンクカード生成機能などは、文章を<p>で書いていただくことを前提にしておりますので、divで書く際はご自身で調整していただく形になります。
このページのCSS
太字(<b>)に下線を引く
.content b {
border-bottom: solid 1px ;
}