STORK19を今すぐダウンロード！

ショートコード

テーマ専用ショートコードの表示サンプル

ショートコード

STORK19では、テーマ専用のショートコードも利用できます。

ブロックで代用できます！

このページで紹介しているショートコードの機能の多くは、標準ブロックもしくはテーマ専用ブロックで代用できます。詳しくは下記ページにてご確認ください。

エディタ機能
詳しくはこちらブロックエディタで使える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]
KICHIKICHI
アイコンは左右に配置することができます。

[voice icon="https://www.stork19.com/wp-content/uploads/2015/05/561bd446d73128e60f32951b26f3908a.jpeg" name="KICHIKICHI" type="r"]アイコンは左右に配置することができます。[/voice]
JUNICHIII
もちろん通常通りリンクとかも貼れるし、リスト形式にすることもできます。

  • リスト1
  • リスト2
  • リスト3

簡単です。

[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]
JUNICHIII
吹き出しは文章を読みやすくしてくれるので効果的に使いたいですね。
また、サイトのキャラクターなどを登場させてブランディングに役立てることもできますね。
[voice icon="https://www.stork19.com/wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150x150.jpg" name="JUNICHIII" type="l"]吹き出しは文章を読みやすくしてくれるので効果的に使いたいですね。
 また、サイトのキャラクターなどを登場させてブランディングに役立てることもできますね。[/voice]
JUNICHIII
Facebook風のデザインにすることもできますし。
KICHIKICHI
わお！Facebook風！

JUNICHIII
LINE風のデザインにすることもできますね。
KICHIKICHI
わお！LINE風だ！

ながの
ふん。まだまだよ。
これくらいで図に乗らないで。

[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=””デザインタイプを選択。（複数設定可能。複数設定する場合は半角スペースをあけて入力していく）

 

  • アイコンを左 … l
  • アイコンを右 … r
  • アイコンを大きく … big
  • Facebook風… fb
  • LINE風… line

入力サンプル（アイコン左）

[voice icon="アイコンURL" name="名前" type="l fb"]コメント[/voice]

入力サンプル（アイコン右）

[voice icon="アイコンURL" name="名前" type="r fb"]コメント[/voice]

2カラム表示

HTMLやCSSなんてわからなくても2カラム表示が可能です。カラム全体を [colwrap]~~~[/colwrap] で囲むのをお忘れなく！

ページ 5

デスクトップとタブレットの時のみ2カラムになるよ

ページ 4

スマホでは1カラムだよ

書き方

[colwrap]
[col2]デスクトップとタブレットの時のみ2カラムになるよ[/col2]
[col2]スマホでは1カラムだよ[/col2]
[/colwrap]

3カラム表示

HTMLやCSSなんてわからなくても3カラム表示が可能です。カラム全体を[colwrap]~~~[/colwrap] で囲むのをお忘れなく！

ページ 2

1カラム目

デスクトップ＆タブレットの時のみ3カラムになるよ

ページ 3

2カラム目

ショートコードを使うと簡単だよ

ページ 1

3カラム目

スマホでは1カラムだよ

書き方

[colwrap]
[col3]デスクトップ＆タブレットの時のみ3カラムになるよ[/col3]
[col3]ショートコードを使うと簡単だよ[/col3]
[col3]スマホでは1カラムだよ[/col3]
[/colwrap]

画面サイズに応じて改行

このショートコードを入力するとソースコードにbrタグが挿入され、それぞれ以下の条件で改行（brタグ）が機能するように設定しています。

  • PCとタブレットで改行［pcbr］・・・横幅768px以上でのみ改行される
  • モバイルで改行［spbr］・・・横幅767px以下でのみ改行される
// PCとタブレットで改行
[pcbr]

// モバイルで改行
[spbr]

下記の表示サンプルをPCとスマホで確認すると、それぞれで改行結果が異なることが確認できるかと思います。

表示サンプル

ブロックツールバーから、画面サイズに応じて改行を指定するショートコードを挿入でき、
ここはPCとタブレットのみで改行しています。

これは段落ブロックです。
ここはスマホのみで改行しています。

WordPressテーマ「STORK19ストーク19」

ブログを書くのが楽しくなる仕掛けや機能がたっぷり！STORK19は読む人も書く人も快適なWordPressテーマです。

デモサイト集を見る
テーマを購入する
ABOUT US
OPENCAGE
OPENCAGEテーマ開発者
オープンケージは「誰もが簡単に美しいデザインのサイトを」をテーマにデザイン性に優れたテーマを配信しています。→このプロフィールの設定方法