ショートコードで横並びのレイアウトを作る方法

Muromachiで横並びのレイアウトを作るときは、splitとsplit_itemというショートコードを使うと便利です。

言葉で説明すると分かりにくいもしれないので、まずはこちらをご覧ください。

ショートコードを使ってこんな感じのレイアウトを作ることができます。

次のように画像や吹き出しの周りをsplit_itemで囲み、全体をsplitで囲むことで上のようなレイアウトを作ることができます。

[split]
[split_item]
画像
[/split_item]

[split_item]
[fukidashi border="gray" bg="white"]...[/fukidashi]
[/split_item]
[/split]

2020年8月9日ショートコードで画像の横に吹き出しを追加する方法

アイテム数を変更するとき

先ほどは横に2つ並べたレイアウトを作りましたが、itemというオプションを使って、もっと多くのアイテムを横に並べることもできます。

itemが3のとき

まずは横に3つ並べたいとき（アイテム数が3のとき）について見ていきましょう。

splitのショートコードでitem="3"と指定します。

先ほどと同じように、それぞれをsplit_itemで囲み、全体をsplitのショートコードで囲んでいます。

[split item="3"]
[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]
[/split]

itemが4のとき

横に4つのアイテムを並べたいときも、ここまでと同じ方法で並べることができます。

[split item="4"]
[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]
[/split]

itemが5のとき

横に5つのアイテムを並べたいときも、これまでと同じですね。
※ 現在は最大5つのアイテムに対応しています。

[split item="5"]
[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]
[/split]

itemが2のときは指定しなくてOK

デフォルトの状態ではアイテム数が2に設定されています。
横にアイテムを2つ並べたレイアウトを作りたいときには、itemオプションは何も指定しなくて大丈夫です。

[split]
[split_item]
画像
[/split_item]

[split_item]
[fukidashi border="gray" bg="white"]...[/fukidashi]
[/split_item]
[/split]