強欲な青木

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

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

管理人

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

本記事の信頼性

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

スタイル

テキスト

これは太字です。

これは赤字です。

これは大文字です。

これは小文字です

これはドット線です。

これは参照リンクです

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

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

これは打消しです。

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

アニメーション

(^ _ ^)45°揺れ

(^ _ ^)ベル揺れ

(^ _ ^)横揺れ

(^ _ ^)縦揺れ

(^ _ ^)点滅

(^ _ ^)バウンド

(^ _ ^)回転

(^ _ ^)ふわふわ

(^ _ ^)大小

(^ _ ^)シェイク

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

(^ _ ^)拡大（ゆれ）

(^ _ ^)過ぎる

(^ _ ^)戻る

(^ _ ^)バースト

アイコン

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

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

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

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

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

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

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

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

見出し

キャッチコピー

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

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

記事タイトル

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

まとめ

カウント

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

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

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

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

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

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

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

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

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

マーカー

これは黄マーカーです。

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

これは赤マーカーです。

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

これは青マーカーです。

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

これは鼠マーカーです。

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

写真

写真枠

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

キャプションあり

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

ポラロイド風

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

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

ボックス

ワイド

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

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

リスト

ドット下線（リスト）

マル（リスト）

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

簡易チェック（リスト）

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

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

ulタグの番号なしリストを囲むとチェックボックス風のデザインになります。

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

ulタグの番号なしリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「チェック（ulタグ）」を適応してから「番号なしリスト」を適応すると便利です。

※カスタマイザーの「オプション」でカラー変更が可能です

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

olタグの番号付きリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「ナンバリング（olタグ）」を適応してから「番号付きリスト」を適応すると便利です。

※カスタマイザーの「オプション」でカラー変更が可能です

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

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

レイアウト

回り込み解除

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

センター寄せ

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

下に余白

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

カードスタイル

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

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

カードスタイル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完成です

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

ポイント

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

ラベル

PC（960px以上）Tab（955px〜600px）のレスポンシブ表示となります

※コンテンツ内容は「バナーショートコード」で作成しています

流れる文字

バナー風ボックス

バナー風デザインを作成するショートコード

flexボックスを使用した様々なデザインを作成できます。背景画像を指定することでバナーのようなボタンを作成することも可能です。

サンプル例

マイボックス

様々なボックスデザインを作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

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

見出し部分を中に変更したデザインです

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

メモボックス

スライドボックス

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

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

サイトで効果の高い「こんな方におすすめ」リストも簡単に作成できます。カスタマイザーの「オプション」でカラー変更も可能です。

<ul class="st-blackboard-list st-no-ck-off">のst-no-ck-offをst-no-ckとすることでアイコンを消せます

「番号付きリスト（olタグ）」にも対応

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

ガイドマップメニュー

カスタムボタン

自由なボタンを作成します。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。

ノーマル

基本

ボタン

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

詳しくはコチラ

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

詳しくはコチラ

詳しくはコチラ（グリーン）

詳しくはコチラ

詳しくはコチラ（ブルー）

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく（オレンジ）

もっと詳しく

もっと詳しく（ピンク）

もっと詳しく

もっと詳しく（ブルー）

もっと詳しく

人気ランキング

人気ランキング

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

ランキングはコチラ

ミニ

基本

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

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

詳しくはコチラ（グリーン）

詳しくはコチラ（ブルー）

