Cherieに搭載されているクイックタグ・装飾（クラス）の一覧です。記事作成に便利なものをピックアップしています。
クイックタグ
まずは、編集画面上部にあるボタンでワンタッチで装飾可能なクイックタグ。
TCDテーマオリジナルのものをそれぞれご紹介いたします。
Hタグ
対象のテキストを選択してワンタッチで「見出し」デザイン（h2-h5）に変更できます。各見出しのデザインは次のようなテーマオプションで編集&登録可能です。一度デザインを登録しておけば、いつでもワンタッチで呼び出せます。
番号付きリスト
- リスト1
- リスト2
- リスト3
こんなリストをワンタッチで設置できます。手順など、番号付きのリストが必要な際にお使いください。色にはテーマのアクセントカラーと連動する仕様です。
囲み枠
こんな感じでテキストを囲む枠を表示します。
上はシンプルな囲み枠ですが、こちらもテーマオプションでデザイン可能です。色や枠の種類を3タイプまで登録できて、「POINT」などのラベルを設定することもできます。
先ほどの「見出し」もそうですが、デザインを登録する前にリアルタイムプレビューできます。
ボタン
こちらもご自身でデザインできるボタンを最大3つまで登録可能です。
タイプ、シェイプ、サイズ、カラーなど細かく確認しながら登録できます。
アンダーライン
テキストを選択すると、簡単にアンダーラインを引けるクイックタグです。重要な箇所をマークしたい時にお使いください。
3色までカラーを登録できて、文字の太さやアニメーションの有無も設定可能。
吹き出し
こういった吹き出し風のデザインもワンタッチで出力できます。カラーを変えて左右2タイプずつ登録可能です。会話式のコンテンツを作りたいときに便利です。
googleマップ
住所や地名を入力するとワンタッチでGoogleマップも表示可能です。
↑は、[qt_google_map address="大阪城"]と入力した例です。ピンに表示する画像や背景色も登録可能です。
装飾（クラス）
クラスを指定することで反映される装飾をご紹介いたします。本文をHTMLで編集する際にご活用いただけます。
frame（画像に枠をつける）
imgタグに付与することで、画像に枠と影をつけます。
▼画像にframeクラスを指定した例
<img src="画像URL" class="frame"/>is-pc（PCのみ表示）
任意のコンテンツに付与することで、PCでしか表示されなくなります（下の画像はPCでしか表示されません）。
▼画像にis-pcクラスを指定した例
<img src="画像URL" class="is-pc"/>画像以外にも指定できるので、PCのみに表示したいコンテンツに設定してみてください。
is-sp（スマホのみ表示）
逆に下の画像はモバイルデバイス（スマホやタブレット）でしか表示されません。
▼画像にis-spクラスを指定した例
<img src="画像URL" class="is-sp"/>スマホでしか表示しないコンテンツに指定してください。
a_break（改行位置調整）
小さなデバイスで見た際のテキストを指定の位置で改行できます。下記画面は、WordPressテーマ「common」の表示例です。
どのデバイスでもコンテンツを綺麗に見せるためにご活用ください。
▼エディタの入力例
<h2>長い見出しです<span class="a_break">ここから小さいデバイスでは改行</span></h2>e_link（外部リンクアイコン）
「外部サイト（ページ）に飛びますよ」というアイコンを表示すクラスです。aタグに「e_link」というクラスを指定して使います。
>>WordPressテーマ「TCD」公式サイト（←このアイコンのことです）
▼エディタの入力例
<a class="e_link" href="https://tcd-theme.com/" rel="noopener" target="_blank">WordPressテーマ「TCD」公式サイト</a>align1,2,3（揃え位置）
ブロック要素の揃え位置を指定できるクラスです。主に<h2>や<p>タグなどのブロック要素に指定することを想定しています。
→中央寄せ←
→右寄せ→
←左寄せ←
▼エディタの入力例
<p class=”align1″>→中央寄せ←</p>
<p class=”align2″>→右寄せ→</p>
<p class=”align3″>←左寄せ←</p>mt,mb,pt,pb（余白調整）
要素のmarginやpaddingの指定用のクラスです。余白を微調整することが可能です。テーマ内にあらかじめ組み込んでいますので、0-80まで5刻みで数値を入力するだけで、調整いただけます。
画像に「mb0」としてテキストとの間のマージンを調整しています。
▼エディタの入力例
<p class="mb0"><img src="画像URL" class="frame" /></p>
<p class="align1">画像下部とテキスト上部の間のマージンを調整しています。</p>
