【保存版】AFFINGER6のスタイル・タグ一覧【記事執筆用】

強欲な青木

AFFINGERって機能多すぎて、どのコマンド押せば‥どんなデザインが呼び出せるか全然いつまで経っても覚えられへん！

おそらくAFFINGER使ってる人、全員その状態ですから…もともとAFFINGERテーマで用意されているスタイルやショートコードによるタグなどのデザイン確認用ページを確認しましょう！

管理人

当サイトはWordpressテーマ「AFFINGER6」を使って、青木防災㈱Web管理人が自分で作成しています。

本記事の信頼性

【保存版】AFFINGER6のスタイル・タグ一覧【記事執筆用】

スタイル

テキスト

これは太字です。

これは赤字です。

これは大文字です。

これは小文字です

これはドット線です。

参考これは参考マークです（例：参考という文字を記入してから使用）

必須これは必須マークです（例：必須という文字を記入してから使用）

これは~~打消し~~です。

これはcodeなどに使用します

アニメーション

(^ _ ^)45°揺れ

(^ _ ^)ベル揺れ

(^ _ ^)横揺れ

(^ _ ^)縦揺れ

(^ _ ^)点滅

(^ _ ^)バウンド

(^ _ ^)回転

(^ _ ^)ふわふわ

(^ _ ^)大小

(^ _ ^)シェイク

(^ _ ^)シェイク（強）

(^ _ ^)拡大（ゆれ）

(^ _ ^)過ぎる

(^ _ ^)戻る

(^ _ ^)バースト

アイコン

アイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます。※通常エディタ上では表示されません

これは「はてな」マークです

これは「注意」マークです

これは「人物」マークです

これは「チェック」マークです

これは「メモ」マークです

これは「王冠」マークです

これは「初心者」マークです

見出し

キャッチコピー

こんな風にキャッチコピー見出しタグのテキストなど

見出しタグのテキストなどこんな風にキャッチコピー

記事タイトル

記事タイトル、h2〜h5風はPタグに見出しタグと同じデザインを設定します

まとめ

カウント

カウントは設定したテキストや見出し（hタグ）などに自動で番号を振付けます。手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。

クイックボタンの「CT」でも付与できます。

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

これは「まとめ」用の見出しです

通常の見出しタグとは別に「まとめ」用のデザインをカスタマイザーの「各テキストとhタグ（見出し）」で設定できます

マーカー

これは黄マーカーです。

これは黄マーカー（細）です。

これは赤マーカーです。

これは赤マーカー（細）です。

これは青マーカーです。

これは青マーカー（細）です。

これは鼠マーカーです。

これは鼠マーカー（細）です。

写真

写真枠

写真に「枠線」を付与します。境界が曖昧な写真などにとくに有効です（クイックボタン「写真枠」でも使用できます）

キャプションあり

キャプションを追加できます

ポラロイド風

写真をポラロイド風にデザインします

リンク付きのキャプション

ボックス

黄色ボックスです

薄赤ボックスです

グレーボックスです

引用風のボックスです

ワイド

幅一杯の背景を設定するEX限定デザインです

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

ショートコードタグでは背景色や画像も設定できます

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

レイアウト

回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除します

センター寄せ

要素をセンター寄せにします。

下に余白

要素の下に「10px」の余白を付けます

カードスタイル

※記事ID2で設定されています（ない場合は適宜変更して下さい）

ブログカードに別のデザインを設定します（全サイズで縦型）

カードスタイルB

ブログカードに別のデザインを設定します（PC、タブレット閲覧時のみ縦型）

width100%リセット

max-width: initial; display: inline;を設定してmax-widthをリセットします。

imgインラインボックス

display: inline;を指定します。

テーブル

テーブル（表の作成）には「TinyMCE Advanced」プラグインが便利です。

横スクロール

スマートフォン閲覧時など横幅がはみ出る場合にtableタグを<div class="scroll-box"></div>で囲むことで横スクロールに対応させます。

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

中央配置

table内のテキストを上下左右の中央に配置します。

テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト

装飾なし

テーマで用意されたデフォルトデザインを解除します。

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

※設定が上手くできない（tableタグを囲めない）場合は「テキストモード」での作業をお勧めします

