今回はショートコードでBoxデザインを作る方法について紹介したいと思います。
Boxデザインはリストのショートコードでも作ることができるので、もしBoxデザインの中に箇条書きを作る場合には、ぜひリスト用ショートコードの説明もご覧ください。

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_style | Boxスタイルを設定 |
header | ヘッダーの文字を記入 |
header_bg | ヘッダーの背景色を設定 |
bg | 背景色を設定 |
border | 境界線を設定 |
では、それぞれのオプションについて見ていきましょう。
Boxスタイルを変更する
Boxデザインを作るときに、もっともデザイン上で大きな変化があるのがbox_style
オプションです。
info-boxのショートコードでは、box_style="round"
のような形で、次の10種類のBoxスタイルを作ることができます。
- (指定なし)
- round
- tab
- balloon
- paper
- dashed_1
- dashed_2
- header_full
- header_no_bg
- header_no_bg_center
すでにリストの使い方を見た方は気づいたかもしれませんが、リストのショートコードと同じ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デザインの背景色やヘッダーの背景色、境界線の色を変えることができます。
- Boxデザインの背景
- ヘッダーの背景
- 境界線
変更できる部分もリストのショートコードと似ているんだね。
要素 | オプションの名前 |
---|---|
Boxデザインの背景 | bg |
ヘッダーの背景 | header_bg |
リストの色 | color |
境界線 | border |
選択可能な色は現在次のような7色があります。
配色 | 指定 |
---|---|
グレー | gray |
赤 | red |
青 | blue |
オレンジ | orange |
緑 | green |
ピンク | pink |
紫 | purple |
たとえば背景をグレー、ヘッダーの色を青、境界線を無しにするときには、次のようになります。
※ 見やすさのために改行しています。
[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]
いろいろなスタイル
では、ここまで紹介した方法を使って、いろいろなスタイルを表示してみたいと思います。ぜひお好みのスタイルを見つけてください。
コメントを残す