AFFINGER6EX（アップグレード）版の記事作成パーツ（スタイル編）

岩手盛岡IT温泉

AFFINGER6EX（アップグレード）版の記事作成パーツ（スタイル編）

25/03/24

きのぷー
きのぷー

こんにちは、たかみかんブログへようこそ (*> ᴗ •*)ゞ

今回は、当サイトで使わせていただているWORDPRESSテーマ「AFFINGER6EX（アップグレード版）」で使える記事作成パーツをまとめてみました。今回は「スタイル」編です。是非最後までお付き合いください(＾∀＾)ノ

早速行ってみましょう！

テキスト装飾

太字　<span class="huto">たかみかんブログ</span>

赤字　<span class="hutoaka">たかみかんブログ</span>

大文字　<span class="oomozi">たかみかんブログ</span>

これは小文字です　<span class="komozi">たかみかんブログ</span>

点線　<span class="dotline">たかみかんブログ</span>

これは参照リンクです　<p class="st-share"><a href="#"></a></p>

参考参考マーク（例：参考という文字を記入してから使用）　<span class="sankou">参考</span>

必須必須マーク（例：必須という文字を記入してから使用）　<span class="st-hisu">必須</span>

打ち消し　<del>打ち消し</del>

コード表示などに使用　<code>code</code>

参考マークと必須マークはspanタグで囲っているだけですので、文字変更可です

参照リンクはAFFINGER EXのデフォルト設定だとWING時代のデザインにはなりませんでした（ブロックメニュー→スタイル→リンクでボックスデザインを付ければOK）

アニメーション

45°揺れ　<span class="st-wrench animated st-animate">45°揺れ</span>

ベル揺れ　<span class="st-ring animated st-animate">ベル揺れ</span>

横揺れ　<span class="st-horizontal animated st-animate">横揺れ</span>

縦揺れ　<span class="st-vertical animated st-animate">縦揺れ</span>

点滅　<span class="st-flash animated st-animate">点滅</span>

バウンド　<span class="st-bounce animated st-animate">バウンド</span>

回転　<span class="st-rotation animated st-animate">回転</span>

ふわふわ　<span class="st-float animated st-animate">ふわふわ</span>

大小　<span class="st-pulse animated st-animate">大小</span>

シェイク　<span class="st-shake-s animated st-animate">シェイク</span>

シェイク（強）　<span class="st-shake st-animate">シェイク強</span>

拡大（ゆれ）　<span class="st-tada animated st-animate">拡大(ゆれ)</span>

過ぎる　<span class="st-passing animated st-animate">過ぎる</span>

戻る　<span class="st-passing-reverse animated st-animate">戻る</span>

(^ _ ^)バースト　<span class="st-burst animated st-animate">バースト</span>

落ちる　<span class="st-falling animated st-animate">落ちる</span>

😄　絵文字にも使用可能です

アイコン

アイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます

はてな　<span class="hatenamark2 on-color">はてなマーク</span>

注意　<span class="attentionmark2 on-color">注意マーク</span>

人物　<span class="usermark2 on-color">人物マーク</span>

チェック　<span class="usermark2 on-color">チェックマーク</span>

メモ　<span class="memomark2 on-color">メモマーク</span>

王冠　<span class="oukanmark on-color">王冠マーク</span>

初心者　<span class="bigginermark on-color">初心者マーク</span>

見出し

キャッチコピー

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

<h4 class="wp-block-heading"><span class="st-h-copy">こんな風にキャッチコピー</span>見出しタグのテキストなど</h4>

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

<h4 class="wp-block-heading">見出しタグのテキストなど<span class="st-h-copy">こんな風にキャッチコピー</span></h4>

記事タイトル

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

カウント

設定したテキストや見出し等に自動で番号を振ります。CSSで採番するため、目次などにも反映されない仕様のようです。何より手入力よりも楽です。クイックボタンの「CT」でも付与できます。

わっほい!
わっほい!
わっほい!

<span class="st-count">わっほい!</span>

まとめ

まとめ用の見出しはカスタマイザーの「各テキストとhタグ（見出し）」で、個別に設定が可能です。

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

<h4 class="st-matome">これは「まとめ」用の見出しです</h4>

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

1位

2位

3位

4位以下

