【超便利】WordPressテーマ(Affinger)ショートコード貼り付けページ【初心者】【作業用】

WordPressテーマの良く使うショートコードを実際のレイアウトを見ながら、コピペできるようにしました。
ショートコードの先頭文字「[」はエスケープするため「＠」に変換しています。
貼り付けた後「[」に直してください。

目次@toc]

Contents

1 おすすめ黒板
2 チェックリスト（番号なし）
3 簡単な流れ（番号あり）
4 ボックス
5 マーカー
6 アイコン＆背景ありボックス
7 ステップ
8 箇条書きボックス
9 見出し

この記事はこんな方におすすめ

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

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

@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"]
ダミーテキスト
ダミーテキスト
@/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>
</ul>
@/st-mybox]
@

ボックス

薄赤ボックスです yellow gray もあるよ

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

マーカー

これは黄マーカー（細）-s外すと太　r gもあるよ。

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

アイコン＆背景ありボックス

（メモ）ここから背景色ありアイコンです

@st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]
（メモ）ここから背景色ありアイコンです
@/st-cmemo]
@

（外部リンク）ダミーテキストです

@st-cmemo fontawesome="fa-external-link" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]
（外部リンク）ダミーテキストです
@/st-cmemo]
@

（ブックマーク）ダミーテキストです

@st-cmemo fontawesome="fa-bookmark" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]
（ブックマーク）ダミーテキストです
@/st-cmemo]
@

（おしらせ）ダミーテキストです

@st-cmemo fontawesome="fa-bullhorn" iconcolor="#FFEB3B" bgcolor="#FFFDE7" color="#000000" iconsize="100"]
（おしらせ）ダミーテキストです
@/st-cmemo]
@

（はてな）これはダミーです

@st-cmemo fontawesome="fa-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="100"]
（はてな）これはダミーです
@/st-cmemo]
@

（コメント）これはダミーです

@st-cmemo fontawesome="fa-comments" iconcolor="#F48FB1" bgcolor="#FCE4EC" color="#000000" iconsize="100"]
（コメント）これはダミーです
@/st-cmemo]
@

（コード）これはダミーです

@st-cmemo fontawesome="fa-code" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="150"]
（コード）これはダミーです
@/st-cmemo]
@

（ポイント）これはダミーです

@st-cmemo fontawesome="fa-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" iconsize="100"]
（ポイント）これはダミーです
@/st-cmemo]
@

（ユーザー）これはダミーです

@st-cmemo fontawesome="fa-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="150"]
（ユーザー）これはダミーです
@/st-cmemo]
@

（初心者）これはダミーです

@st-cmemo fontawesome="st-svg-bigginer_l" iconcolor="#9CCC65" bgcolor="#F1F8E9" color="#000000" iconsize="100"]
（初心者）これはダミーです
@/st-cmemo]
@

（注意文グレー）これはダミーです

@st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]
（注意文グレー）これはダミーです
@/st-cmemo]
@

（注意文）ここまで背景色ありアイコンです

@st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="100"]
（注意文）ここまで背景色ありアイコンです
@/st-cmemo]
@

ステップ

「購入の流れ」などステップを使用したい場合のデザインに便利です。

step
1お湯を入れる

@st-step step_no="1"]お湯を入れる@/st-step]
手順１本文
@st-step step_no="2"]3分待つ@/st-step]
手順２本文
@

step
23分待つ

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

箇条書きボックス

ポイント

@st-mybox title="ポイント" fontawesome="fa-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold"]
ダミーです
@/st-mybox]
@

注意ポイント

@st-mybox title="注意ポイント" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold"]
ダミーです
@/st-mybox]
@

はてな

@st-mybox title="はてな" fontawesome="fa-question-circle" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold"]
ダミーです
@/st-mybox]
@

見出し

見出し（全角15文字）