カテゴリー: カテゴリ1

テスト

テーマで用意されているスタイルやショートコードによるタグなどのデザイン確認用ページです。

スタイル

テキスト

これは太字です。

これは赤字です。

これは大文字です。

これは小文字です

これはドット線です。

これは参照リンクです

参考これは参考マークです（例：参考という文字を記入してから使用）

必須これは必須マークです（例：必須という文字を記入してから使用）

これは打消しです。

これはcodeなどに使用します

アニメーション

(^ _ ^)45°揺れ

(^ _ ^)ベル揺れ

(^ _ ^)横揺れ

(^ _ ^)縦揺れ

(^ _ ^)点滅

(^ _ ^)バウンド

(^ _ ^)回転

(^ _ ^)ふわふわ

(^ _ ^)大小

(^ _ ^)シェイク

(^ _ ^)シェイク（強）

(^ _ ^)拡大（ゆれ）

(^ _ ^)過ぎる

(^ _ ^)戻る

(^ _ ^)バースト

アイコン

アイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます。※通常エディタ上では表示されません

これは「はてな」マークです

これは「注意」マークです

これは「人物」マークです

これは「チェック」マークです

これは「メモ」マークです

これは「王冠」マークです

これは「初心者」マークです

見出し

キャッチコピー

こんな風にキャッチコピー見出しタグのテキストなど

見出しタグのテキストなどこんな風にキャッチコピー

記事タイトル

記事タイトル、h2〜h5風はPタグに見出しタグと同じデザインを設定します

まとめ

カウント

カウントは設定したテキストや見出し（hタグ）などに自動で番号を振付けます。手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。

クイックボタンの「CT」でも付与できます。

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

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

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

これは「まとめ」用の見出しです

通常の見出しタグとは別に「まとめ」用のデザインをカスタマイザーの「各テキストとhタグ（見出し）」で設定できます