<h4 class="rankh4 rankno-1">1位</h4> <h4 class="rankh4 rankno-2">2位</h4> <h4 class="rankh4 rankno-3">3位</h4> <h4 class="rankh4 rankno-4">4位以下</h4>

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

マーカー

黄マーカー　<span class="ymarker">黄マーカー<span>

黄マーカー（細）　<span class="ymarker-s">黄マーカー<span>

赤マーカー　<span class="rmarker">赤マーカー<span>

赤マーカー（細）　<span class="rmarker-s">赤マーカー（細）<span>

青マーカー　<span class="bmarker">青マーカー<span>

青マーカー（細）　<span class="bmarker-s">青マーカー（細）<span>

鼠マーカー　<span class="gmarker">鼠マーカー<span>

鼠マーカー（細）　<span class="gmarker-s">鼠マーカー（細）<span>

写真

写真枠

写真に枠線を付けます

キャプションあり

椿島（つばきしま）

<figure class="wp-block-image size-large"><img src="https://blog.takamikan.jp/wp-content/uploads/2025/03/tsubakishima2019.jpg" alt=""/><figcaption class="wp-element-caption">ここにキャプションを追加</figcaption></figure>

ポラロイド風

キャプションなし

<figure class="wp-block-image size-large is-style-st-photohu"><img src="https://blog.takamikan.jp/wp-content/uploads/2025/03/tsubakishima2019.jpg" alt=""/></figure>

キャプションあり

椿島（つばきしま）

<figure class="wp-block-image size-large is-style-st-photohu"><img src="https://blog.takamikan.jp/wp-content/uploads/2025/03/tsubakishima2019.jpg" alt=""/><figcaption class="wp-element-caption">椿島（つばきしま）</figcaption></figure>

ボックス

カラーボックス

うっうー

<div class="yellowbox">黄色ボックス</div>

ぐさぁーっ!　うぎゃー！

<div class="redbox">薄赤ボックス</div>

美味しいから大丈夫だよ

<div class="graybox">グレーボックス</div>

カニも女子力よ!!

<div class="graybox">引用風のボックス</div>

ワイド（EX限定デザイン）

幅一杯の背景を設定します

ぎゃおおおおん!
キャハっ!
くぃどぅるるる

ショートコードタグで背景色や画像が設定可

ふーん、あんたが私のプロデューサー？……まあ、悪くないかな…。
大丈夫、貴方が育てたアイドルだよ
誰かの笑顔のために戦える人、それがヒーローだ！

リスト

ドット下線（リスト）

  • ドームですよっ!ドームっっ!
  • なんとっ!
  • にょわー☆

マル（リスト）

  • 働いたら負け
  • なんなのなの！？
  • さいぱんスーパーアリーナ

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

  • ほっとかない、ほっとかないよ!
  • まぁまぁ眼鏡どうぞ
  • まっこまっこりーん

簡易チェック（リスト）

  • みりあもやるー
  • むーりぃー
  • 目指すのは、歌もダンスも世界レベル

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

  • めっちゃやむ
  • 闇に飲まれよ！
  • わかるわ

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

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

  • これはダミーのリストんご
  • がんばルビィ！
  • ハグ……しよ？

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

ulタグの番号なしリストを囲むとチェック風のデザインになります（カスタマイザーの「オプション」でカラー変更可能）

  • ここに来てくれた人が絶対に自慢できるようにしてみせるから！
  • 未来ずらぁー！！！
  • 全速前進、ヨーソロー！！！

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

olタグの番号付きリストを囲むとチェック風のデザインになります（カスタマイザーの「オプション」でカラー変更可能）

  1. 出来るかどうかじゃない、やりたいかどうかだよっ！
  2. にっこにっこにー！
  3. 飛べるよ…いつだって飛べる。あの頃のように！

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

  • 学校の許可～？認められないわ！
  • 変わることを恐れないで、突き進む勇気。私はあの時、あなたの手に救われた
  • ナニソレイミワカンナイ！

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

  • 何にも囚われないで一番やりたいこと、一番面白そうなものに怯まず真っ直ぐに向かって行く…それは穂乃果にしかないものかもしれません
  • みんなのハート打ち抜くゾ！バーン！
  • 私は皆が決めた事、やりたい事にずっとついていきたい。道に迷いそうになる事もあるけれど、それが無駄になるとは私は思わない。皆が集まってそれぞれの役割を精一杯やりきれば、素敵な未来が待っているんじゃないかな

