【STORK】ストークカスタマイズ ショートコードの使い方

こちらは旧ストークの設定になります。
現在ストークはSTORK19にバージョンアップしています。

AMPにも対応し表示速度も速くなりました

まだの方はこの機会にチェックしてみてください。

こちらのサイトもSTORK19にバージョンアップしました。
【公式】WordPressテーマ「STORK19」

ストークのショートコードの使い方

基本コードを記事内にコピペして使用するだけです。

[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つの場合の表示例

記事を取得できませんでした。記事IDをご確認ください。

[kanren postid="x"]

リンク先が2つの場合の表示例

記事を取得できませんでした。記事IDをご確認ください。

[kanren postid="x,x"]

関連記事　ラベル無し

リンク先が1つの場合の表示例

記事を取得できませんでした。記事IDをご確認ください。

[kanren2 postid="x"]

リンク先が2つの場合の表示例

記事を取得できませんでした。記事IDをご確認ください。

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

ボタン

ボタンの使い方

デフォルト　ボタン

外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。

WordPressテーマ「ストーク」

[btn]リンク付きテキスト[/btn]

デフォルト　ビッグボタン

外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。

WordPressテーマ「ストーク」

[btn class="big"]リンク付きテキスト[/btn]

シンプル　ボタン

外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。

WordPressテーマ「ストーク」

[btn class="simple"]リンク付きテキスト[/btn]

シンプル　ビッグボタン

外観⇒カスタマイズ⇒サイトカラー設定⇒リンクで決めた色になります。

WordPressテーマ「ストーク」

[btn class="simple big"]リンク付きテキスト[/btn]

目立つ　赤ボタン

WordPressテーマ「ストーク」

[btn class="lightning"]リンク付きテキスト[/btn]

目立つ赤　ビッグボタン

WordPressテーマ「ストーク」

[btn class="lightning big"]リンク付きテキスト[/btn]

目立つ赤　灰色背景付ボタン

WordPressテーマ「ストーク」

[btn class="lightning bg"]リンク付きテキスト[/btn]

目立つ赤　黄色背景付　角丸ボタン

WordPressテーマ「ストーク」

[btn class="lightning big bg-yellow maru"]リンク付きテキスト[/btn]

立体的　ピンクボタン

WordPressテーマ「ストーク」

[btn class="rich_pink"]リンク付きテキスト[/btn]

立体的　黄色ボタン

WordPressテーマ「ストーク」

[btn class="rich_yellow"]リンク付きテキスト[/btn]

立体的　オレンジボタン

WordPressテーマ「ストーク」

[btn class="rich_orange"]リンク付きテキスト[/btn]

立体的　青ボタン

WordPressテーマ「ストーク」

[btn class="rich_blue"]リンク付きテキスト[/btn]

立体的　緑ボタン

WordPressテーマ「ストーク」

[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

/****ラインマーカー追加******/
/*ピンク*/
.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>