STORK19では、テーマ専用のショートコードも利用できます。
もくじ
記事中に関連記事のリンクを画像つきで表示
記事内に表示させたい記事IDを入力するだけで、キレイなリンクがつくれます。
書き方
[kanren postid="1177"]
書き方は、上記サンプルの 1177 のように、postid=”” 内に記事IDを記入するだけ。
その他にも多くのオプションがあります。関連記事ショートコードの使い方について、詳しくは下記の記事でも紹介しています。
アコーディオン
コンテンツを開閉できるアコーディオンショートコードが利用可能です。
アコーディオンの中の本文です。補足説明であまり空間を使いたくない場合に便利です。
書き方
[open title="【ここにタイトル】タップするとコンテンツが開きます"] ここに中の本文を。 [/open]
カテゴリーごとのリスト
カテゴリーIDを指定して記事のリストを作成できます。
補足説明
文書の下などに補足としてコメントをいれることができます。意外とこれがよく使う機能なんですよ。
補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。
書き方
[aside] 補足説明をいれる 少し小さなフォントで少し目立つような補足説明を追加することができます。 [/aside]
注意説明
文書の下などに補足として注意書きをいれることができます。意外とこれが便利なんですよ。
注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。
書き方
[aside type="warning"] 注意説明をいれる 少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。 [/aside]
シンプルな枠
目立たせるほどでもないけど、シンプルに差別化したい場合に使える！シンプルな枠。
シンプルな枠で囲む
少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。
書き方
[aside type="boader"] シンプルな枠で囲む 少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。 [/aside]
ボックス
ラベル付きのボックスを表示できます。
書き方
[box class="blue_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
上で表示している他にも、多くのオプションがございますので、以下の記事にてご確認ください。
ボタン
テキストリンクを下記ショートコードで囲むことで簡単にボタンリンクをつくることができます。ランディングページにリンクしたりアフィリエイトリンクを貼るのもおすすめです。デフォルトボタンはリンクカラーと同じ色になります。
[btn]デフォルトボタン（リンクテキストにする）[/btn]
[btn class="big"]デフォルトビッグボタン（リンクテキストにする）[/btn]
[btn class="simple"]シンプルボタン（リンクテキストにする）[/btn]
[btn class="simple big"]シンプルビッグボタン（リンクテキストにする）[/btn]
リッチボタン
[btn class="rich_yellow"]立体的なボタン（黄色）[/btn]
[btn class="rich_pink"]立体的なボタン（ピンク）[/btn]
[btn class="rich_orange"]立体的なボタン（オレンジ）[/btn]
[btn class="rich_green"]立体的なボタン（グリーン）[/btn]
[btn class="rich_blue"]立体的なボタン（ブルー）[/btn]
ver2.9より光るボタンを追加しました。
[[btn class="stk-shiny-button"]光るボタン[/btn]]
[[btn class="rich_yellow stk-shiny-button"]光るボタン（リッチyellow）[/btn]]ショートコードを入力すれば、テーブル（表）の中にもボタンを設置できます。
| デフォルトボタン | |
| デフォルトボタン（小） | |
| 立体的なボタン | |
| 立体的なボタン（小） |
吹き出し機能
[voice icon="https://www.stork19.com/wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150x150.jpg" name="JUNICHIII" type="l"]ビジュアルエディタ内でショートコードで吹き出しをつくることができます。[/voice]
[voice icon="https://www.stork19.com/wp-content/uploads/2015/05/561bd446d73128e60f32951b26f3908a.jpeg" name="KICHIKICHI" type="r"]アイコンは左右に配置することができます。[/voice]
[voice icon="https://www.stork19.com/wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150x150.jpg" name="JUNICHIII" type="l"] もちろん通常通りリンクとかも貼れるし、リスト形式にすることもできます。 ・リスト1 ・リスト2 ・リスト3 簡単です。[/voice]
また、サイトのキャラクターなどを登場させてブランディングに役立てることもできますね。
[voice icon="https://www.stork19.com/wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150x150.jpg" name="JUNICHIII" type="l"]吹き出しは文章を読みやすくしてくれるので効果的に使いたいですね。 また、サイトのキャラクターなどを登場させてブランディングに役立てることもできますね。[/voice]
これくらいで図に乗らないで。
[voice icon="https://www.stork19.com/wp-content/uploads/2015/05/nagano2.png" name="ながの" type="l big"]ふん。まだまだよ。 これくらいで図に乗らないで。[/voice]
アイコン周りの色を変更
とりあえず黄色（type内に icon_yellow と追記）
次は赤（type内に icon_red と追記）
最後は青（type内に icon_blue と追記）
やっぱりダメ押しの黒（type内に icon_black と追記）
吹き出しのオプション
| オプション | 説明 |
|---|---|
| icon=”” | しゃべっている人のアイコン画像を設定。URLを入力 |
| name=”” | しゃべっている人の名前を設定。テキストを入力 |
| type=”” | デザインタイプを選択。（複数設定可能。複数設定する場合は半角スペースをあけて入力していく）
|
入力サンプル（アイコン左）
[voice icon="アイコンURL" name="名前" type="l fb"]コメント[/voice]
入力サンプル（アイコン右）
[voice icon="アイコンURL" name="名前" type="r fb"]コメント[/voice]
2カラム表示
HTMLやCSSなんてわからなくても2カラム表示が可能です。カラム全体を [colwrap]~~~[/colwrap] で囲むのをお忘れなく！
デスクトップとタブレットの時のみ2カラムになるよ
スマホでは1カラムだよ
書き方
[colwrap] [col2]デスクトップとタブレットの時のみ2カラムになるよ[/col2] [col2]スマホでは1カラムだよ[/col2] [/colwrap]
3カラム表示
HTMLやCSSなんてわからなくても3カラム表示が可能です。カラム全体を[colwrap]~~~[/colwrap] で囲むのをお忘れなく！
1カラム目
デスクトップ＆タブレットの時のみ3カラムになるよ
2カラム目
ショートコードを使うと簡単だよ
3カラム目
スマホでは1カラムだよ
書き方
[colwrap] [col3]デスクトップ＆タブレットの時のみ3カラムになるよ[/col3] [col3]ショートコードを使うと簡単だよ[/col3] [col3]スマホでは1カラムだよ[/col3] [/colwrap]
画面サイズに応じて改行
このショートコードを入力するとソースコードにbrタグが挿入され、それぞれ以下の条件で改行（brタグ）が機能するように設定しています。
- PCとタブレットで改行［pcbr］・・・横幅768px以上でのみ改行される
- モバイルで改行［spbr］・・・横幅767px以下でのみ改行される
// PCとタブレットで改行 [pcbr] // モバイルで改行 [spbr]
下記の表示サンプルをPCとスマホで確認すると、それぞれで改行結果が異なることが確認できるかと思います。
ブロックツールバーから、画面サイズに応じて改行を指定するショートコードを挿入でき、
ここはPCとタブレットのみで改行しています。
これは段落ブロックです。
ここはスマホのみで改行しています。
このページで紹介しているショートコードの機能の多くは、標準ブロックもしくはテーマ専用ブロックで代用できます。詳しくは下記ページにてご確認ください。