ストークのショートコードの使い方
基本コードを記事内にコピペして使用するだけです。
[box class="pink_box" title="ラベル名"]（テキスト）[/box]
例えば、上記コードのラベル名のところに「サンプル」と入れ
(テキスト)のところに「こんにちはこれはテストコメントです」と入れてみます。
[box class="pink_box" title="サンプル"]こんにちはこれはテストコメントです[/box]
ストークには簡単に使用できるショートコードが沢山あるので是非記事に利用してみてください。
使いそうなショートコード一覧を載せておきます。
簡単に呼び出せるプラグインがあるのでまた次回そのプラグインの記事を書きたいと思います。
ボックス
ボックスラベル ピンク
[box class="pink_box" title="ラベル名"]（テキスト）[/box]
ボックスラベル 灰色
[box class="glay_box" title="ラベル名"]（テキスト）[/box]
ボックスラベル 緑
[box class="green_box" title="ラベル名"]（テキスト）[/box]
ボックスラベル 赤
[box class="red_box" title="ラベル名"]（テキスト）[/box]
ボックスラベル 青
[box class="blue_box" title="ラベル名"]（テキスト）[/box]
ボックスラベル 黒
[box class="black_box" title="ラベル名"]（テキスト）[/box]
リンク
リンクコードの使用方法
リンク表示は関連記事ラベルがあるかないかです。
“x”に入るpostIDは投稿の編集のアドレスバーの「post=266」 266の数字の部分です。記事毎にpostIDは違いますのでリンクさせたい記事のIDを確認して使用しましょう。
関連記事 ラベル有り
リンク先が1つの場合の表示例
[kanren postid="x"]
リンク先が2つの場合の表示例
[kanren postid="x,x"]
関連記事 ラベル無し
リンク先が1つの場合の表示例
[kanren2 postid="x"]
リンク先が2つの場合の表示例
[kanren2 postid="x,x"]
噴出し
icon=”アイコン画像URL”
name=”キャラクタ名”
type=”デザインタイプ”
複数選択可能で半角スペースをあけて入力する
アイコンを左 … l
アイコンを右 … r
アイコンを大きく … big
Facebook風… fb
LINE風… line
アイコンにボーダー
icon_yellow
icon_red
icon_blue
icon_black
facebook風
[voice icon=" 画像アドレス " name=" 名前 " type="l fb"] コメント [/voice]]
LINE風
[voice icon=" 画像アドレス " name=" 名前 " type="l line"] コメント [/voice]
カラー枠 左
[voice icon=" 画像アドレス " name=" 名前 " type="l icon_blue"] コメント [/voice]
カラー枠は4色あります。
青(blue)、赤(red)、黄(yellow)、黒(black)
icon_blueのblue部分を変更して色を変えることが出来ます。
例えば、yellowにした場合
[voice icon=" 画像アドレス " name=" 名前 " type="l icon_yellow"] コメント [/voice]
シンプル ビッグ
[voice icon=" 画像アドレス " name=" 名前 " type="l big"] コメント [/voice]
シンプル右
[voice icon=" 画像アドレス " name=" 名前 " type="r"] コメント [/voice]
シンプル左
改行もできます。
[voice icon=" 画像アドレス " name=" 名前 " type="l"] コメント [/voice]
枠
シンプルな枠
枠で囲いたい文字やコードを記述。
太字や改行もできます。
[aside type="boader"]
シンプルな枠
枠で囲いたい文字やコードを記述。
太字や改行もできます。
[/aside]
注意枠
注意書き
[aside type="warning"]注意枠
注意書き
[/aside]
補足枠
補足説明を書く場合
[aside]補足枠
補足説明を書く場合
[/aside]
ボタン
ボタンの使い方
テキストにリンク設定をしないと使用できません！
デフォルト ボタン
外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。
[btn]リンク付きテキスト[/btn]
デフォルト ビッグボタン
外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。
[btn class="big"]リンク付きテキスト[/btn]
シンプル ボタン
外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。
[btn class="simple"]リンク付きテキスト[/btn]
シンプル ビッグボタン
外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。
[btn class="simple big"]リンク付きテキスト[/btn]
目立つ 赤ボタン
[btn class="lightning"]リンク付きテキスト[/btn]
目立つ赤 ビッグボタン
[btn class="lightning big"]リンク付きテキスト[/btn]
目立つ赤 灰色背景付ボタン
[btn class="lightning bg"]リンク付きテキスト[/btn]
目立つ赤 黄色背景付 角丸ボタン
[btn class="lightning big bg-yellow maru"]リンク付きテキスト[/btn]
立体的 ピンクボタン
[btn class="rich_pink"]リンク付きテキスト[/btn]
立体的 黄色ボタン
[btn class="rich_yellow"]リンク付きテキスト[/btn]
立体的 オレンジボタン
[btn class="rich_orange"]リンク付きテキスト[/btn]
立体的 青ボタン
[btn class="rich_blue"]リンク付きテキスト[/btn]
立体的 緑ボタン
[btn class="rich_green"]リンク付きテキスト[/btn]
表示
2カラムも3カラムもスマホからだと1カラムになるみたいです。
カラム1、カラム2、カラム3は画像を表示させてます
2カラム
[colwrap] [col2]カラム1（左）[/col2] [col2]カラム2（右）[/col2] [/colwrap]
3カラム
[colwrap] [col3]カラム1（左）[/col3] [col3]カラム2（中央）[/col3] [col3]カラム3（右）[/col3] [/colwrap]
番外編 下線 ラインマーカー マーカー
こちらはコード表示出来ない為、後日手段を考えて追記します。m(_ _)m
ラインマーカーを使用する場合、
外観→カスタマイズ→追加CSSに下記コードを追加してください。
/****ラインマーカー追加******/
/*ピンク*/
.marker_Pink {
background: linear-gradient(transparent 60%,#ff7f7f 40%)
}
/*ブルー*/
.marker_Blue {
background: linear-gradient(transparent 60%,#66ccff 40%)
}
/*オレンジ*/
.marker_Orange {
background: linear-gradient(transparent 60%,#FFB96D 40%)
}
下線オレンジ
<span style="border-bottom: 2px solid #FFB96D;">下線オレンジ</span>
下線ブルー
<span style="border-bottom: 2px solid #66ccff;">下線ブルー</span>
下線レッド
<span style="border-bottom: 2px solid #ff7f7f;">下線レッド</span>
ラインマーカーオレンジ
<span class="marker_Orange">ラインマーカーオレンジ</span>
ラインマーカーブルー
<span class="marker_Blue">ラインマーカーブルー</span>
ラインマーカーピンク
<span class="marker_Pink">ラインマーカーピンク</span>
マーカーピンク
<span style="background-color:#ffc6d1;">マーカーピンク</span>
マーカーブルー
<span style="background-color:#d0f2ff;">マーカーブルー</span>
こちらは旧ストークの設定になります。
現在ストークはSTORK19にバージョンアップしています。
AMPにも対応し表示速度も速くなりました
まだの方はこの機会にチェックしてみてください。
こちらのサイトもSTORK19にバージョンアップしました。
【公式】WordPressテーマ「STORK19」