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

今回はショートコードを使って、いろいろな見た目のリストを作る方法をご紹介します。

リストは使う機会が多いと思うので、オプションを使っていろいろな組み合わせに対応できるようにしました。単純計算すると、1680種類！

また、CSSの分量が増えすぎないように、スタイルはパターンとして用意しているのではなく、ひとつひとつのオプションとして用意しました。

リスト用ショートコードの基本的な使い方

Muromachiでリストを作るときには、listのショートコードを使うと便利です。

リストスタイルを変更する

まずはリストスタイルの設定方法について見ていきましょう。

Muromachiで利用可能なリストスタイルは現在6種類。次のリストスタイルを使うことができます。

リストスタイルを変更するにはlist_style="○○"のように書いていきます。

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

リストスタイルを指定しないときは、list_style=""のように書いても大丈夫ですし、list_style=””自体書かなくても大丈夫です。

リストスタイルを指定しないと次のような表示になります。通常のリストと同じ状態ですね。

[list list_style=""...]...[/list]

リストスタイルをcheckにしてみる

では、リストスタイルをcheckに指定してみましょう。listのショートコードでlist_style="check"と指定します。

[list list_style="check" ...]...[/list]

Boxスタイルを変更する

リストのショートコードでは、info-boxのショートコードと同じようにbox_style="○○"の形でBoxスタイルを指定することができます。

たとえばバルーン型のBoxスタイルならbox_style="balloon"となります。

[list box_style="balloon" ...]...[/list]

Boxスタイルについてはinfo-boxのショートコードの使い方でも説明しているので、もう少し詳しい説明はこちらをご覧ください。

2020年8月17日参考ショートコードでBoxデザインを作る方法

ヘッダーの文字を変更する

Boxのヘッダー（上でいえば「リストのタイトル」と書かれていた部分）の文字を変更するには、header="○○"のオプションを使います。

[list header="この部分はheaderで変更" ...]...[/list]

配色を変更する

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

ほとんどの色が変えられるんだね。

表にすると次のようになります。

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

[list bg="gray" header_bg="blue" color="blue" border="none" ...]
...
[/list]

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

境界線の設定をする

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

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

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

[list bg="white" header_bg="" color="blue" border="blue" ...]
...
[/list]

いろいろなスタイル

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

リストスタイル

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

リストスタイルがcheckのとき

リストスタイルがarrowのとき

リストスタイルがbatsuのとき

リストスタイルがnoneのとき

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のとき