レイアウト

回り込み解除

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

センター寄せ

<div class="center"><img src="#" alt=""></div>

下に余白

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

<div class="padding-bottom: 10px;"><img src="#" alt=""></div>

カードスタイル

基本形：（例）記事ID3で設定

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

【盛岡市地域おこし協力隊が行く】仙台箪笥専門店・欅産業さん
【盛岡市地域おこし協力隊が行く】仙台箪笥専門店・欅産業さん

【活動の記録】 この記事は、私が盛岡市地域おこし協力隊として活動していた当時の記録です。現在とは情報が異なる場合がありますが、当時の熱量や、地域課題に向き合ったプロセスをありのまま伝えるため、あえて修 ...

続きを見る

<div class="st-cardstyle">[st-card id=3 label="" name="" bgcolor="" color="" readmore="on"]</div>

カードスタイルB

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

【盛岡市地域おこし協力隊が行く】仙台箪笥専門店・欅産業さん
【盛岡市地域おこし協力隊が行く】仙台箪笥専門店・欅産業さん

【活動の記録】 この記事は、私が盛岡市地域おこし協力隊として活動していた当時の記録です。現在とは情報が異なる場合がありますが、当時の熱量や、地域課題に向き合ったプロセスをありのまま伝えるため、あえて修 ...

続きを見る

<div class="st-cardstyleb">[st-card id=3 label="" name="" bgcolor="" color="" readmore="on"]</div>

ランキングボックス

「ランキング一覧背景色」と同じスペースを設定

width100%リセット

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

imgインラインボックス

display: inline;を指定します。

テーブル

横スクロール

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

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

中央配置

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

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

装飾なし

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

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

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

アイコンクラス名リスト

