Natural

このブログはサンプルです。

このテーマで使えるテキスト装飾の一覧

このテーマで利用できるテキスト装飾の一覧です。

文字色

テキスト

<mark class="font-red">テキスト</mark>

テキスト

<mark class="font-blue">テキスト</mark>

テキスト

<mark class="font-yellow">テキスト</mark>

背景色

テキスト

<mark class="bg-red">テキスト</mark>

テキスト

<mark class="bg-blue">テキスト</mark>

テキスト

<mark class="bg-yellow">テキスト</mark>

マーカー線

テキスト

<mark class="marker-red">テキスト</mark>

テキスト

<mark class="marker-blue">テキスト</mark>

テキスト

<mark class="marker-yellow">テキスト</mark>

ボックス

枠線

テキスト

<p class="bg-box">テキスト</p>

二重線

テキスト

<p class="bg-box-double">テキスト</p>

背景グレー白い点線

テキスト

<p class="bg-box-glaydash">テキスト</p>

背景斜線

テキスト

<p class="bg-box-diagonal">テキスト</p>

背景赤

テキスト

<p class="bg-box-red">テキスト</p>

背景青

テキスト

<p class="bg-box-blue">テキスト</p>

背景黄色

テキスト

<p class="bg-box-yellow">テキスト</p>

吹き出し

テキスト
<div class="s-bubble">テキスト</div>

アイコン付きの枠

注意

注意!

ここに文字を入力

<div class="box-warning">
    <span class="box-warning-title">ここにタイトルを入力</span>
    <p>ここに文字を入力</p>
</div>

情報

infomation

ここに文字を入力

<div class="box-info">
    <span class="box-info-title">ここにタイトルを入力</span>
    <p>ここに文字を入力</p>
</div>

メモ

メモ

ここに文字を入力

<div class="box-memo">
    <span class="box-memo-title">ここにタイトルを入力</span>
    <p>ここに文字を入力</p>
</div>

チェック

Point

ここに文字を入力

<div class="box-check">
    <span class="box-check-title">ここにタイトルを入力</span>
    <p>ここに文字を入力</p>
</div>

チェックボックス付きのリスト

  • リスト
  • リスト
  • リスト
<div class="list-check">
  <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ul>
</div>

行間

行間小

テキスト

<p class="between-small">テキスト</p>

行間中

テキスト

<p class="between-mid">テキスト</p>

行間大

テキスト

<p class="between-large">テキスト</p>

行間特大

テキスト

<p class="between-oversized">テキスト</p>

テキスト装飾のHTMLタグは定型文に登録しておくと記事を書くときにすぐに利用できて便利です。

関連記事: テーマで使えるテキスト装飾を定型文に登録する方法 - Natural