アフィンガーテーマのみなさんが便利に使えるように、ショートコード(文字装飾)をまとめてみました。
テキストエディタに、下に書いてあるコードをコピペをするだけで使えるようにしました。
なお、明らかに不要なショートコードは載せていません。
アフィンガーショートコード : テキストパーツ
クリップメモ
メモ
クリップメモ
[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]ここにテキストを入力
[/st-cmemo]
はてな
はてな
[st-cmemo fontawesome="fa-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" bordercolor="" borderwidth="" iconsize=""]ここにテキストを入力
[/st-cmemo]
注意
注意文
[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" bordercolor="" borderwidth="" iconsize=""]ここにテキストを入力
[/st-cmemo]
ポイント
ポイント
[st-cmemo fontawesome="fa-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" bordercolor="" borderwidth="" iconsize=""]ここにテキストを入力
[/st-cmemo]
初心者
初心者
[st-cmemo fontawesome="st-svg-bigginer_l" iconcolor="#9CCC65" bgcolor="#F1F8E9" color="#000000" bordercolor="" borderwidth="" iconsize=""]ここにテキストを入力
[/st-cmemo]
ミニ吹き出し
グレー吹き出し
基本(グレー)
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0" radius="" position="" add_boxstyle=""]ここにテキストを入力
[/st-minihukidashi]
オレンジ吹き出し
オレンジ
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0" radius="" position="" add_boxstyle=""]ここにテキストを入力
[/st-minihukidashi]
ブルー吹き出し
ブルー
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#4FC3F7" color="#fff" margin="0 0 20px 0" radius="" position="" add_boxstyle=""]ここにテキストを入力
[/st-minihukidashi]
複合(クリップメモ+ミニ吹き出しがある)
自由なメモ
自由なメモ
ここにテキストを入力
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#FFC107" color="#fff" margin="0 0 0 -6px"]自由なメモ[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-file-text-o" iconcolor="#FFC107" bgcolor="#FFFDE7" color="#000000" iconsize="200"]ここにテキストを入力
[/st-cmemo]
ここがポイント
ココがポイント
ここにテキストを入力
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがポイント[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-hand-o-right" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]ここにテキストを入力[/st-cmemo]
ここに注意
ココに注意
ここにテキストを入力
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#ef5350" color="#fff" margin="0 0 0 -6px"]ココに注意[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="200"]ここにテキストを入力[/st-cmemo]
ステップ
step
1ここにテキストを入力
step
2ここにテキストを入力
step
3ここにテキストを入力
[st-step step_no="1"]ここにテキストを入力[/st-step]
[st-step step_no="2"]ここにテキストを入力[/st-step]
[st-step step_no="3"]ここにテキストを入力[/st-step]
ポイント
ここにテキストを入力
[st-point fontsize="" fontweight="bold" bordercolor=""]ここにテキストを入力
[/st-point]
アフィンガーショートコード : ボックスデザイン
バーナー風ボックス
タイトル
ここにテキストを入力
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]ここにテキストを入力
[/st-flexbox]
マイボックス
当サイトでは、点線枠に設定しています。通常ですと、つながっている線が表示されますので、ご安心ください。
ポイント
ポイント
ここにテキストを入力
[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]ここにテキストを入力
[/st-mybox]
メモ
メモ
ここにテキストを入力
[st-mybox title="メモ" fontawesome="fa-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]
枠のみ
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]ここにテキストを入力
[/st-mybox]
注意
注意ポイント
ここにテキストを入力
[st-mybox title="注意ポイント" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]ここにテキストを入力
[/st-mybox]
マイボックス+CSSクラス (枠の中に見出しがある)
メモ
メモ
ここにテキストを入力
[st-mybox title="メモ" fontawesome="fa-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="必要なモノ" fontawesome="fa-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="チェックリスト" fontawesome="fa-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="簡単な流れ" fontawesome="fa-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]
見出し付きフリーボックス(動くアイコンがある)
メモ
メモ
ここにテキストを入力
[st-midasibox title="メモ" fontawesome="fa-file-text-o faa-float animated" bordercolor="#757575" color="" bgcolor="#FAFAFA" borderwidth="" borderradius="5" titleweight="bold"]ここにテキストを入力
[/st-midasibox]
はてな
はてな
ここにテキストを入力
[st-midasibox title="はてな" fontawesome="fa-question-circle faa-ring animated" bordercolor="#03A9F4" color="#fff" bgcolor="#E1F5FE" borderwidth="" borderradius="5" titleweight="bold"]ここにテキストを入力
[/st-midasibox]
注意
注意
ここにテキストを入力
[st-midasibox title="注意" fontawesome="fa-exclamation-circle faa-flash animated" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]ここにテキストを入力
[/st-midasibox]
ポイント
ポイント
ここにテキストを入力
[st-midasibox title="ポイント" fontawesome="fa-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold"]ここにテキストを入力
[/st-midasibox]
こんな人におすすめ
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
<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>
</ul>
</div>
アフィンガーショートコード : カスタムボタン
ノーマル
黄色ボタン
[st-mybutton url="移動先URL" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#FFB300" ref="on"]
赤ボタン
[st-mybutton url="移動先URL" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on"]
上記のボタン以外にも、グリーンとブルーのもあります。
お問い合わせボタン
[st-mybutton url="移動先URL" title="お問合わせ" rel="" fontawesome="fa-envelope" target="" color="#fff" bgcolor="#03A9F4" bgcolor_top="#14b4fc" bordercolor="#039BE5" borderwidth="1" borderradius="5" fontsize="" fontweight="" width="90" fontawesome_after="" shadow="#039BE5" ref="on"]
MCボタン
黄色ボタン
[st-mcbutton url="移動先URL" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#FFB300" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="テキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]
赤ボタン
[st-mcbutton url="移動先URL" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#c62828" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="上に表示されるテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]
アフィンガーショートコード : 会話吹き出し


こちらの会話吹き出しは、自分で設定しないと使えません。
なお、会話吹き出しの設定方法については、アフィンガー吹き出しアイコン設定方法【AFFINGER5】にて解説しています。初心者でわからない方ぜひ参考にしてみてください。
アフィンガーショートコード : 私がいつも使う装飾
ここからは、私が使うショートコードの紹介をしていきます。
太字
アフィンガーショートコード
<span class="huto">文字</span>
黄マーカー
アフィンガーショートコード
<span class="ymarker">文字</span>
画像挿入
<img src="画像URL" width="100%" height="100%" alt="画像タイトル">
画像に枠線
上記のように画像に枠線がつきます。
<span class="photoline">画像挿入</span>
内部リンク
自分のサイトの別の記事に飛ばしたいとき使ってください。
<a href="リンク先URL" title="リンク先タイトル">表示テキスト</a>
外部リンク
他のサイトに飛ばしたいとき使ってください。
<a href="リンク先URL" target="_blank" rel="nofollow noopener">表示テキスト</a>
ボックス
僕は、基本的にこの三種類のボックスしか使いません。
グレーボックス
<div class="graybox">
ここにテキストを入力
</div>
黄色ボックス
<div class="yellowbox">
ここにテキストを入力
</div>
ナンバーボックス
- ここにテキストを入力
- ここにテキストを入力
- ここにテキストを入力
<div class="maruno">
<ol>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ol>
</div>
ショートコードの<li></li>の数を増やせば、番号の数も増やせます。
チェックマーク
チェックマーク
<i class="fa fa-check" style="color: #5ba9f7;"></i><span class="huto" style="font-size: 120%;">文字</span>
スペーサーコード
文字の行間を変えることができます。
<div class="wp-block-spacer" style="height: 25px;" aria-hidden="true"></div>
スペースの大きさは「px」の数を調整すればできます。
以上で、アフィンガーショートコード紹介は終わりです。たくさん使ってね!