ショートコードでBoxデザインを作る方法

今回はショートコードでBoxデザインを作る方法について紹介したいと思います。

Boxデザインはリストのショートコードでも作ることができるので、もしBoxデザインの中に箇条書きを作る場合には、ぜひリスト用ショートコードの説明もご覧ください。

2020年8月9日合計1680種類を作成可能！？いろいろな見た目のリストを作る方法

info-boxショートコードの基本的な使い方

まずはBoxデザインを作るために、基本的なショートコードの使い方から見ていきましょう。

Muromachiではinfo-boxというショートコードを使ってBoxデザインを作ることができます。

表示したい内容はinfo-boxで囲む

info-boxのショートコードを使うとき、表示したいコンテンツはinfo-boxのショートコードで囲みます。

[info-box]あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。[/info-box]

何もオプションを指定しないと、上のようにとてもシンプルなBoxが出来上がります。

info-boxのオプション

info-boxのショートコードでは次のようなオプションを使って、Boxにタイトルを付けたり背景色や境界線などを設定することができます。

オプションはbox_style="balloon"やbg="gray"、header="注意しておきたいこと"のように、色や文字で指定します。

では、それぞれのオプションについて見ていきましょう。

Boxスタイルを変更する

Boxデザインを作るときに、もっともデザイン上で大きな変化があるのがbox_styleオプションです。

info-boxのショートコードでは、box_style="round"のような形で、次の10種類のBoxスタイルを作ることができます。

すでにリストの使い方を見た方は気づいたかもしれませんが、リストのショートコードと同じBoxスタイルですね。

Boxスタイルを指定しないとき

上で「指定なし」と書いた箇所がありますが、これはbox_style=""としても、そもそもbox_style自体を入れなくても大丈夫という、デフォルトの指定になります。

[info-box box_style="" ...]...[/info-box]

※ info-boxのショートコードで囲まれた...の中には、上と同じ文章が入っています。フォントでおなじみの文ですね。

balloonのBoxスタイルを指定

では、box_style="balloon"と指定して、バルーン型のBoxスタイルを作ってみましょう。

[info-box box_style="balloon" ...]...[/info-box]

他のBoxスタイルについても、上と同じ要領で作ることができます。

ヘッダー（Boxのタイトル）の指定はheaderオプション

では、次のオプションを見ていきましょう。

Boxデザインのヘッダー（タイトル）を付けるには、headerオプションを使います。

[info-box header="Boxデザインのタイトル"]...[/info-box]

配色を変更する

info-boxのショートコードでは、次のようにBoxデザインの背景色やヘッダーの背景色、境界線の色を変えることができます。

変更できる部分もリストのショートコードと似ているんだね。

選択可能な色は現在次のような7色があります。

たとえば背景をグレー、ヘッダーの色を青、境界線を無しにするときには、次のようになります。
※ 見やすさのために改行しています。

[info-box bg="gray" header_bg="blue" color="blue" border="none" ...]
...
[/info-box]

境界線の設定をする

info-boxのショートコードではborderオプションで境界線を指定することができます。

上で見てきた背景の色と同じように、境界線に色をつけるにはborder="red"のように指定します。

反対に、境界線を表示しないようにするにはborder=”none”と指定指定してもらえば大丈夫です。

[info-box bg="white" header_bg="" color="blue" border="blue" ...]
...
[/info-box]

いろいろなスタイル

では、ここまで紹介した方法を使って、いろいろなスタイルを表示してみたいと思います。ぜひお好みのスタイルを見つけてください。

Boxスタイルを指定しないとき

Boxスタイルがroundのとき

Boxスタイルがtabのとき

Boxスタイルがballoonのとき

Boxスタイルがpaperのとき

Boxスタイルがheader_fullのとき

Boxスタイルがheader_no_bgのとき

Boxスタイルがheader_no_bg_centerのとき

Boxスタイルがdashed_1のとき

Boxスタイルがdashed_2のとき