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

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

こちらのサイトテーマはSTORKを使用していますが、現在は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つの場合の表示例

楽天モバイル

楽天モバイルなら月々の料金が安い!!通話SIMでも1250円から

2018-08-05
[kanren postid="x"]

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

お財布コム

ネットショッピングするならお財布.com経由でポイントを貰おう。

2018-09-04
楽天モバイル

楽天モバイルなら月々の料金が安い!!通話SIMでも1250円から

2018-08-05
[kanren postid="x,x"]

関連記事 ラベル無し

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

楽天モバイル

楽天モバイルなら月々の料金が安い!!通話SIMでも1250円から

2018-08-05
[kanren2 postid="x"]

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

お財布コム

ネットショッピングするならお財布.com経由でポイントを貰おう。

2018-09-04
楽天モバイル

楽天モバイルなら月々の料金が安い!!通話SIMでも1250円から

2018-08-05
[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>
スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です