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

来たる2024年06月08日(土)に名古屋にて第１回消防設備士サミットが開催されます！ [st-kaiwa1]参加費「無料」の激アツなイベントですが事前申込制なので注意！[/st-kaiwa1] [st-kaiwa6 r ]もし申込されていない方いらっしゃいましたら今すぐお申し込み下さい！[/st-kaiwa6] [st-point fontsize="" fontweight="bold" bordercolor=""]以下のQRコードから申し込みできます。（※FAXで申し込み用紙送付でも可能です）[ ...

トラブル

2024/4/7

バルサンで火災報知器が鳴ったらどうする？鳴らないタイプは熱感知器！

[st-kaiwa5]げっ！もしかしてバルサンで火災報知器鳴ってる‥‥‥煙感知器のカバーしたのに！[/st-kaiwa5] [st-kaiwa6 r]とりあえず、まずホンマにバルサンで火災報知器が鳴ったんか確認しましょか。たまに『バルサンで火災報知器が鳴った‥‥』と連絡あって現地行ったら熱感知器ついてて全然バルサン関係無いってパターンも過去にあったので。[/st-kaiwa6] バルサンを焚いたタイミングで火災報知器が鳴った場合に、どうするかを「火災報知器を設置・点検するプロ」である消防設備士が紹介し ...

トラブル

2024/4/6

【⚠止め方】バルサンで煙感知器が鳴った！火災報知器の種類と仕組み

[st-kaiwa5]やばっ！バルサン焚いたせいで火災報知器鳴ったかも‥‥どうしたらいい？[/st-kaiwa5] [st-kaiwa6 r]まず落ち着いて下さい。結論、火災報知器の種類によって、そもそもバルサンで鳴るかどうかや止め方も違うので現地確認をしましょう！[/st-kaiwa6] どの種類の火災報知器が設置されているか、その仕組みを「火災報知器を設置・点検するプロ」である消防設備士と共に見ていきましょう。【⚠止め方】バルサンで煙感知器が鳴った！火災報知器の種類と ...

お知らせ

2024/4/10

【新入社員紹介】タマ王（TAMAO）新卒2024年度【ごあいさつ】

この2024年度、青木マーケ(株)に猫のタマ王（TAMAO）が新卒入社したことをご報告させて頂きます。 [st-kaiwa1]きっと今『あれ‥‥‥もしかして猫、変わった？』と混乱されている方もいらっしゃるでしょう。[/st-kaiwa1] [st-kaiwa6 r]もっと早く「ご報告」したかったのですが、かれこれ１年前に ❝不適切にもほどがある❞ 発信をしてしまった関係でタイミングが遅れてしまいました。[/st-kaiwa6] 順を追って内定者代表のタマ王に関する、ご挨拶をさせて頂きます。 ◎ ご報告＆お ...

就職・転職消防設備士

2024/3/14

消防設備士は平均年収・給料の低い仕事？【年収アンケート結果も公開！】

先日、管理しているLINEオープンチャット「消防設備士Web勉強会」にて以下の通り、消防設備士の拘束時間や給与ベース（平均年収）に関する話題となりました。 [st-mybox title="" webicon="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margi ...

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]

ガイドマップメニュー

カスタムボタン

ノーマル

基本

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

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