WordPressテーマの良く使うショートコードを実際のレイアウトを見ながら、コピペできるようにしました。
ショートコードの先頭文字「[」はエスケープするため「@」に変換しています。
貼り付けた後「[」に直してください。
目次@toc]
この記事はこんな方におすすめ
おすすめ黒板
- おすすめその1の方
- おすすめその2の方
<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>おすすめその1の方</li> <li>おすすめその2の方</li> </ol> </div> @
チェックリスト(番号なし)
チェックリスト(番号なし)
- ダミーテキスト
- ダミーテキスト
@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] 手順1本文 @st-step step_no="2"]3分待つ@/st-step] 手順2本文 @
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文字)
これはダミーのテキストです
@st-midasibox title="見出し(全角15文字)" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"] これはダミーのテキストです @/st-midasibox] @
見出し(全角15文字)
これはタイトル幅を100%にしたデザインです
@st-midasibox-intitle title="見出し(全角15文字)" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"] これはタイトル幅を100%にしたデザインです @/st-midasibox-intitle] @