MCボタン(AFFINGER又はEX版のみ）

会話ふきだし

「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です

強欲な青木

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

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

管理人

強欲な青木

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

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

山田バイト

強欲な青木

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

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

管理人

管理人

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

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

管理人

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

レイアウト

PCとTab3分割

PCとTab左右40：60%

PCとTab左右50%

PCとTab左右30：70%

全サイズ左右50%

均等横並び

Div

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

マージン

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

タブ(AFFINGER又はEX版のみ）

その他パーツ

スター

年月（EX版のみ）

[st-date]

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

タイトル

◯代男性

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

タイトル

◯代男性

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

アドセンス

ウィジェット「広告・Googleアドセンスのスマホ用300px」で設定した内容を挿入します

オリジナルショートコード

ウィジェット「オリジナルのショートコード作成ウィジェット」で設定した内容を挿入します

YouTube

YouTube動画の貼り付けは直接URLを貼り付ける方法と、IDを指定して「サムネイル画像」リンクとして表示する方法があります。

URL貼り付け

自動でレスポンシブな動画として表示されます。

IDによるサムネイルリンク

サムネイルリンクとして表示することで複数でも表示が遅くなるのを軽減できます。クリックするとYouTubeに飛んでしまうのが欠点です。

三角（下矢印）

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

スクロールナビ(AFFINGER又はEX版のみ）

記事一覧

任意の記事の一覧の記事中の好きな位置に表示できます（EX版ではスライドショーにすることも可能）

カテゴリ一覧

任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定（3~1）などが可能です。

カテゴリ一覧スライドショー

上記の一覧を簡易にスライドショーに変えることが可能です。

その他 ＳＮＳ

2023/11/29

強欲な自己紹介【YouTubeチャンネル強欲な青木＆消防設備士】

平成元年生まれ。三重県出身。 たまたま入った旭が丘ミニバスケットボールクラブが強豪で、小学３年生から生活がバスケ一色に染まる。 小学６年次には副キャプテンとして三重県２位。東海大会へ出場。 鈴鹿市立白子中学校へ入学。少しグレる。 鈴鹿高等工業専門学校 材料工学科へ入学。 再びバスケットボールに注力し、５年次にキャプテンとして全国高専大会優勝を果たす。 静岡大学工学部物質工学科 材料科学コースへ３年次編入。 就職活動をして内定を貰うも、もう少し静岡大学にいたい気持ちから大学院へ進学。 静岡大学工学研究科物質 ...

ReadMore

消防士

2023/11/30

【令和６年度】予防技術検定の受験者は必見！最新の過去問情報まとめ作成戦略

予防技術検定の勉強や情報収集お疲れ様です！ [st-point fontsize="" fontweight="bold" bordercolor=""]この度、持ち帰ることができない予防技術検定の過去問を効率よく収集する戦略として「苗字イニシャル割り当て法」を考えました！[/st-point] これから予防技術検定を受ける方には「苗字イニシャル割り当て法」を用いた過去問情報の収集に協力して頂きたいです。 出題情報が分かれば自分達で解答速報を作って自己採点ができる≒合否も分かるので予防技術検定を受ける皆さ ...

ReadMore

消防設備士

2023/12/5

【消防設備士】基礎的知識（機械）の過去問まとめ【解答・解説つき】

この記事で紹介する過去問および解答・解説をマスターすれば、消防設備士１～３および５・６類で出題される機械に関する基礎的知識でほぼ100点満点に近い点数が取れます！ [st-under-t color="#000"] [st-minihukidashi webicon="st-svg-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]１・２・３類の基礎的知識（機械） ...

ReadMore

消防設備士

2023/11/6

【機械に関する基礎的知識】液体と気体の性質【過去問】

[st-kaiwa1]消防設備士の試験、液体とか気体の性質についても出題あるんやね。 …って範囲広くない！？[/st-kaiwa1] [st-kaiwa6 r]いつも例えばパスカルの原理とか決まった問題が出ているので、ここではギュッと絞って解説していきます。[/st-kaiwa6] このブログを見たら消防設備士試験の「液体と気体の性質」に関する問題が得点源となるはず！   液体の表面張力 液体の表面張力とは「液体分子同士が分子間力により引き合って表面をできるだけ小さくしようとする性質のこと」です ...

ReadMore

消防設備士

2023/11/6

【機械に関する基礎的知識】軸受（ベアリング）の種類【過去問】

[st-kaiwa1]軸受、別名ベアリング‥？ 知らん知らん何じゃそれ！[/st-kaiwa1] [st-kaiwa6 r]タイヤとか回転軸ある機構のパーツに使われる部品ですよ。 一時期、軸受（ベアリング）をオモチャに転用した「ハンドスピナー」とか流行ったじゃないですか。[/st-kaiwa6] [st-kaiwa1]ハンドスピナー‥ありましたね！ 身近なところで軸受って使われてるし、手にしたこともあったわけか‥。[/st-kaiwa1] [st-kaiwa6 r]そうそう、だから難しく考えなくてもOKで ...

ReadMore

ショートコード補助

Webアイコン

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

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

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

HTMLカラーモード

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

クイックボタン

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

太字

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

太赤

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

黄細マ

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

CT

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

写真枠

写真に枠線をつけます

角丸背景

ボタンA

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

ボタンB

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

カード

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