アイコンクラス名Unicodeイメージ
st-svg-amazon\f270
st-svg-angle-double-down\f103
st-svg-angle-double-right\f101
st-svg-angle-down\f107
st-svg-angle-right\f105
st-svg-angle-up\f106
st-svg-arrow\e900
st-svg-arrow-circle-o-right\f18e
st-svg-arrow-circle-right\f0a9
st-svg-arrow-right\f061
st-svg-bars\f0c9
st-svg-bell\f0f3
st-svg-bigginer_l\e910
st-svg-bigginer_r\e90f
st-svg-bold\f032
st-svg-bolt\f0e7
st-svg-book\f02d
st-svg-bookmark\f02e
st-svg-border\e91d
st-svg-bullhorn\f0a1
st-svg-calendar\f073
st-svg-camera\f030
st-svg-camera-retro\f080
st-svg-caret-right\f0da
st-svg-caret-square-o-right\f152
st-svg-check\f00c
st-svg-check_bold\e907
st-svg-check_bold_max\e901
st-svg-check_square_radius\e904
st-svg-check-circle\f058
st-svg-check-thin\e902
st-svg-chevron-circle-right\f138
st-svg-chevron-circle-right_\e937
st-svg-chevron-down\f078
st-svg-chevron-left\f053
st-svg-chevron-right\f054
st-svg-circle\f111
st-svg-circle-o\f10c
st-svg-circle-s\e91e
st-svg-clipboard\f0ea
st-svg-clock-o\f017
st-svg-close\e90e
st-svg-close_cut\e90d
st-svg-close_thin\e90c
st-svg-cloud-download\f0ed
st-svg-code\f121
st-svg-cog\f013
st-svg-cogs\f085
st-svg-columns\f0db
st-svg-comment\f075
st-svg-commenting\f27a
st-svg-comments\f086
st-svg-comments-o\f0e6
st-svg-copy\f0c5
st-svg-credit-card-alt\f283
st-svg-desktop\f108
st-svg-diamond\f219
st-svg-double-up\f102
st-svg-download\f019
st-svg-emotion-frown\e919
st-svg-emotion-meh\e91a
st-svg-emotion-smile\e91b
st-svg-envelope\f0e0
st-svg-envelope-o\f003
st-svg-eraser\f12d
st-svg-exchange\f0ec
st-svg-exclamation-circle\f06a
st-svg-exclamation-triangle\f071
st-svg-external-link\f08e
st-svg-eye\f06e
st-svg-eye-slash\f070
st-svg-facebook\f09a
st-svg-facebook-square\f082
st-svg-file-image-o\f1c5
st-svg-files-o\e918
st-svg-file-text\f15c
st-svg-file-text-o\f0f6
st-svg-file-zip-o\f1c6
st-svg-flag\f024
st-svg-folder\f07b
st-svg-folder-open-o\f115
st-svg-font\f031
st-svg-font-tag\e914
st-svg-footer\e924
st-svg-g-classic\e916
st-svg-g-code\e920
st-svg-g-column\e92b
st-svg-g-embed-2\e92c
st-svg-get-pocket\f265
st-svg-g-gallary\e931
st-svg-g-group\e92d
st-svg-g-heading\e906
st-svg-gift\f06b
st-svg-g-list\e92e
st-svg-google\f1a0
st-svg-g-paragraph\e92f
st-svg-g-photo\e932
st-svg-g-quote\e935
st-svg-g-table\e930
st-svg-hand-o-down\f0a7
st-svg-hand-o-right\f0a4
st-svg-hand-right\e974
st-svg-hateb\e911
st-svg-header\f1dc
st-svg-headphone\e938
st-svg-heart\f004
st-svg-h-gazou\e926
st-svg-home\f015
st-svg-h-top\e905
st-svg-h-under\e927
st-svg-inbox\f01c
st-svg-info-circle\f05a
st-svg-instagram\e903
st-svg-lightbulb\e915
st-svg-lightbulb-o\f0eb
st-svg-line\e912
st-svg-line-chart\f201
st-svg-link\f0c1
st-svg-list\f03a
st-svg-list-alt\f022
st-svg-list-ol\f0cb
st-svg-list-ul\f0ca
st-svg-lock\f023
st-svg-magic\f0d0
st-svg-main-area\e928
st-svg-map-marker\f041
st-svg-menu\e909
st-svg-menu_cut\e90a
st-svg-menu_thin\e90b
st-svg-minus-thin\e922
st-svg-mobile\f10b
st-svg-money\f0d6
st-svg-newspaper-o\f1ea
st-svg-oukan\e908
st-svg-pages\e96d
st-svg-palette\e925
st-svg-paperclip\f0c6
st-svg-paper-plane\f1d8
st-svg-pdf-o\f1c1
st-svg-pencil\f040
st-svg-pencil-square\f14b
st-svg-pencil-square-b\e973
st-svg-pencil-square-o\f044
st-svg-percent\f295
st-svg-picture-o\f03e
st-svg-pinterest-p\f231
st-svg-plug\f1e6
st-svg-plus\f067
st-svg-plus-circle\f055
st-svg-plus-thin\e923
st-svg-print\f02f
st-svg-product-hunt\f288
st-svg-qr-code\e933
st-svg-question-circle\f059
st-svg-quote-left\f10d
st-svg-quote-right\f10e
st-svg-refresh\f021
st-svg-relation\e917
st-svg-reply\f112
st-svg-rss\f09e
st-svg-rss-square\f143
st-svg-search\f002
st-svg-search_s\e91f
st-svg-search_thin\e948
st-svg-search_thin_s\e921
st-svg-search-minus\f010
st-svg-search-plus\f00e
st-svg-share-alt\f1e0
st-svg-share-square\f14d
st-svg-share-square-o\f045
st-svg-shopping-cart\f217
st-svg-shortcode\e99a
st-svg-sidebar\e929
st-svg-sign-in\f090
st-svg-sign-out\f08b
st-svg-slide-show\e92a
st-svg-star\f005
st-svg-star-half-o\f123
st-svg-star-o\f006
st-svg-sticky-note-o\f24a
st-svg-tablet\f10a
st-svg-tachometer\f0e4
st-svg-tag\f02b
st-svg-tags\f02c
st-svg-terminal\f120
st-svg-th\f00a
st-svg-th-large\f009
st-svg-thumbs-down\f165
st-svg-thumbs-o-down\f088
st-svg-thumbs-o-up\f087
st-svg-thumbs-up\f164
st-svg-thumb-tack\f08d
st-svg-times\f00d
st-svg-toc\e91c
st-svg-toggle-on\f205
st-svg-trophy\f091
st-svg-twitter\f099
st-svg-txt\e98c
st-svg-unlock-alt\f13e
st-svg-url-copy\e913
st-svg-user\f007
st-svg-user-circle\f2bd
st-svg-vidicon\e934
st-svg-wordpress\f19a
st-svg-youtube-play\f16a

