【重要】
☆本来このページは納品後にご自分で書くブログページです。
※このページはAFFINGER6を使用したサンプルページです。このページがないと一覧表示等の見映え確認ができないため、作成されています。
◎納品後に、このページがどこに表示されるのかを確認後、「削除」または「下書き」にしてください。内容を修正して活用していただくことも可能です。
・その場合は、文章とアイキャッチ画像を差し替えてください。
AFFINGER6テーマで用意されているスタイルやショートコードによるタグなどのデザイン確認用ページです。Gutenbergで使用する場合はクラッシックブロックをご利用下さい。
スタイル
テキスト
これは太字です。
これは赤字です。
これは大文字です。
これは小文字です
これはドット線です。
参考これは参考マークです（例：参考という文字を記入してから使用）
必須これは必須マークです（例：必須という文字を記入してから使用）
これは打消しです。
これはcodeなどに使用します
アイコン
アイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます。※通常エディタ上では表示されません
これは「はてな」マークです
これは「注意」マークです
これは「人物」マークです
これは「チェック」マークです
これは「メモ」マークです
これは「王冠」マークです
これは「初心者」マークです
見出し
キャッチコピー
こんな風にキャッチコピー見出しタグのテキストなど
見出しタグのテキストなどこんな風にキャッチコピー
記事タイトル
記事タイトル、h2〜h5風はPタグに見出しタグと同じデザインを設定します
まとめ
カウント
カウントは設定したテキストや見出し（hタグ）などに自動で番号を振付けます。手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。
クイックボタンの「CT」でも付与できます。
これはダミーのテキストです
これはダミーのテキストです
これはダミーのテキストです
これは「まとめ」用の見出しです
通常の見出しタグとは別に「まとめ」用のデザインをカスタマイザーの「各テキストとhタグ（見出し）」で設定できます
ランキング(AFFINGER又はEX版のみ）
ランキング1位
ランキング2位
ランキング3位
ランキング4位以下
マーカー
これは黄マーカーです。
これは黄マーカー（細）です。
これは赤マーカーです。
これは赤マーカー（細）です。
これは青マーカーです。
これは青マーカー（細）です。
これは鼠マーカーです。
これは鼠マーカー（細）です。
ブログカードに別のデザインを設定します（全サイズで縦型）
カードスタイルB
ブログカードに別のデザインを設定します（PC、タブレット閲覧時のみ縦型）
ランキングボックス(AFFINGER又はEX版のみ）
「ランキング一覧背景色」と同じスペースを設定します
width100%リセット
max-width: initial; display: inline;を設定してmax-widthをリセットします。
imgインラインボックス
display: inline;を指定します。
テーブル
テーブル（表の作成）には「TinyMCE Advanced」プラグインが便利です。
横スクロール
スマートフォン閲覧時など横幅がはみ出る場合にtableタグを<div class="scroll-box"></div>で囲むことで横スクロールに対応させます。
| これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
| これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
中央配置
table内のテキストを上下左右の中央に配置します。
| テキスト | テキスト | テキスト | テキスト |
| テキスト | テキスト | テキスト | テキスト |
装飾なし
テーマで用意されたデフォルトデザインを解除します。
| これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
| これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
※設定が上手くできない（tableタグを囲めない）場合は「テキストモード」での作業をお勧めします
タグ
デザイン
クリップメモ
ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
（メモ）これはダミーです
（外部リンク）ダミーテキストです
（ブックマーク）ダミーテキストです
（おしらせ）ダミーテキストです
（はてな）これはダミーです
（コメント）これはダミーです
（コード）これはダミーです
（ポイント）これはダミーです
（ユーザー）これはダミーです
（初心者）これはダミーです
（注意文グレー）これはダミーです
（注意文）これはダミーです
ミニふきだし
ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
（基本）これはダミーです
（オレンジ）これはダミーです
（ピンク）これはダミーです
（ブルー）これはダミーです
（グリーン）これはダミーです
（レッド）これはダミーです
複合
自由なメモ
これはダミーです
ココがポイント
これはダミーです
ココがおすすめ
これはダミーです
ココがダメ
これはダミーです
ココに注意
これはダミーです
さらに詳しく
これはダミーです
◯才女性
これはダミーです
◯才男性
これはダミーです
複合（アイコンなし）
自由なメモ
これはダミーです
ココがポイント
これはダミーです
ココがおすすめ
これはダミーです
ココがダメ
これはダミーです
ココに注意
これはダミーです
もっと詳しく
これはダミーです
つまづきポイント
これはダミーです
まるもじ（小）
丸い背景の文字を作成します。見出しタグの前などに使用するとポイントになりお薦めです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
（基本）これはダミーです （オレンジ）これはダミーです （ピンク）これはダミーです （ブルー）これはダミーです （うすい注意）これはダミーです （注意）これはダミーですポイントこれは見出しに使用したサンプル
まるもじ（大）
丸い背景の大きめの文字を作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
基本：これはダミーです
（オレンジ）これはダミーです
（ピンク）これはダミーです
（ブルー）これはダミーです
（はてな）これはダミーです
（チェック）これはダミーです
（うすい注意）これはダミーです
（注意）これはダミーです
カスタムフォント
カスタムフォントはショートコードでフォントをカスタマイズできます
これはダミーです
これはダミーです
ステップ
「購入の流れ」などステップを使用したい場合のデザインに便利です。カラーなどがカスタマイザーの「オプション」で変更できます
step
1お湯を入れる
これはダミーのテキストです
step
23分待つ
これはダミーのテキストです
step
3完成です
これはダミーのテキストです
ポイント
これはダミーのテキストです
流れる文字
これはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーです
会話ふきだし
「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です
ランキング見出し(AFFINGER又はEX版のみ）
ランキング1位
ランキング2位
ランキング3位
ランキング4位以下
Div
任意のクラスを設定するdivを作成します
マージン
マージンをつける用のボックスを作成します
タブ(AFFINGER又はEX版のみ）
タブ1のコンテンツ
タブ2のコンテンツ
その他パーツ
スター
年月（EX版のみ）
[st-date]
画像付きコメント(AFFINGER又はEX版のみ）
これはダミーのテキストです
タイトル
◯代男性
これはダミーのテキストです
三角（下矢印）
カラーを変更できる三角矢印のショートコードです。
タイトル
◯代男性