MENU

WING「記事作成パーツ」確認用ソース

元ソースはこちら→WING「記事作成パーツ」確認用ソース – 【公式】STINGER STORE

目次

スタイル(h2)

テキスト(h3)

これは太字です。

これは赤字です。

これは大文字です。

これは小文字です

これはドット線です。

これは参照リンクです

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

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

これは打消しです。

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

アイコン

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

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

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

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

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

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

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

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

見出し

カウント(h4)

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

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

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

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

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

リセットする方法などマニュアルはコチラ

記事タイトル

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

まとめ

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

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

マニュアルはコチラ

マーカー

これは黄マーカーです。

これは黄マーカー(細)です。

これは赤マーカーです。

これは赤マーカー(細)です。

これは青マーカーです。

これは青マーカー(細)です。

これは鼠マーカーです。

これは鼠マーカー(細)です。

写真

写真枠

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

キャプションあり(h5)

キャプションを追加できます

ポラロイド風

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

マニュアルはコチラ

ボックス

黄色ボックスです

薄赤ボックスです

グレーボックスです

引用風のボックスです

チェック(ulタグ)

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

参考:記事パーツについて

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

  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです

ナンバリング(olタグ)

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

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

  1. これはダミーのリストです
  2. これはダミーのリストです
  3. これはダミーのリストです

レイアウト

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

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

PCとTab3分割

PCとTab左右40:60%

PCとTab左右50%

PCとTab左右30:70%

全サイズ左右50%

均等横並び

回り込み解除

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

センター寄せ

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

下に余白

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

カードスタイル

ブログ風カードの作り方

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

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

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

カードスタイルB

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

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

ランキングボックス(AFFINGER版のみ)

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

width100%リセット

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

imgインラインボックス

display: inline;を指定します。

テーブル

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

※新しいバージョンでは自動で幅が挿入されるようになりました。「置換プラグイン」があると一括削除ができます。

横スクロール

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

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

中央配置

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

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト

装飾なし

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

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

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

関連:tableタグ(表)の挿入

タグ

WordPress4.9.6にて「タグが反応しない」という方はコチラをご参考下さい

デザイン

クリップメモ

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

[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ 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=”#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-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-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-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]

マニュアルはコチラ

ステップ

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

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

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

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

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

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

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

マニュアルはコチラ

こんな方におすすめ

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

こんな方におすすめ

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

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

本日のメニュー

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

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

今日のやることリスト

  1. これはダミーのテキストです
  2. これはダミーのテキストです
  3. これはダミーのテキストです
  4. これはダミーのテキストです

マニュアルはコチラ

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

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

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

[/st-midasibox]

マニュアルはコチラ

メモボックス

メモ

ここに本文を記述

スライドボックス

+ クリックして下さい

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

バナーボックス

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

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-label label=”おすすめ” bgcolor=”#FBC02D” color=”#FFFFFF”]

[/st-label]

マニュアルはコチラ

レイアウト

その他パーツ

カスタムボタン

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

基本(h5)

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

マニュアルはコチラ

スター

[star5]

[star45]

[star4]

[star35]

[star3]

[star2]

[star1]

アドセンス

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

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

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

YouTube

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

URL貼り付け

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

複数設置する場合は「LazyLoad SEO(画像・iframe遅延読み込み)」を使用することで表示速度が改善できる場合があります。

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

[youtube id=2MNL2mU8pBE]

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

関連:複数のYouTubeの挿入方法

三角(下矢印)

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

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

記事一覧

任意の記事の一覧の記事中の好きな位置に表示できます(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”]

マニュアルはコチラ

会話ふきだし

「会話ふきだし」は最大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]

マニュアルはコチラ

表示を増やしたい場合は専用のプラグインもあります。

Webアイコン

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

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

外部リンクをブログカード化するには専用プラグイン(有料)があります。

マニュアルはコチラ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次