基本構造:本文のテキスト


ブログの根幹でもある、本文テキストの構造です。

カスタムにあたって知っておくと便利なことの紹介なので、座学的でつまらないものですが、ぜひ読んでくださるとうれしいです。

テキストの種類

Bloggerの作成ビューで、基本的に使用されるテキストの種類には以下のものがあります。

<h1> 主見出し

<h2> 見出し

<h3> 小見出し

<h4> 準見出し

<p> 段落

<div> 標準
 

これがそのままHTMLとしてかかれているため、ブログ本体の中身はこんな感じになっています。

See the Pen 例文8718939065248079194 by Maica (@shiro-ka) on CodePen.

(<br/>は改行です。この次の項で出番がきます。)

ご自身のBloggerのHTMLを見てみるのも直感的に理解しやすいのでオススメです。

Bulma (css) のいろいろ

詳しくはBulma解説に譲り、ここでは軽く触れる程度にします。

基本的にはBulmaの設定そのままになっています。
再度になってしまいますが、見た目はこんな感じです。

<h1> 主見出し

<h2> 見出し

<h3> 小見出し

<h4> 準見出し

<p> 段落

<p> 段落

<div> 標準
<div> 標準

見出し類

見出し類はサイズ・太さが変更され、余白が設定されます。
1~4の数字の違いで、大きさ・余白が変わります。以上!

簡潔な説明ですが、 正直これさえ知っていればあまり困らないと思います。

見出しの機能面について知りたい方はこちら

文章類

<p> 段落

<p> 段落

<div> 標準
<div> 標準
 

文章類は、<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 ;
}