AFFINGER5(アフィンガー)で使える文字装飾【コピペOK】

アフィンガーテーマのみなさんが便利に使えるように、ショートコード(文字装飾)をまとめてみました。

テキストエディタに、下に書いてあるコードをコピペをするだけで使えるようにしました。
なお、明らかに不要なショートコードは載せていません。

アフィンガーショートコード : テキストパーツ

クリップメモ

メモ

[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」の数を調整すればできます。

以上で、アフィンガーショートコード紹介は終わりです。たくさん使ってね！