記事の装飾

投稿・固定ページの編集では、文字の大きさや色を変更する、目立たせたい文章にマーカーを引く、リンクボタンの設置、ボックスでコンテンツを囲んだりと、記事を書くのに便利なテーマ独自の装飾スタイルを利用することができます。

装飾スタイルの使い方（ビジュアル編集）

ビジュアルエディターを使う場合は、「スタイル」のドロップダウンメニューから装飾スタイルを簡単に呼び出すことができます。

装飾スタイルの種類

文字のスタイル

文字のサイズ（特小）　文字のサイズ（小）　文字のサイズ（大）　文字のサイズ（特大）

文字の太さ（太）

黄色の文字　赤色の文字　青色の文字　　緑色の文字　灰色の文字

マーカー

太いマーカー（黄）　太いマーカー（赤）　太いマーカー（青）　太いマーカー（緑）

細いマーカー（黄）　細いマーカー（赤）　細いマーカー（青）　細いマーカー（緑）

ボタン

ボックス

テキスト編集の場合（HTMLの入力）

ビジュアル編集では「スタイル」からから装飾ツールを選択できますが、テキスト編集を使う場合は、HTMLを記述することで装飾スタイルを適用することができます。

文字のスタイル

文字のサイズ（特小）

<span class="text-xsmall">文字のサイズ（特小）</span>

文字のサイズ（小）

<span class="text-small">文字のサイズ（小）</span>

文字のサイズ（大）

<span class="text-large">文字のサイズ（大）</span>

文字のサイズ（特大）

<span class="text-xlarge">文字のサイズ（特大）</span>

文字の太さ

<span class="text-bold">文字の太さ（太）</span>

黄色の文字

<span class="text-yellow">黄色の文字</span>

赤色の文字

<span class="text-red">赤色の文字</span>

青色の文字

<span class="text-blue">青色の文字</span>

緑色の文字

<span class="text-green">緑色の文字</span>

灰色の文字

<span class="text-gray">灰色の文字</span>

マーカー

太いマーカー（黄）

<span class="marker-yellow-bold">太いマーカー（黄）</span>

太いマーカー（赤）

<span class="marker-red-bold">太いマーカー（赤）</span>

太いマーカー（青）

<span class="marker-blue-bold">太いマーカー（青）</span>

太いマーカー（緑）

<span class="marker-green-bold">太いマーカー（緑）</span>

細いマーカー（黄）

<span class="marker-yellow-light">細いマーカー（黄）</span>

細いマーカー（赤）

<span class="marker-red-light">細いマーカー（赤）</span>

細いマーカー（青）

<span class="marker-blue-light">細いマーカー（青）</span>

細いマーカー（緑）

<span class="marker-green-light">細いマーカー（緑）</span>

ボタン

標準ボタン

<div class="btn">
<p><a href="#">標準ボタン</a></p>
</div>

標準ボタン（黄）

<div class="btn-yellow">
<p><a href="#">標準ボタン（黄）</a></p>
</div>

標準ボタン（赤）

<div class="btn-red">
<p><a href="#">標準ボタン（赤）</a></p>
</div>

標準ボタン（青）

<div class="btn-blue">
<p><a href="#">標準ボタン（青）</a></p>
</div>

標準ボタン（緑）

<div class="btn-green">
<p><a href="#">標準ボタン（緑）</a></p>
</div>

標準ボタン（黒）

<div class="btn-black">
<p><a href="#">標準ボタン（黒）</a></p>
</div>

大きいボタン

<div class="btn-l">
<p><a href="#">大きいボタン</a></p>
</div>

小さいボタン

<div class="btn-s">
<p><a href="#">小さいボタン</a></p>
</div>

点滅ボタン

<div class="btn-flash">
<p><a href="#">点滅ボタン</a></p>
</div>

心拍ボタン

<div class="btn-beat">
<p><a href="#">心拍ボタン</a></p>
</div>

震動ボタン

<div class="btn-buzz">
<p><a href="#">震動ボタン</a></p>
</div>

震動ボタン（マウスオン）

<div class="btn-buzzout">
<p><a href="#">震動ボタン（マウスオン）</a></p>
</div>

ボックス

ボックス（色なし）

<div class="box-simple">
<p>ボックス（色なし）</p>
<p>ビジュアルエディタの「スタイル」から「ボックス」の種類を選択して文章を囲むことができます。</p>
</div>

ボックス（黄）

<div class="box-yellow">
<p>ボックス（黄）</p>
<p>ビジュアルエディタの「スタイル」から「ボックス」の種類を選択して文章を囲むことができます。</p>
</div>

ボックス（赤）

<div class="box-red">
<p>ボックス（赤）</p>
<p>ビジュアルエディタの「スタイル」から「ボックス」の種類を選択して文章を囲むことができます。</p>
</div>

ボックス（青）

<div class="box-blue">
<p>ボックス（青）</p>
<p>ビジュアルエディタの「スタイル」から「ボックス」の種類を選択して文章を囲むことができます。</p>
</div>

ボックス（緑）

<div class="box-green">
<p>ボックス（緑）</p>
<p>ビジュアルエディタの「スタイル」から「ボックス」の種類を選択して文章を囲むことができます。</p>
</div>

ボックス（黒）

<div class="box-black">
<p>ボックス（黒）</p>
<p>ビジュアルエディタの「スタイル」から「ボックス」の種類を選択して文章を囲むことができます。</p>
</div>