今回はショートコードを使って、いろいろな見た目のリストを作る方法をご紹介します。
リストは使う機会が多いと思うので、オプションを使っていろいろな組み合わせに対応できるようにしました。単純計算すると、1680種類!
また、CSSの分量が増えすぎないように、スタイルはパターンとして用意しているのではなく、ひとつひとつのオプションとして用意しました。
リスト用ショートコードの基本的な使い方
Muromachiでリストを作るときには、list
のショートコードを使うと便利です。
リストスタイルを変更する
まずはリストスタイルの設定方法について見ていきましょう。
Muromachiで利用可能なリストスタイルは現在6種類。次のリストスタイルを使うことができます。
- (指定なし)
- check
- arrow
- chevron
- batsu
- none
リストスタイルを変更するにはlist_style="○○"
のように書いていきます。
リストスタイルを指定しないとき
リストスタイルを指定しないときは、list_style=""
のように書いても大丈夫ですし、list_style=””自体書かなくても大丈夫です。
リストスタイルを指定しないと次のような表示になります。通常のリストと同じ状態ですね。
- リスト1
- リスト2
[list list_style=""...]...[/list]
リストスタイルをcheckにしてみる
では、リストスタイルをcheckに指定してみましょう。listのショートコードでlist_style="check"
と指定します。
- リスト1
- リスト2
[list list_style="check" ...]...[/list]
Boxスタイルを変更する
リストのショートコードでは、info-boxのショートコードと同じようにbox_style="○○"
の形でBoxスタイルを指定することができます。
- なし(default)
- round
- tab
- balloon
- paper
- dashed_1
- dashed_2
- header_full
- header_no_bg
- header_no_bg_center
たとえばバルーン型のBoxスタイルならbox_style="balloon"
となります。
- リスト1
- リスト2
[list box_style="balloon" ...]...[/list]
Boxスタイルについてはinfo-boxのショートコードの使い方でも説明しているので、もう少し詳しい説明はこちらをご覧ください。

ヘッダーの文字を変更する
Boxのヘッダー(上でいえば「リストのタイトル」と書かれていた部分)の文字を変更するには、header="○○"
のオプションを使います。
- リスト1
- リスト2
[list header="この部分はheaderで変更" ...]...[/list]
配色を変更する
リストのショートコードでは、次のようにBoxデザインの背景色やヘッダーの背景色、アイコンや境界線の色を変えることができます。
- Boxデザインの背景
- ヘッダーの背景
- リストの色(チェックマークや矢印など)
- 境界線
ほとんどの色が変えられるんだね。
表にすると次のようになります。
要素 | オプションの名前 |
---|---|
Boxデザインの背景 | bg |
ヘッダーの背景 | header_bg |
リストの色 | color |
境界線 | border |
たとえば背景をグレー、ヘッダーとリストの色を青、境界線を無しにするときには、次のようになります。
※ 見やすさのために改行しています。
- リスト1
- リスト2
[list bg="gray" header_bg="blue" color="blue" border="none" ...]
...
[/list]
選択可能な色は現在次のような7色があります。
配色 | 指定 |
---|---|
グレー | gray |
赤 | red |
青 | blue |
オレンジ | orange |
緑 | green |
ピンク | pink |
紫 | purple |
境界線の設定をする
リストのショートコードでは境界線をborder
オプションで指定することができます。
上で見てきた背景やリストの色と同じように、境界線に色をつけるにはborder="red"
のように指定します。
反対に、境界線を表示しないようにするにはborder=”none”と指定指定してもらえば大丈夫です。
- リスト1
- リスト2
[list bg="white" header_bg="" color="blue" border="blue" ...]
...
[/list]
いろいろなスタイル
では、ここまで紹介した方法を使って、いろいろなスタイルを表示してみたいと思います。ぜひお好みのスタイルを見つけてください。
リストスタイル
リストスタイルを指定しないとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
リストスタイルがcheckのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
リストスタイルがarrowのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
リストスタイルがbatsuのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
リストスタイルがnoneのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイル
Boxスタイルがroundのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがtabのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがballoonのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがpaperのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがheader_fullのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがheader_no_bgのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがheader_no_bg_centerのとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがdashed_1のとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
Boxスタイルがdashed_2のとき
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
- リスト1
- リスト2
コメントを残す