ランキング(AFFINGER又はEX版のみ）

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

マーカー

これは黄マーカーです。

これは黄マーカー（細）です。

これは赤マーカーです。

これは赤マーカー（細）です。

これは青マーカーです。

これは青マーカー（細）です。

これは鼠マーカーです。

これは鼠マーカー（細）です。

写真

写真枠

写真に「枠線」を付与します。境界が曖昧な写真などにとくに有効です（クイックボタン「写真枠」でも使用できます）

キャプションあり

ポラロイド風

写真をポラロイド風にデザインします

ボックス

ワイド

幅一杯の背景を設定するEX限定デザインです

ショートコードタグでは背景色や画像も設定できます

[st-wide-background myclass=”” backgroud_image=”” bgcolor=”#FFF9C4″ align=””]

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

[/st-wide-background]

[st-wide-background myclass=”” backgroud_image=”” bgcolor=”#F8BBD0″ align=”l”]

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

[/st-wide-background]

[st-wide-background myclass=”” backgroud_image=”” bgcolor=”#B3E5FC” align=”r”]

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

[/st-wide-background]

リスト

ドット下線（リスト）

マル（リスト）

マル+ドット下線（リスト）

簡易チェック（リスト）

簡易チェック+ドット下線（リスト）

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

ulタグの番号なしリストを囲むとチェックボックス風のデザインになります。

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

ulタグの番号なしリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「チェック（ulタグ）」を適応してから「番号なしリスト」を適応すると便利です。

※カスタマイザーの「オプション」でカラー変更が可能です

ナンバリング（番号付きリスト）

olタグの番号付きリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「ナンバリング（olタグ）」を適応してから「番号付きリスト」を適応すると便利です。

※カスタマイザーの「オプション」でカラー変更が可能です

ナンバリング四角（リスト）

ナンバリング四角+ドット下線（リスト）

レイアウト

回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除します

センター寄せ

要素をセンター寄せにします。

下に余白

要素の下に「10px」の余白を付けます

カードスタイル

※記事ID2で設定されています（ない場合は適宜変更して下さい）

ブログカードに別のデザインを設定します（全サイズで縦型）

カードスタイルB

ブログカードに別のデザインを設定します（PC、タブレット閲覧時のみ縦型）

ランキングボックス(AFFINGER又はEX版のみ）

「ランキング一覧背景色」と同じスペースを設定します

width100%リセット

max-width: initial; display: inline;を設定してmax-widthをリセットします。

imgインラインボックス

display: inline;を指定します。

テーブル

テーブル（表の作成）には「TinyMCE Advanced」プラグインが便利です。

横スクロール

スマートフォン閲覧時など横幅がはみ出る場合にtableタグを<div class=”scroll-box”></div>で囲むことで横スクロールに対応させます。

中央配置

table内のテキストを上下左右の中央に配置します。

装飾なし

テーマで用意されたデフォルトデザインを解除します。

※設定が上手くできない（tableタグを囲めない）場合は「テキストモード」での作業をお勧めします

タグ

デザイン

クリップメモ

ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

[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]

ミニふきだし

ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

[st-minihukidashi bgcolor=”#f3f3f3″ color=”#000000″ margin=”0 0 20px 0″]（基本）これはダミーです[/st-minihukidashi]

[st-minihukidashi bgcolor=”#FFB74D” color=”#fff” margin=”0 0 20px 0″]（オレンジ）これはダミーです[/st-minihukidashi]

[st-minihukidashi bgcolor=”#F48FB1″ color=”#fff” margin=”0 0 20px 0″]（ピンク）これはダミーです[/st-minihukidashi]

[st-minihukidashi bgcolor=”#4FC3F7″ color=”#fff” margin=”0 0 20px 0″]（ブルー）これはダミーです[/st-minihukidashi]

[st-minihukidashi bgcolor=”#7CB342″ color=”#fff” margin=”0 0 20px 0″]（グリーン）これはダミーです[/st-minihukidashi]

[st-minihukidashi bgcolor=”#f44336″ color=”#fff” margin=”0 0 20px 0″]（レッド）これはダミーです[/st-minihukidashi]

複合

[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#FFC107″ bgcolor=”#FFFDE7″ color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

[st-cmemo fontawesome=”fa-hand-o-right” iconcolor=”#3F51B5″ bgcolor=”#E8EAF6″ color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

[st-cmemo fontawesome=”fa-thumbs-o-up” iconcolor=”#3F51B5″ bgcolor=”#E8EAF6″ color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

[st-cmemo fontawesome=”fa-thumbs-o-down” iconcolor=”#3F51B5″ bgcolor=”#E8EAF6″ color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

[st-cmemo fontawesome=”fa-search” iconcolor=”#66BB6A” bgcolor=”#E8F5E9″ color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

[st-cmemo fontawesome=”fa-user” iconcolor=”#F06292″ bgcolor=”#FCE4EC” color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

[st-cmemo fontawesome=”fa-user” iconcolor=”#42A5F5″ bgcolor=”#E3F2FD” color=”#000000″ iconsize=”200″]

これはダミーです

[/st-cmemo]

複合（アイコンなし）

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#FFFDE7″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8EAF6″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8EAF6″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8EAF6″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#ffebee” borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8F5E9″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E1F5FE” borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

これはダミーです

[/st-mybox]

まるもじ（小）

丸い背景の文字を作成します。見出しタグの前などに使用するとポイントになりお薦めです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

[st-marumozi fontawesome=”” bgcolor=”#f3f3f3″ color=”#000000″ radius=”30″ margin=”0 10px 10px 0″]（基本）これはダミーです[/st-marumozi]

[st-marumozi fontawesome=”” bgcolor=”#FFB74D” color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（オレンジ）これはダミーです[/st-marumozi]

[st-marumozi fontawesome=”” bgcolor=”#F48FB1″ color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（ピンク）これはダミーです[/st-marumozi]

[st-marumozi fontawesome=”” bgcolor=”#4FC3F7″ color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（ブルー）これはダミーです[/st-marumozi]

[st-marumozi fontawesome=”fa-exclamation-circle” bgcolor=”#ffebee” color=”#ef5350″ radius=”30″ margin=”0 10px 10px 0″]（うすい注意）これはダミーです[/st-marumozi]

[st-marumozi fontawesome=”fa-exclamation-circle” bgcolor=”#ef5350″ color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（注意）これはダミーです[/st-marumozi]

[st-marumozi fontawesome=”” bgcolor=”#FFB74D” color=”#fff” radius=”30″ margin=”0 10px 0 0″]ポイント[/st-marumozi]これは見出しに使用したサンプル

まるもじ（大）

丸い背景の大きめの文字を作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

[st-marumozi-big fontawesome=”” bgcolor=”#f3f3f3″ color=”#000000″ radius=”30″ margin=”0 10px 10px 0″]基本：これはダミーです[/st-marumozi-big]

[st-marumozi-big fontawesome=”” bgcolor=”#FFB74D” color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（オレンジ）これはダミーです[/st-marumozi-big]

[st-marumozi-big fontawesome=”” bgcolor=”#F48FB1″ color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（ピンク）これはダミーです[/st-marumozi-big]

[st-marumozi-big fontawesome=”” bgcolor=”#4FC3F7″ color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（ブルー）これはダミーです[/st-marumozi-big]

[st-marumozi-big fontawesome=”fa-question-circle” bgcolor=”#4FC3F7″ color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（はてな）これはダミーです[/st-marumozi-big]

[st-marumozi-big fontawesome=”fa-check-circle” bgcolor=”#FFB74D” color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（チェック）これはダミーです[/st-marumozi-big]

[st-marumozi-big fontawesome=”fa-check-circle” bgcolor=”#FFB74D” color=”#fff” radius=”30″ margin=”0 10px 10px 0″]（うすい注意）これはダミーです[/st-marumozi-big]

[st-marumozi-big fontawesome=”fa-exclamation-circle” bgcolor=”#ef5350″ color=”#fff” radius=”30″ margin=”0 10px 0 0″]（注意）これはダミーです[/st-marumozi-big]

カスタムフォント

カスタムフォントはショートコードでフォントをカスタマイズできます

[st-designfont myclass=”” fontawesome=”” fontsize=”150″ fontweight=”bold” color=”#000″ textshadow=”” webfont=”” margin=”0 0 20px 0″]これはダミーです[/st-designfont]

[st-designfont myclass=”” fontawesome=”” fontsize=”150″ fontweight=”bold” color=”#fff” textshadow=”#424242″ webfont=”on” margin=”0 0 20px 0″]これはダミーです[/st-designfont]

ステップ

「購入の流れ」などステップを使用したい場合のデザインに便利です。カラーなどがカスタマイザーの「オプション」で変更できます

[st-step step_no=”1″]お湯を入れる[/st-step]

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

[st-step step_no=”2″]3分待つ[/st-step]

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

[st-step step_no=”3″]完成です[/st-step]

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

ポイント

[st-point fontsize=”” fontweight=”bold” bordercolor=””]これはダミーのテキストです[/st-point]

ラベル

[st-label label=”おすすめ” bgcolor=”#FBC02D” color=”#FFFFFF”]

[/st-label]

PC（960px以上）Tab（955px〜600px）のレスポンシブ表示となります

※コンテンツ内容は「バナーショートコード」で作成しています

流れる文字

バナー風ボックス

バナー風デザインを作成するショートコード

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

[st-flexbox url=”” 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=”10″]

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

[/st-flexbox]

サンプル例

[st-flexbox url=”” fontawesome=”fa-info-circle” title=”詳しい御案内はこちら” height=”” color=”#fff” fontsize=”150″ radius=”0″ shadow=”#424242″ bordercolor=”#ccc” borderwidth=”1″ bgcolor=”” backgroud_image=”https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg” blur=”on” left=”” margin_bottom=”10″]料金プランやサービスについて[/st-flexbox] [st-flexbox url=”” fontawesome=”” title=”泣ける！
漫画ランキング” width=”280″ height=”250″ color=”#fff” fontsize=”200″ radius=”5″ shadow=”#424242″ bordercolor=”#ccc” borderwidth=”1″ bgcolor=”” backgroud_image=”https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg” blur=”” left=”” margin_bottom=”10″]本屋さんが選んだ泣けるマンガランキング1位は？[st-mybutton url=”#” title=”今すぐCHECK” rel=”” fontawesome=”” target=”” color=”#fff” bgcolor=”#FFD54F” bgcolor_top=”#ffdb69″ bordercolor=”#FFEB3B” borderwidth=”1″ borderradius=”5″ fontsize=”90″ fontweight=”bold” width=”80″ fontawesome_after=”fa-angle-right” shadow=”#FFB300″ ref=”on”][/st-flexbox]

マイボックス

様々なボックスデザインを作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#757575″ bordercolor=”#BDBDBD” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”5″ titleweight=”bold”]

（基本）これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold”]

（しかく枠のみ）これはダミーです

[/st-mybox]

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#BDBDBD” bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]

（まるみ）これはダミーです

[/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=”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=”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=”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]

マイボックス（+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=”#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″]

これはダミーです

[/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″]

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

[/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″]

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

[/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″]

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

[/st-mybox]

見出し付きフリーボックス

[st-midasibox title=”見出し（全角15文字）” fontawesome=”” bordercolor=”” color=”” bgcolor=”” borderwidth=”” borderradius=”” titleweight=”bold”]

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

[/st-midasibox]

[st-midasibox-intitle title=”見出し（全角15文字）” fontawesome=”” bordercolor=”” color=”” bgcolor=”” borderwidth=”” borderradius=”” titleweight=”bold”]

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

[/st-midasibox-intitle]

メモボックス

スライドボックス

[st-slidebox text=”+ クリックして下さい” bgcolor=”” color=”#1a1a1a” margin_bottom=”20″]

クリックで開かれる内容です

[/st-slidebox]

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

[st-square-checkbox bgcolor=”” bordercolor=”” fontweight=”” borderwidth=”3″]

[/st-square-checkbox]

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

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

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

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

こんな方におすすめ[v]

ガイドマップメニュー

カスタムボタン

自由なボタンを作成します。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。

ノーマル

基本

[st-mybutton url=”#” title=”ボタン” rel=”” fontawesome=”” target=”” color=”#000000″ bgcolor=”#FFF” bgcolor_top=”” bordercolor=”#CCC” borderwidth=”3″ borderradius=”0″ fontsize=”” fontweight=”” width=”100″ fontawesome_after=”” shadow=”” ref=””]

詳しくはコチラ（オレンジ）

[st-mybutton 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=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#e53935″ bgcolor_top=”#f44336″ bordercolor=”#e57373″ borderwidth=”1″ borderradius=”5″ fontsize=”bold” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#c62828″ ref=”on”]

詳しくはコチラ（グリーン）

[st-mybutton url=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#43A047″ bgcolor_top=”#66BB6A” bordercolor=”#81C784″ borderwidth=”1″ borderradius=”5″ fontsize=”bold” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#388E3C” ref=”on”]

詳しくはコチラ（ブルー）

[st-mybutton url=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#039BE5″ bgcolor_top=”#29B6F6″ bordercolor=”#4FC3F7″ borderwidth=”1″ borderradius=”5″ fontsize=”bold” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#039BE5″ ref=”on”]

お問合せ

[st-mybutton 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”]

もっと詳しく（オレンジ）

[st-mybutton url=”#” title=”もっと詳しく” rel=”” fontawesome=”” target=”” color=”#fff” bgcolor=”#FFD54F” bgcolor_top=”#ffdb69″ bordercolor=”#FFEB3B” borderwidth=”1″ borderradius=”30″ fontsize=”85″ fontweight=”” width=”90″ fontawesome_after=”fa-angle-right” shadow=”” ref=”on”]

もっと詳しく（ピンク）

[st-mybutton url=”#” title=”もっと詳しく” rel=”” fontawesome=”” target=”” color=”#fff” bgcolor=”#F48FB1″ bgcolor_top=”#f6a6c1″ bordercolor=”#F48FB1″ borderwidth=”1″ borderradius=”30″ fontsize=”85″ fontweight=”” width=”90″ fontawesome_after=”fa-angle-right” shadow=”” ref=”on”]

もっと詳しく（ブルー）

[st-mybutton url=”#” title=”もっと詳しく” rel=”” fontawesome=”” target=”” color=”#fff” bgcolor=”#4FC3F7″ bgcolor_top=”#67cbf8″ bordercolor=”#4FC3F7″ borderwidth=”1″ borderradius=”30″ fontsize=”85″ fontweight=”” width=”90″ fontawesome_after=”fa-angle-right” shadow=”” ref=”on”]

人気ランキング

[st-mybutton url=”#” title=”人気ランキング” rel=”” fontawesome=”st-svg-oukan” target=”” color=”#fff” bgcolor=”#FBC02D” bgcolor_top=”#fbc846″ bordercolor=”#FBC02D” borderwidth=”1″ borderradius=”5″ fontsize=”110″ fontweight=”bold” width=”90″ fontawesome_after=”” shadow=”” ref=”on”]

ランキングはコチラ(AFFINGER又はEX版のみ）

[st-mybutton class=”” url=”#ranking” title=”ランキングはコチラ” rel=”” fontawesome=”fa-angle-double-down” target=”” color=”#1a1a1a” bgcolor=”#fdef4e” bgcolor_top=”” bordercolor=”#fceb1c” borderwidth=”1″ borderradius=”” fontsize=”95″ fontweight=”” width=”” fontawesome_after=”” shadow=”” ref=””]

ミニ

基本

[st-mybutton-mini url=”#” title=”ボタン” rel=”” fontawesome=”” target=”” color=”#000000″ bgcolor=”#f3f3f3″ bgcolor_top=”” borderradius=”3″ fontsize=”” fontweight=”” fontawesome_after=”” shadow=”#BDBDBD” ref=””]

詳しくはコチラ（オレンジ）

[st-mybutton-mini url=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”” color=”#fff” bgcolor=”#FFB74D” bgcolor_top=”” borderradius=”5″ fontsize=”” fontweight=”” fontawesome_after=”fa-angle-right” shadow=”#FFB300″ ref=””]

詳しくはコチラ（レッド）

[st-mybutton-mini url=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#ef5350″ bgcolor_top=”” borderradius=”5″ fontsize=”” fontweight=”” fontawesome_after=”fa-angle-right” shadow=”#f44336″ ref=””]

詳しくはコチラ（グリーン）

[st-mybutton-mini url=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#9CCC65″ bgcolor_top=”” borderradius=”5″ fontsize=”” fontweight=”” fontawesome_after=”fa-angle-right” shadow=”#8BC34A” ref=””]

詳しくはコチラ（ブルー）

[st-mybutton-mini url=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#4FC3F7″ bgcolor_top=”” borderradius=”5″ fontsize=”” fontweight=”” fontawesome_after=”fa-angle-right” shadow=”#03A9F4″ ref=””]

MCボタン(AFFINGER又はEX版のみ）

[st-mcbutton 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]

会話ふきだし

「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です

[st-kaiwa1]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa1]

[st-kaiwa2 r]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa2]

[st-kaiwa3]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa3]

[st-kaiwa4 r]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa4]

[st-kaiwa5]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa5]

[st-kaiwa6 r]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa6]

[st-kaiwa7]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa7]

[st-kaiwa8 r]これはダミーのテキストですこれはダミーのテキストです[/st-kaiwa8]

ランキング見出し(AFFINGER又はEX版のみ）

[st-rank rankno=”1″ bgcolor=”” color=”#000″ bordercolor=”#ccc” radius=”” star=”5″]ランキング1位[/st-rank]

[st-rank rankno=”2″ bgcolor=”” color=”#000″ bordercolor=”#ccc” radius=”” star=”4″]ランキング2位[/st-rank]

[st-rank rankno=”3″ bgcolor=”” color=”#000″ bordercolor=”#ccc” radius=”” star=”3″]ランキング3位[/st-rank]

[st-rank rankno=”4″ bgcolor=”” color=”#000″ bordercolor=”#ccc” radius=”” star=”2″]ランキング4位以下[/st-rank]

レイアウト

PCとTab3分割

PCとTab左右40：60%

PCとTab左右50%

PCとTab左右30：70%

全サイズ左右50%

均等横並び

Div

任意のクラスを設定するdivを作成します

マージン

マージンをつける用のボックスを作成します

タブ(AFFINGER又はEX版のみ）

[st-tab-content memo=”全体を包むボックスです”][st-input-tab text=”タブ1″ bgcolor=”#fff” color=”#1a1a1a” fontweight=”” width=”45″ value=”1″ checked=”checked”][st-input-tab text=”タブ2″ bgcolor=”#fff” color=”#1a1a1a” fontweight=”” width=”45″ value=”2″ checked=””][st-tab-main bgcolor=”” bordercolor=”” value=”1″]

[/st-tab-main][st-tab-main bgcolor=”” bordercolor=”” value=”2″]

[/st-tab-main][/st-tab-content]

その他パーツ

スター

[star5]

[star45]

[star4]

[star35]

[star3]

[star2]

[star1]

年月（EX版のみ）

[st-date]

画像付きコメント(AFFINGER又はEX版のみ）

[st-user-comment-box title=”タイトル” user_text=”◯代男性” color=”” star=”5″][/st-user-comment-box]

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

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[st-user-comment-box title=”タイトル” user_text=”◯代男性” color=”” star=”4″][/st-user-comment-box]

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

[/st-mybox]

アドセンス

ウィジェット「広告・Googleアドセンスのスマホ用300px」で設定した内容を挿入します

オリジナルショートコード

ウィジェット「オリジナルのショートコード作成ウィジェット」で設定した内容を挿入します

YouTube

YouTube動画の貼り付けは直接URLを貼り付ける方法と、IDを指定して「サムネイル画像」リンクとして表示する方法があります。

URL貼り付け

自動でレスポンシブな動画として表示されます。

IDによるサムネイルリンク

[youtube id=2MNL2mU8pBE]

サムネイルリンクとして表示することで複数でも表示が遅くなるのを軽減できます。クリックするとYouTubeに飛んでしまうのが欠点です。

三角（下矢印）

カラーを変更できる三角矢印のショートコードです。

[st-under-t color=”#000″]

スクロールナビ(AFFINGER又はEX版のみ）

記事一覧

任意の記事の一覧の記事中の好きな位置に表示できます（EX版ではスライドショーにすることも可能）

カテゴリ一覧

任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定（3~1）などが可能です。

[st-catgroup cat=”0″ page=”5″ order=”desc” orderby=”id” child=”on” slide=”off” slides_to_show=”3,3,2″ slide_date=”” slide_more=”ReadMore”]

カテゴリ一覧スライドショー

上記の一覧を簡易にスライドショーに変えることが可能です。

[st-catgroup cat=”0″ page=”5″ order=”desc” orderby=”id” child=”on” slide=”on” slides_to_show=”3,3,2″ slide_date=”” slide_more=”ReadMore”]

ショートコード補助

Webアイコン

ショートコードに挿入するためのWebアイコンです（アイコンが直接表示されるわけではございません。ショートコードの引数に使用して下さい）

アニメーション（クラス）

ショートコードに挿入するためのCSS用のクラスです（ショートコードの引数に使用して下さい）

HTMLカラーモード

ショートコードに挿入するHTMLカラーコードです（カラーが直接表示されるわけではございません。ショートコードの引数に使用して下さい）

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#e53935″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#e53935

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#f44336″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#f44336

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#ffebee” backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#ffebee

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#039BE5″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#03A9F4

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#03A9F4″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#03A9F4

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#E1F5FE” backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#E1F5FE

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#43A047″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#43A047

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#4CAF50″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#4CAF50

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#E8F5E9″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#E8F5E9

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#FFC107″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#FFC107

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#FFF3E0″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#FFF3E0

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#212121″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#212121

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#424242″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#424242

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#FAFAFA” backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#FAFAFA

[/st-flexbox]

[st-flexbox url=”” fontawesome=”” title=”” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”” bordercolor=”” borderwidth=”0″ bgcolor=”#FFFDE7″ backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

#FFFDE7

[/st-flexbox]

クイックボタン

エディタの上に表示されているボタンです。クリックするだけでデザインが適応されるので使用頻度の高いものなどを設定しています。

太字

選択したテキストに太字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい

太赤

選択したテキストに太赤字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい

黄細マ

選択したテキストに黄マーカー（細）を適応します

CT

選択したテキストや見出しに自動カウントを設定します

写真枠

写真に枠線をつけます

角丸背景

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]

角丸のマイボックスを設定します。

[/st-mybox]

ボタンA

HTMLでボタンデザインAを挿入します（AFFINGERの場合「ランキング管理」＞「CSS」でカラーを変更できます）

ボタンB

HTMLでボタンデザインBを挿入します（AFFINGERの場合「ランキング管理」＞「CSS」でカラーを変更できます）

カード

記事IDを設定することで内部リンクをブログカード化します

[st-card id=2 label=”” name=”” bgcolor=”” color=”” readmore=”on”]