青木マーケ㈱【公式】noteにて販売している消防設備士７類「過去問テスト」乙種【※PDF付き】をご利用いただいた方々から頂いた口コミ・評判および合格報告の数々をまとめて紹介します！ [st-kaiwa5]ぶっちゃけ口コミ・評判および合格報告の量が多すぎて紹介しきれない！強欲！[/st-kaiwa5] [st-kaiwa6 r]コツコツご感想を頂き次第、全類それぞれ別のページに追記していくことにします！[/st-kaiwa6] [st-timeline myclass="" add_style=""] [s ...

VOICE 消防設備士資格試験

2023/9/8

【2023年度版】消防設備士「過去問テスト」３類の口コミ・評判まとめ

青木マーケ㈱【公式】noteにて販売している消防設備士３類「過去問テスト」甲種【※PDF付き】および消防設備士３類「過去問テスト」乙種【※PDF付き】をご利用いただいた方々から頂いた口コミ・評判および合格報告の数々をまとめて紹介します！ [st-kaiwa5]ぶっちゃけ口コミ・評判および合格報告の量が多すぎて紹介しきれない！強欲！[/st-kaiwa5] [st-kaiwa6 r]コツコツご感想を頂き次第、全類それぞれ別のページに追記していくことにします！[/st-kaiwa6] [st-timeline ...

VOICE 消防設備士資格試験

2023/9/8

【2023年度版】消防設備士「過去問テスト」１類の口コミ・評判まとめ

青木マーケ㈱【公式】noteにて販売している消防設備士１類「過去問テスト」甲種【※PDF付き】および消防設備士１類「過去問テスト」乙種【※PDF付き】をご利用いただいた方々から頂いた口コミ・評判および合格報告の数々をまとめて紹介します！ [st-kaiwa5]ぶっちゃけ口コミ・評判および合格報告の量が多すぎて紹介しきれない！強欲！[/st-kaiwa5] [st-kaiwa6 r]コツコツご感想を頂き次第、全類それぞれ別のページに追記していくことにします！[/st-kaiwa6] [st-timeline ...

VOICE 消防設備士資格試験

2023/9/8

【2023年度版】消防設備士「過去問テスト」６類の口コミ・評判まとめ

青木マーケ㈱【公式】noteにて販売している消防設備士６類「過去問テスト」乙種【※PDF付き】をご利用いただいた方々から頂いた口コミ・評判および合格報告の数々をまとめて紹介します！ [st-kaiwa5]ぶっちゃけ口コミ・評判および合格報告の量が多すぎて紹介しきれない！強欲！[/st-kaiwa5] [st-kaiwa6 r]コツコツご感想を頂き次第、全類それぞれ別のページに追記していくことにします！[/st-kaiwa6] [st-timeline myclass="" add_style=""] [s ...

VOICE 消防設備士資格試験

2023/9/8

【2023年度版】消防設備士「過去問テスト」４類の口コミ・評判まとめ

青木マーケ㈱【公式】noteにて販売している消防設備士４類「過去問テスト」甲種【※PDF付き】および消防設備士４類「過去問テスト」乙種【※PDF付き】をご利用いただいた方々から頂いた口コミ・評判および合格報告の数々をまとめて紹介します！ [st-kaiwa5]ぶっちゃけ口コミ・評判および合格報告の量が多すぎて紹介しきれない！強欲！[/st-kaiwa5] [st-kaiwa6 r]コツコツご感想を頂き次第、全類それぞれ別のページに追記していくことにします！[/st-kaiwa6] [st-timeline ...

Webアイコン

ショートコードに挿入するためのWebアイコンです（アイコンが直接表示されるわけではございません。ショートコードの引数に使用して下さい）

アニメーション（クラス）

ショートコードに挿入するためのCSS用のクラスです（ショートコードの引数に使用して下さい）

HTMLカラーモード

ショートコードに挿入するHTMLカラーコードです（カラーが直接表示されるわけではございません。ショートコードの引数に使用して下さい）

#e53935

#f44336

#ffebee

#03A9F4

#E1F5FE

#43A047

#4CAF50

#E8F5E9

#FFC107

#FFF3E0

#212121

#424242

#FAFAFA

#FFFDE7

クイックボタン

エディタの上に表示されているボタンです。クリックするだけでデザインが適応されるので使用頻度の高いものなどを設定しています。

太字

選択したテキストに太字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい

太赤

選択したテキストに太赤字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい

黄細マ

選択したテキストに黄マーカー（細）を適応します

CT

選択したテキストや見出しに自動カウントを設定します

写真枠

写真に枠線をつけます

角丸背景

角丸のマイボックスを設定します。

ボタンA

HTMLでボタンデザインAを挿入します（AFFINGERの場合「ランキング管理」＞「CSS」でカラーを変更できます）

ボタンB

HTMLでボタンデザインBを挿入します（AFFINGERの場合「ランキング管理」＞「CSS」でカラーを変更できます）

カード

記事IDを設定することで内部リンクをブログカード化します

【保存版】AFFINGER6のスタイル・タグ一覧【記事執筆用】

【保存版】AFFINGER6のスタイル・タグ一覧【記事執筆用】

スタイル

テキスト

アニメーション

アイコン

見出し

キャッチコピー

こんな風にキャッチコピー見出しタグのテキストなど

見出しタグのテキストなどこんな風にキャッチコピー

記事タイトル

まとめ

カウント

これは「まとめ」用の見出しです

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

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

マーカー

写真

写真枠

キャプションあり

ポラロイド風

ボックス

ワイド

リスト

ドット下線（リスト）

マル（リスト）

マル+ドット下線（リスト）

簡易チェック（リスト）

簡易チェック+ドット下線（リスト）

チェックボックス（番号なしリスト）

チェックリスト（番号なしリスト）

ナンバリング（番号付きリスト）

ナンバリング四角（リスト）

ナンバリング四角+ドット下線（リスト）

レイアウト

回り込み解除

センター寄せ

下に余白

カードスタイル

カードスタイルB

ランキングボックス(AFFINGER又はEX版のみ）

width100%リセット

imgインラインボックス

テーブル

横スクロール

中央配置

装飾なし

タグ

デザイン

クリップメモ

ミニふきだし

複合

複合（アイコンなし）

まるもじ（小）

ポイントこれは見出しに使用したサンプル

まるもじ（大）

カスタムフォント

ステップ

ポイント

ラベル

流れる文字

バナー風ボックス

サンプル例

マイボックス

マイボックス（+CSSクラス）

見出し付きフリーボックス

メモボックス

スライドボックス

チェックボックス（番号なしリスト）

こんな方におすすめ（v）

こんな方におすすめ[v]

ガイドマップメニュー

カスタムボタン

ノーマル

基本

詳しくはコチラ（オレンジ）

詳しくはコチラ（レッド）