AFFINGER6 サンプルページ【装飾】①

【重要】

☆本来このページは納品後にご自分で書くブログページです。

※このページは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クリックで呼び出すことが可能です

ナイス君

これはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストです

いいね君

web Bamboo

これはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストです

ランキング見出し(AFFINGER又はEX版のみ）

Div

任意のクラスを設定するdivを作成します

マージン

マージンをつける用のボックスを作成します

タブ(AFFINGER又はEX版のみ）

その他パーツ

スター

年月（EX版のみ）

[st-date]

画像付きコメント(AFFINGER又はEX版のみ）

タイトル

◯代男性

これはダミーのテキストです

タイトル

◯代男性

これはダミーのテキストです

三角（下矢印）

カラーを変更できる三角矢印のショートコードです。