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

先日、(一社)予防団の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 ...

お知らせ

2024/5/10

【🌐お知らせ】ホームページ制作の実績紹介【※消防関係者限定です！】

青木マーケ(株)では消防関係者限定でホームページ制作の仕事も（コッソリと）承っております。 [st-kaiwa1]何で ❝コッソリと❞ なん⁉[/st-kaiwa1] [st-kaiwa6 r]いや忙しいのにホームページ制作の仕事ばっかりにリソース割かれたら大変やんか！[/st-kaiwa6] [st-point fontsize="" fontweight="bold" bordercolor=""]もし本気でホームページから集客したい方いらっしゃいましたら消防関係者限定で、ご相談に乗らせ ...

消防設備士

2024/5/13

Q. 消防設備士になったキッカケは？【７００人に聞いてみた】

先日、管理人が現役消防士と共同管理・運営しているLINEオープンチャット「消防設備士Web勉強会」（※無料）にて以下の質問がありました。 [st-mybox title="" webicon="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 ...

資格試験

2024/5/8

【💮合格体験記】工事担任者（総合通信）過去問の難易度・勉強方法は？

電気通信設備工事担任者(以後、工担 “こうたん” と略します)は、電話やインターネットの回線に係る配線・接続の工事を行うための国家資格です。 [st-kaiwa3]今回その、総合通信（旧：ＡＩ・ＤＤ総合種）と第一級デジタル通信（旧：ＤＤ１種）を同時受験して見事ダブル合格した際の体験談・勉強方法を公開します！[/st-kaiwa3] [st-kaiwa2 r]我々消防設備士もまた、消防用設備業において “火災通報装置” という消防に直通の電話を工事・届出する際にこの “工担” の資格は必携です。[/st-k ...

お知らせ

2024/5/5

予防団を一般社団法人化した理由＆経営方針３つ【脱オンラインサロン】

2024年03月15日に旧オンラインサロン予防団を一般社団法人化し、(一社)予防団を設立しました。 [st-kaiwa1]強欲な法人化♪[/st-kaiwa1] [st-kaiwa6 r]「現役消防士と消防設備士が共同設立した一般社団法人」ってだけで日本初の価値があると思ってます。[/st-kaiwa6] [st-minihukidashi webicon="st-svg-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" ...

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]

ガイドマップメニュー

カスタムボタン

ノーマル

基本

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

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