ショートコードで画像の横に吹き出しを追加する方法

Muromachiで画像の横に吹き出しを作るときには、splitとsplit_item、fukidashiというショートコードを使うと便利です。

それでどういうデザインになるの？ということが気になると思うので、まずはこちらをご覧ください。

吹き出し部分はfukidashiのショートコードで作り、画像や吹き出しの周りをsplit_itemで囲んでいます。そして全体をsplitで囲むと上のようなレイアウトを作ることができます。

言葉で説明するとちょっとややこしいですね。コードにすると次のようになります。

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

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

サイトによってはこういった吹き出し付きのデザインよく使うと思うので、AddQuickTagやキーボードの辞書などに登録しておくといいかもしれません。

splitのショートコードについてはこちらの記事でも書いているので、よかったらご覧ください。

2020年8月9日参考ショートコードで横並びのレイアウトを作る方法

吹き出しの色を変更する時

fukidashiのショートコードで吹き出しの背景や境界線を設定するときは、bgやborderというオプションを使います。

下のデザインを見ると、背景がグレー、境界線は無しになっています。
こちらはbg="gray、border="none"と指定しています。

---

気づいた方もいるかもしれませんが、会話風の吹き出しを作るvoiceのショートコードとほとんど同じですね。

ただ、fukidashiのショートコードでは向きを指定するdirectionオプションは無効になっています。吹き出しは左向きになるのでご注意ください。

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

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

2020年8月9日参考吹き出しを作る方法