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

25/03/26 26/04/17

きのぷー

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

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

早速行ってみましょう！

ボックスデザイン

バナー風ボックス

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

基本

タイトル

たかみかんブログ

ソースコード（クリックして下さい）

[st-flexbox url="" webicon="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="10"]ここにテキストを入力[/st-flexbox]

サンプル例

詳しい御案内はこちら

料金プランやサービスについて

泣ける！漫画ランキング

本屋さんが選んだ泣けるマンガランキング1位は？

今すぐCHECK

マイボックス

様々なボックスデザインが作れます。自分でカスタマイズすることも可能です。

ポイント

（基本デザイン）

ソースコード（クリックして下さい）

[st-mybox title="ポイント" webicon="st-svg-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]（基本デザイン）ここにテキストを入力[/st-mybox]

私、あの頃何かに追われているような感じで。全然余裕がなくて、意地ばかり張って。振り返ってみると私、みんなに助けられてばっかりだったなぁ・・・って

ソースコード（クリックして下さい）

[st-mybox title="" webicon="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold"]（四角い枠のみ）ここにテキストを入力[/st-mybox]

時間をかけてお互いの事を知って、お互いの事を受け入れあってここまで来られた。それが一番、私たちの特徴なんじゃないかな。

ソースコード（クリックして下さい）

[st-mybox title="" webicon="" color="#757575" bordercolor="#BDBDBD" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold"]（四隅にまるみ）ここにテキストを入力[/st-mybox]

参考

タイトルの「参考」の文字とアイコンは変更可

ソースコード（クリックして下さい）

[st-mybox title="参考" webicon="st-svg-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]（参考）ここにテキストを入力[/st-mybox]

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

見出し部分がボックスの中に入ってるデザイン

メモ

こんな気持ち、初めてなんです。やってよかったって、本気で思えたんです。今はこの気持ちを信じたい。このまま誰も見向きもしてくれないかもしれない。応援なんて全然もらえないかもしれない。でも、一生懸命頑張って、私たちがとにかく頑張って届けたい。いま、私たちがここにいる、この思いを！

ソースコード（クリックして下さい）

[st-mybox title="メモ" webicon="st-svg-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]（メモ）ここにテキストを入力[/st-mybox]

メモ

タイトルにアンダーラインが付いたもの

ソースコード（クリックして下さい）

[st-mybox title="メモ" webicon="st-svg-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]（メモ2）ここにテキストを入力[/st-mybox]

必要なモノ

上のメモボックスに
リストを入れたパターンです
此方は箇条書きタイプ

ソースコード（クリックして下さい）

[st-mybox title="必要なモノ" webicon="st-svg-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-circle" margin="25px 0 25px 0"] <ul> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> [/st-mybox]

チェックリスト

ダミーテキスト
ダミーテキスト
ダミーテキスト

ソースコード（クリックして下さい）

[st-mybox title="チェックリスト" webicon="st-svg-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-check" margin="25px 0 25px 0"] <ul> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> [/st-mybox]

簡単な流れ

ダミーテキスト
ダミーテキスト
ダミーテキスト

ソースコード（クリックして下さい）

[st-mybox title="簡単な流れ" webicon="st-svg-list-ol" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-no st-list-border" margin="25px 0 25px 0"] <ul> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> [/st-mybox]

タイトル付きフリーボックス

見出し（タイトル）は全角15文字以内

かしこい　かわいい　エリーチカ

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

ソースコード（クリックして下さい）

[st-midasibox title="見出し（全角15文字）" webicon="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]ここにテキストを入力[/st-midasibox]

かしこい　かわいい　エリーチカ

これはタイトル幅を100%にしたデザインです

ソースコード（クリックして下さい）

[st-midasibox-intitle title="見出し（全角15文字）" webicon="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]ここにテキストを入力[/st-midasibox-intitle]

メモボックス

メモ

ここにテキストを入力

ソースコード（クリックして下さい）

<div class="st-memobox2"> <p class="st-memobox-title">メモ</p> ここにテキストを入力 </div>

スライドボックス

+ クリックして下さい

んごおおー！

ソースコード（クリックして下さい）

[st-slidebox text="+ クリックして下さい" bgcolor="" color="#1a1a1a" margin_bottom="20"] クリックで開かれる内容です [/st-slidebox]

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

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

ソースコード（クリックして下さい）

[st-square-checkbox bgcolor="" bordercolor="" fontweight="" borderwidth="3"] <div> <ul> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> </div> [/st-square-checkbox]

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

丸形タイプ（ｖ）基本形

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

こんな方におすすめ

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

ソースコード（クリックして下さい）

<div class="st-blackboard"> <p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p> <ul class="st-blackboard-list st-no-ck-off"> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> </div>

丸形タイプ（ｖ）アイコンなし

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

本日のメニュー

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

ソースコード（クリックして下さい）

<div class="st-blackboard"> <p class="st-blackboard-title-box"><span class="st-blackboard-title">本日のメニュー</span></p> <ul class="st-blackboard-list st-no-ck"> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> </div>

丸形タイプ（ｖ）番号付きリストに変更

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

今日のやることリスト

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

ソースコード（クリックして下さい）

<div class="st-blackboard"> <p class="st-blackboard-title-box"><span class="st-blackboard-title">今日のやることリスト</span></p> <ol class="st-blackboard-list st-no-ck-off"> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ol> </div>

こんな方におすすめ（角形タイプ [v]）

角型チェックボックス仕様

こんな方におすすめ

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

ソースコード（クリックして下さい）

<div class="st-blackboard square-checkbox"> <p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p> <ul class="st-blackboard-list st-no-ck-off"> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> </div>

ガイドマップメニュー

AFFINGER EX では機能しないっぽいです

ソースコード（クリックして下さい）

<div class="st-link-guide st-link-guide-post"> <ul class="st-link-guide-menu"> <li>これはダミーのテキストです</li> <li>これはダミーのテキストです</li> <li>これはダミーのテキストです</li> </ul> </div>

pre

 html
<p></p>

[st-pre myclass="" text="html"] <p></p> [/st-pre]

 command
<p></p>

[st-pre myclass="st-terminal" text="command"] <p></p> [/st-pre]

 shortcode
<p></p>

[st-pre-sc myclass="" text="shortcode" fontawesome=""] <p></p> [/st-pre-sc]

関連ウェブサイト

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

テキスト装飾太字　<span class="huto">たかみかんブログ</span> 赤字　<span class="hutoaka">たかみかんブログ< ...

続きを見る

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

【公式】STINGER STORE

AFFINGER6EX（アップグレード）版

https://on-store.net/ex-upgrade/

今ならお得なキャンペーン中 12,000円 → 10,000円 AFFINGER6EXはAFFING ...

画像生成が“突然変異”した！ChatGPTで子猫画像を作ってわかったこと

今日のお題：画像生成が“突然変異”した！ChatGPTで子猫画像を作ってわかったこと突然、猫の構図が変わった！？今回の生成テーマは「子猫が密集して寝ているリアル写真風の画像」。最初は理想に近いイメージで、毛色や品種のバランスを調整しながら進めていましたが…… 子猫が密着している画像のイメージを修正したのにいきなり「富士山を背景に、トマトや干物のそばに並ぶ子猫たち」という、完全に別ジャンルの画像が登場。「いや、毛色バランス調整したいだけやってんけど！💦」困惑しました。なぜ突然変異が起きるのか ...

岩手盛岡IT温泉

【2025年7月最新】ChatGPT画像生成ルールが激変！「720時間待ち」は過去の話、新方式「ローリングウィンドウ」を徹底解説

今日のお題：【2025年7月最新】ChatGPT画像生成ルールが激変！「720時間待ち」は過去の話、新方式「ローリングウィンドウ」を徹底解説はじめに 2025年7月、多くのChatGPTユーザーが画像生成機能（DALL-E 3）を使おうとして、戸惑いを隠せませんでした。「昨日まで普通に画像を作れたのに、今日は全く生成できない…」「『720時間後にもう一度お試しください』と表示されたけど、これって1ヶ月待ちってこと？」「1日5枚までのルールはどこに行ったの？」このような混乱の声がSNSやコミュニテ ...

岩手盛岡IT温泉

【解決策あり】Geminiの画像生成が低画質に？最近の品質低下の噂と原因を初心者向けに徹底解説！

今日のお題：Geminiの画像生成が低画質に？最近の品質低下の噂と原因を初心者向けに徹底解説！はじめに「あれ、なんだか今日のGemini、画質が悪くない…？」最新の「Gemini 2.5 Pro」を使っているはずなのに、なぜかぼやけたような、解像度の低い画像が生成されてガッカリ…。毎日使っている方の中には、「またこの画質か…」と、ため息をついている方もいらっしゃるのではないでしょうか。ご安心ください。その現象は、あなただけに起きているわけではありません。そして、いくつかの原因と対処法が考えら ...

岩手盛岡IT温泉

【Gemini画像生成】プロンプト無視で低画質？不具合か、それとも…原因と今すぐできる対処法

今日のお題：Gemini画像生成｜プロンプト無視で低画質？不具合か、それとも…原因と今すぐできる対処法はじめに「今日のGemini、どうしちゃったの…？」いつものように期待を込めてGeminiに画像生成をリクエストしたら、普段と違う挙動に遭遇して戸惑ったことはありませんか？出てきたのはプロンプトを完全に無視した低品質な画像なぜか爆速で画像が出てくるしかも、チャット欄には見慣れない「Generating image without any prompt enhancement.」の文字…。 ...

岩手盛岡IT温泉

Geminiは「ピンク髪」のキャラクターが好み？GeminiとDALL-Eの違いから見える画像生成AIの個性

今日のお題：Geminiは「ピンク髪」のキャラクターを作りたがる？GeminiとDALL-Eの違いから見える画像生成AIの個性はじめに：AIが生み出す「ピンク髪」の謎「かわいい女の子のキャラクターを描いて」最近、目覚ましい進化を遂げている画像生成AIに、そんな風にお願いしたことはありませんか？私も仕事や趣味でGemini（GoogleのAI）に多くのキャラクター生成をリクエストしているのですが、ふとある傾向に気づきました。髪の色を特に指定しないと、ピンク色の髪のキャラクターが生成される確率が高い ...

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

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

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

ボックスデザイン

バナー風ボックス

基本

サンプル例

マイボックス

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

タイトル付きフリーボックス

メモボックス

スライドボックス

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

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

丸形タイプ（ｖ）基本形

丸形タイプ（ｖ）アイコンなし

丸形タイプ（ｖ）番号付きリストに変更

こんな方におすすめ（角形タイプ [v]）

ガイドマップメニュー

pre

関連ウェブサイト

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

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

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

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

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

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

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

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

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

ChatGPTでよく見る「You’re generating images too quickly…」の意味・原因・対策を徹底解説｜画像生成のレート制限ガイド

起業初心者は「検討します」を捨てろ！？小規模事業者が勝つための「即行動・大量実践」マインドセット

齧歯目の子ども限定！寝転ぶ姿が愛しすぎる20の癒しプロンプト集

画像生成が“突然変異”した！ChatGPTで子猫画像を作ってわかったこと

【2025年7月最新】ChatGPT画像生成ルールが激変！「720時間待ち」は過去の話、新方式「ローリングウィンドウ」を徹底解説

たかみかんブログ