「どれをクリックしたらどの装飾が表示されるんだろう？」と悩み、エディタでとりあえずショートコードを出力して「プレビュー」で確認する。
この作業、慣れるまでは仕方ないのかもしれないですけど、死ぬほどメンドクサイ！！
ということで、この記事さえ開いておけばプレビューを押さなくても「どのタブでどの装飾が出力されるかが分かる」ようにしました！
よかったら活用してください
AFFINGERで使える装飾一覧（タグ）
「ダッシュボード」→「投稿」→「新規追加」で表示される【投稿作成画面】で使えるAFFINGERの装飾をサンプルとともに紹介します。
まずはビジュアルエディタのツールバーにある【タグ（またはスタイル）】で使える装飾から一気に見ていきましょう！
クリップメモ
メモ
test
外部リンク
test
ブックマーク
test
おしらせ
test
はてな
test
コメント
test
コード
test
ポイント
test
ユーザー
test
初心者
test
注意文
test
注意文（グレー）
test
[?]ガイド※使用不可
ここにテキスト
クリップメモ（テキスト）
メモ
test
参考
test
関連
test
注意
test
Check
test
次へ進む
test
前に戻る
test
質問
test
回答
test
ミニふきだし
基本
基本のふきだし
オレンジ
オレンジのミニふきだし
ピンク
ピンクのミニふきだし
ブルー
ブルーのミニふきだし
グリーン
グリーンのミニふきだし
レッド
レッドのミニふきだし
+マイボックス
ふきだしテキスト
「ミニふきだし（基本）」と「マイボックス」がセットになった！
[?]ガイド※使用不可
記事を公開すると以下のように装飾されているように見えますが、実際は本来指定されるべきCSSが何も指定されていません。（画像）
ここにテキスト
複合
自由なメモ
自由なメモ
テストテキスト
ココがポイント
ココがポイント
テストテキスト
ココがおすすめ
ココがおすすめ
テストテキスト
ココがダメ
ココがダメ
テストテキスト
ココに注意
ココに注意
テストテキスト
もっと詳しく
さらに詳しく
テストテキスト
女性コメント
◯才女性
テストテキスト
男性コメント
◯才男性
テストテキスト
複合（アイコンなし）
※「ふきだし」のテキストと「ボックス」のテキストはそれぞれ自由に設定可能です。
自由なメモ
自由なメモ
ココがポイント
ココがポイント
ココがおすすめ
ココがおすすめ
ココがダメ
ココがダメ
ココに注意
ココに注意
もっと詳しく
もっと詳しく
はてなマーク
つまづきポイント
まるもじ（小）
基本
テストテキストオレンジ
テストテキストピンク
テストテキストブルー
テストテキストうすい注意
テストテキスト注意
テストテキスト
まるもじ（大）
基本
テストテキスト
オレンジ
テストテキスト
ピンク
テストテキスト
ブルー
テストテキスト
はてな
テストテキスト
チェック
テストテキスト
うすい注意
テストテキスト
注意
[?]ガイド※使用不可
ここにテキスト
HTML（カスタム）
ルビ（ふりがな）
以下のように「ふりがな」を追加可能です。
諸行無常
↓使い方動画
Pタグ
以下のショートコードが出力されます。
使うことはないと思います。僕は使ってません。
[st-p add_style=""][/st-p]
SPANタグ
以下のショートコードが出力されます。
こちらも使うことはないと思います。
[st-span add_style=""][/st-span]
カスタムフォント
デフォルト
テストテキスト
白影
テストテキスト
ステップ
step
1テスト1
step
2テスト2
step
3テスト3
↓ビジュアルエディタ 上で記載している内容
[st-step step_no="1"]テスト1[/st-step]
[st-step step_no="2"]テスト2[/st-step]
[st-step step_no="3"]テスト3[/st-step]
ポイント
テストテキスト
※アイコンの色は「ダッシュボード」→「外観」→「カスタマイズ」→「[+]オプションカラー」→「ステップ / ポイント」から変更可能です。
ラベル
ビジュアルエディタで上記のように記述すると、以下のように表示されます。
流れる文字（marquee風）
テストテキスト
