【保存版】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タグを囲めない）場合は「テキストモード」での作業をお勧めします

この度、Amazon.co.jpでも青木マーケ(株)【公式】より「過去問テスト」の販売を開始しました。 [st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" bordercolor="" borderwidth="" iconsize=""] 転売ヤー価格（※現在、倍以上！）で買って損しないように注意して下さい！ [/st-cmemo] 長らく弊社の教材「過去問 ...

お知らせ

2024/8/15

【号外】あの消防業界誌「Ｊレスキュー」のメルマガに寄稿しました！

第１回消防設備士サミット2024で知り合った藤田廉太郎（元消防士）という熱くてゴツくて敬語を使わない（≠使えない）男いや漢が、消防業界で有名な業界誌「Ｊレスキュー」のメルマガ担当をしており、そこに今回ご縁あって寄稿させて頂きました。ここのメルマガを私が担当しています。これからは設備士もここに含めていきたい考えです。配信されてから登録されても過去のやつは見れないので、今のうちに設備士業界の皆さんの登録をお願いして欲しいです！青木が近いうち出るから登録せよ！との命令を発出してください🤣 ...

お知らせ

2024/8/15

消防設備士サミット2024「消防設備の情報発信の価値について」まとめ

06月08日(土)に名古屋で開催された第１回消防設備士サミット2024のステージ「消防設備の情報発信の価値について」の内容を紹介させて頂きます。 [st-card myclass="st-no-shadow" id="11628" label="参考" pc_height="" name="" bgcolor="#cccccc" color="#ffffff" webicon="st-svg-file-text-o" readmore="on" thumbnail="on" type="text"] ス ...

お知らせ

2024/8/15

第１回消防設備士サミット2024＠名古屋のレビュー・感想【号外】

令和６年６月８日(土)に名古屋で第１回消防設備士サミット2024が開催されました。何と400名以上の消防設備士や消防士といった消防関係者が全国各地から集結し、大盛況のイベントでした。その熱狂について強欲な紹介をさせて頂きます。第１回消防設備士サミット2024＠名古屋のレビュー・感想青木マーケ(株)でブース出しました！今回、私も青木マーケ(株)でブースを出展しました！ ※ブース出展のお声を頂いた際は、まだ(株)防災屋や(一社)予防団を設立していなかったので青木マーケ(株)でブース ...

トラブル

2024/5/12

【⚠超・上から目線】消防検査時の消防士による誤った指摘【自火報】

先日、(一社)予防団のFacebookグループに以下の投稿がありました。（※本人の許可を得て匿名で掲載） [st-mybox title="" webicon="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"] [st-us ...

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]

ガイドマップメニュー

カスタムボタン

ノーマル

基本

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

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