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

ストークのv1.1.3で追加されたボックスショートコードの表示サンプルページです。

これまで注意書きや補足用のショートコードはありましたが、今回のボックスショートコードを使えばより表現の幅が広がります。

タイトル（ラベル）つき

青色

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

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

v1.3.0〜タイトルつき（シンプルデザイン）

バージョン1.3.0から背景色なしの、シンプルデザインに変更できるようになりました！

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]

使い方解説

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

ここにぼっくす（青）

[/box]

色の変え方

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

• blue_box
• red_box
• yellow_box
• green_box
• pink_box
• glay_box
• black_box

デザインの変え方

type="simple" と追記することで背景色がなくなります。

[box class="blue_box" type="simple" title="補足説明"]
こちらは補足説明です！ 
[/box]

ラベルタイトルの追加

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

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

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

ラベルなしタイプ

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

▼記載例（title=をけす）

[box class="blue_box"]

ここにコンテンツを記載

[/box]

その他の表示例

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

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

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

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

2013.1.10

2カラムショートコードを使って広告を横並びにすることも可能です。