関連ウェブサイト

AFFINGER6EX（アップグレード）版の記事作成パーツ（タグ・テキストパーツ編）
AFFINGER6EX（アップグレード）版の記事作成パーツ（タグ・テキストパーツ編）

デザイン クリップメモ ショートコードで作成します。自分でカスタマイズすることも可能です。 メモ ソースコード（クリックして下さい） [st-cmemo webicon="st-svg-file-te ...

続きを見る
AFFINGER6EX（アップグレード）版の記事作成パーツ（ボックスデザイン編）
AFFINGER6EX（アップグレード）版の記事作成パーツ（ボックスデザイン編）

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

続きを見る
AFFINGER6EX（アップグレード）版の記事作成パーツ（カスタムボタン編）
AFFINGER6EX（アップグレード）版の記事作成パーツ（カスタムボタン編）

カスタムボタン（ノーマル） 自由なボタンを作成します。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。 基本 ソースコード（クリックして下さい） [st-mybutton url="#" ...

続きを見る
AFFINGER6EX（アップグレード）版の記事作成パーツ（会話ふきだし、ランキング、レイアウト編）
AFFINGER6EX（アップグレード）版の記事作成パーツ（会話ふきだし、ランキング、レイアウト編）

会話ふきだし 「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です。（※「 r 」で反対向きになります） ソースコード（クリックして下さい） [st-kaiwa1]これはダミーの ...

続きを見る
【公式】STINGER STORE
AFFINGER6EX（アップグレード）版
https://on-store.net/ex-upgrade/
今ならお得なキャンペーン中 12,000円 → 10,000円 AFFINGER6EXはAFFING ...

おすすめ記事一覧

【岩手県矢巾町】矢巾発・ちゃぶ台返し世界大会!?【発想で大勝利】 1
【岩手県矢巾町】矢巾発・ちゃぶ台返し世界大会!?【発想で大勝利】

岩手県矢巾町で「世界大会」!? 昨日、盛岡市のお隣・矢巾町にあるショッピングモールアルコで「第13回ちゃぶ台返し世界大会⁉︎」が開催されました。 ショッピングモールアルコの「やはば百笑倶楽部」さんが、 ...

【盛岡市地域おこし協力隊が行く】仙台箪笥専門店・欅産業さん 2
【盛岡市地域おこし協力隊が行く】仙台箪笥専門店・欅産業さん

【活動の記録】 この記事は、私が盛岡市地域おこし協力隊として活動していた当時の記録です。現在とは情報が異なる場合がありますが、当時の熱量や、地域課題に向き合ったプロセスをありのまま伝えるため、あえて修 ...

盛岡市地域おこし協力隊と学ぶ楽しい盛岡弁講座（基本編）【随時追加募集中！】 3
盛岡市地域おこし協力隊と学ぶ楽しい盛岡弁講座（基本編）【随時追加募集中！】

盛岡市民及び盛岡広域出身者の皆様へ 本ページをご覧の盛岡市民及び盛岡広域出身者の皆様、内容修正等のご指摘、これも追加してほしいという希望があれば、お問い合わせフォームからお寄せ下さい。適宜修正・追記し ...

【盛岡市地域おこし協力隊が贈る】岩手山と北上川の四季折々の風景写真【随時更新中】 4
【盛岡市地域おこし協力隊が贈る】岩手山と北上川の四季折々の風景写真【随時更新中】

岩手山と北上川 旭橋から見た風景 2018年6月撮影 2018年6月撮影？ 2019年3月撮影 2019年4月撮影 2020年6月撮影 2023年7月撮影 夕顔瀬橋から見た風景 2018年4月撮影 2 ...

「京都ブランド」の真価｜世界で通用する企業文化の秘密を探る 5
「京都ブランド」の真価｜世界で通用する企業文化の秘密を探る

今日のお題：「京都ブランド」の真価｜世界で通用する企業文化の秘密を探る はじめに 古都・京都といえば、歴史ある寺社仏閣や美しい伝統文化を思い浮かべる方が多いのではないでしょうか。 しかし、実は京都は、 ...

-岩手盛岡IT温泉
-,