「ボックス」ショートコード表示サンプル

ボックスショートコードの表示サンプルページです。

タイトルラベル付きで表示可能なので表現の幅が広がります。

ブロックでも利用可能です

このページで紹介しているボックスショートコードは、ブロックエディタでも利用可能です。

関連記事「ボックス」ブロックの使い方

2020.10.20

タイトル（ラベル）つき

サイトカラー

※STORK19のバージョン1.7からの機能です。

[box class="site_color" title="ここにタイトル"]ここにコンテンツを記載[/box]

青色

[box class="blue_box" title="ここにタイトル"]ここにコンテンツを記載[/box]

赤色

[box class="red_box" title="ここにタイトル"]ここにコンテンツを記載[/box]

黄色

[box class="yellow_box" title="ここにタイトル"]ここにコンテンツを記載[/box]

緑色

[box class="green_box" title="ここにタイトル"]ここにコンテンツを記載[/box]

ピンク

[box class="pink_box" title="ここにタイトル"]ここにコンテンツを記載[/box]

グレー

[box class="glay_box" title="ここにタイトル"]ここにコンテンツを記載[/box]

黒色

[box class="black_box" title="ここにタイトル"]ここにコンテンツを記載[/box]

と、このような形で表現可能です。

使い方解説

[box class="blue_box"] と[/box]で囲むことで、ボックスショートコードを利用可能です。ビジュアルエディタやテキストエディタ内で以下のように記載します。

[box class="blue_box" title="ここにタイトル"]

ここにぼっくす（青）

[/box]

色の変え方

class="blue_box"のblue_boxの部分を変更することで色を変えることができます。現時点で8種類に対応。

1. site_color
2. blue_box
3. red_box
4. yellow_box
5. green_box
6. pink_box
7. glay_box
8. black_box

※site_colorはバージョン1.7から追加されました。

ラベルタイトルの追加

title="ここにタイトル" のテキストを変更することで表示するラベルタイトルのテキストを変更可能です。

例えば以下のように記載するとこうなります。

[box class="green_box" title="例）補足説明"] 
こちらは補足説明です！
 [/box]

タイトルつき（シンプルデザイン）

type="simple"と記載することで背景なしのシンプルなデザインで表現可能です。

[box class="blue_box" title="ここにタイトル" type="simple"]ここにコンテンツを記載[/box]

[box class="yellow_box" title="ここにタイトル" type="simple"]ここにコンテンツを記載[/box]

[box class="green_box" title="ここにタイトル" type="simple"]ここにコンテンツを記載[/box]

タイトルつき（タイトルデザイン）

※STORK19のバージョン1.7から追加されました。

type="ttl"と記載することで背景なしのシンプルなデザインで表現可能です。

[box class="blue_box" title="ここにタイトル" type="ttl"]ここにコンテンツを記載[/box]

[box class="yellow_box" title="ここにタイトル" type="ttl"]ここにコンテンツを記載[/box]

[box class="green_box" title="ここにタイトル" type="ttl"]ここにコンテンツを記載[/box]

ラベルなしタイプ

ここまでに紹介してきたコードの「title=”ここにタイトル”」の部分を消せば、ラベルタイトルなしの表示も可能。ラベルなしでシンプルに表示したい場合は、こちらもご利用ください。※色の選び方は上と同じ。

▼記載例（title=をけす）

[box class="blue_box"]

ここにコンテンツを記載

[/box]

その他の表示例

その他表示例を記載しておきます。

関連記事ショートコードを表示

ボックスショートコードの中で関連記事ショートコードを呼び出してみるテスト

関連記事マークアップ: 画像の配置に関する表示テスト

2019.11.11