今回は『Cocoonの囲み枠（ボックス）の種類と使い方』を解説していきます。
Cocoonなら専門知識不要で囲み枠を簡単に使うことができます。
記事内で囲み枠を使えば見栄えが良く読みやすくなるので、ぜひ参考にしてみてください。
囲み枠の中でリストタグを使う場合の注意点もお伝えしますので、合わせてチェックしておきましょう。
動画でも解説しています。
Cocoonの囲み枠（ボックス）の使い方【クラシック編】
ここではクラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックで囲み枠（ボックス）を使う方法をお伝えしていきます。
囲み枠はどちらも『スタイル』メニューから選択します。
【クラシックエディターのビジュアルモード】 
【Gutenbergのクラシックブロック】 
なお、操作手順は全く同じなので、ここではクラシックエディターのビジュアルモードを使って解説していきます。
クラシックで利用できる囲み枠の種類
クラシックで利用できる囲み枠は以下の５種類で、各ボックスの中にも複数のパターンがあります。
クラシックで囲み枠を使う手順
まずは囲み枠で囲むテキストを入力して選択し、『スタイル』メニューをクリックします。
設置する囲み枠を選択します。
クラシック編の囲み枠の設置は、これで完了です。
リストタグを利用する場合の注意点
リストタグを設定してから囲み枠を使うと、各リストごとに囲まれてしまいます。
このような失敗をしないために、上下に1段落ずつスペースを空けてからリスト形式の箇条書きを作ります。
そして、上下のスペースも含めて選択して、スタイルから囲み枠を設定します。
このように、上下のスペースにも囲み枠が設置されますので、
不要部分をDeleteキーで削除すると、リスト形式への囲み枠の設置が完了となります。
Cocoonの囲み枠（ボックス）の使い方【ブロック編】
ここからはGutenbergのブロック機能を使った囲み枠の設置方法を解説していきます。
ブロックで利用できる囲み枠の種類
まず『ブロックの追加』をクリックして『すべて表示』へ進みます。
クラシックと同様に以下の５種類の囲み枠が利用できます。
さらに、Cocoon汎用ブロックにも２種類の囲み枠が用意されています。
52種類のアイコン、枠・背景・文字は31色から選択可能
同じく、52種類のアイコン、枠・背景・文字は31色から選択可能
同じく、52種類のアイコン、枠・背景・文字は31色から選択可能
このように、Cocoonの囲み枠はブロック機能を利用したほうが、たくさんの種類から選択できます。
Cocoonブロックで囲み枠を使う方法
Cocoonブロックの囲み枠は、最初に設定したい囲み枠を選択します。
右上の設定（歯車マーク）をクリックすると、囲み枠の種類を選択できます。
囲み枠内の文章は、囲み枠の中をクリックすると入力できるようになります。
また、囲み枠内で『ブロックを追加』をクリックし、リストブロックを選択すれば、囲み枠内にリスト形式の箇条書きを設置することもできます。
Cocoon汎用ブロックで囲み枠を使う方法
『ブロックを追加』からCocoon汎用ブロック内のボックスを選択します。（どれを選んでも使い方は同じです）
右上の設定（歯車マーク）をクリックすると、囲み枠のアイコンが選択できます。
また、右側の設定メニューを下にスクロールすると、枠・背景・文字の色が選択できます。
このように、Cocoon汎用ブロックのボックスを利用するとカスタマイズ性の高い囲み枠を作ることができます。
まとめ
今回は『Cocoonの囲み枠（ボックス）の種類と使い方』を解説してきました。
通常ならCSSなどの専門的な知識が必要な囲み枠の設置も、Cocoonなら簡単に利用することができましたね。
特にCocoon汎用ブロックのボックス機能はカスタマイズ性も高いため、誰でも自分好みの囲み枠を作ることが可能です。
文章だけが続くよりも、重要ポイントなどを囲み枠で囲えば目立って読みやすくなりますので、ぜひ今回の解説を参考に使ってみてくださいね。
