アイコンボックス内で改行する方法【SWELL】

こんな悩みに答えます。

憧れからブログテーマをCocoon→SWELLにしました。

Cocoonと使い勝手が違うので、アイコンボックス内で改行できない！となり慌てたことを覚えています。

初心者なのでブログで分からないことがあるとプチパニック！(笑)

自分で試行錯誤して見つけましたので、同じ悩みを持つ人の参考になれば幸いです。

それでは解説します。

今回の疑問点を詳しく解説

アイコンボックスとはSWELL標準の囲み装飾のことで以下のものです。

ブログを書く上で絶対に使う機能ですよね。

アイコンボックスの中で改行できない

例えば下のアイコンボックスのなかで改行したとすると、改行した文章ははじきだされてしまいます。

この文章の末尾で改行すると…改行

改行した移行は、ココにはじき出されます。

アイコンボックスの中でリストが使えない

アイコンボックスの中でリストを使おうとするとアイコンボックスが解除されてしまいます。

この囲みの中でリストを選択すると…

• 囲みの中でリストを選択すると囲みが解除されてしまって、
• アイコンボックスの中でリストを作成することができない

という現象が起きます。

しかし、どちらの悩みも解決できる方法を発見しました。

アイコンボックスの悩みを解決する方法

アイコンボックスの悩みを解決する方法は２つあります。

• グループ化を使う方法
• shift+ENTERで改行する方法

それぞれ解説していきます。

グループ化を使ってアイコンボックス内で改行する

グループ化を使うと、以下のように改行した文章をまとめてアイコンボックスで囲うことができます。

手順は次のとおり

グループ化を使ってアイコンボックス内でリストを使う

お次はアイコンボックス内でリストを使う方法です。

手順は次の通りです。

shift+ENTERで改行する方法

shift+ENTERで改行する方法は先に紹介したグループ化よりも手軽にできます。

文章の末尾で改行する際に、shift+ENTERを押すだけです。

この文章の末尾で改行しますshift+ENTER
問題なく改行できました。shift+ENTER
しかも、グループ化の時よりも上下の間隔が詰まっていて見やすいです。

ちなみにshift+ENTERはアイコンボックス内だけではなく、通常の改行の時に使うと上下の文字間隔を狭くできますので、レイアウトにこだわりがある人は使ってみると良いかもしれません。

shift+ENTERでリストを作る

ではリストに関してはどうでしょうか。

残念ながら、リストの機能を使うとアイコンボックスは解除されてしまい同時に使うことはできません。

しかし、リスト化の機能を使わず、・(中点)を使いながらリストっぽく作ることはできます。

・(中点)リスト１shift+ENTER
・(中点)リスト２shift+ENTER
・(中点)リスト３

この方法でも十分にリストとして使うことができます。

・(中点)以外のリストアイコンで、〇(まる)や×(ばつ)を使えば、視覚的には分かりやすくなるでしょう。

アイコンボックス内で改行する方法まとめ

アイコンボックス内で改行する方法は2種類あります。

・グループ化を使う方法
・shift+ENTERで改行する方法

綺麗にサイトを作りたい人はグループ化を、

簡単に手早く記事作成したい人はshift+ENTERで改行する方法を

使い分けていただくとよいと思います。

Cocoon時代にリストを四角で囲むという作業を多用していましたのでSWELLでもできて安心しました！

SWELL利用者の方の参考になれば幸いです。

最後までご覧いただきありがとうございました！