Ｃｏｃｏｏｎ初心者向け　ボックス機能～文字を囲ってよみやすいブログにしよう～

※このブログは「Cocoon」で書いています。

ブログを始めて、いざ記事を書こうと思ったけど、文章がいっぱいで読みにくい・・・。

そんな時に使いたいのが、ボックス機能です。ボックスとは以下↓のように文章を枠で囲ったもの。

ボックスを使えば、文章をまとめたり、強調できたり、グッと見やすい記事になりますね！

ワードプレスのブログでは、表や吹き出しなどを使って見やすい記事を作ることができますが、ボックス機能もそのひとつ。その数、なんと８種類もあります！便利！

Cocoonのボックス機能はどんな種類がある？

新規投稿画面の左上＋ボタン「ブロック挿入ツールを切り替え」をクリックし、検索窓に「ボックス」と入力して検索します。すると、全部で８種類のボックス機能が出てきます。

見出しを自由につけられるもの（ラベルボックス/見出しボックス/タブ見出しボックス）

見出しの語句が決まっているもの　（タブボックス/アイコンボックス）

見出しがないもの（枠線・背景色のみ）　（案内ボックス/白抜きボックス/付箋風ボックス）

種類が沢山あるので、１記事に２～３種類までを使うのがよいと思います。また、ブログ全体を通しても、いつも同じボックスを使った方が、統一感があって見やすいブログになります。

あれもこれも使いすぎると余計にわかりにくい記事になるのでＮＧ！

Cocoonのボックス機能の使い方

ここでは、代表して「ラベルボックス」の使い方を説明します。

ブロック挿入ツールからボックス名を選択します。

１．ダッシュボードの「投稿」⇒「新規追加」で新規投稿画面を開きます。

２．新規投稿画面の左上＋ボタン「ブロック挿入ツールを切り替え」をクリックし、検索窓に「ボックス」と入力して検索します。ここでは「ラベルボックス」を選択。

見出しと本文を入力します。

１．「見出し」と書いてあるところに好きな見出しを入力し、枠線の中に本文を入力します。

たったこれだけです！

枠線内をリスト表示にしたい場合

１．まずはリストにしたい文章を入力します（必要なところで改行してください）

２．次に入力した文章を選択します。

３．一番左に出てくる「段落マーク」をクリックします。

４．リストを選択します。

そうすると下のようなリスト表示になります。

ためしにプレビューで見てみるとこんな感じ↓です。

枠線の色を変更できる

下記の手順で枠線の色を好きな色に変更することができます。

１．右上の設定（歯車マーク）をクリック

２. 「色設定」下の「枠の色」をクリック

３．好きな色を選択します。

枠線が赤くなりました。↓

同様にして、「テキストの色」と「背景の色」を変えることも可能です。

※「アイコンボックス」、「案内ボックス」、「付箋風ボックス」は色の変更ができません。右上の「設定（歯車マーク）」⇒「ブロック」⇒「スタイル設定」⇒「タイプ」より、様々なタイプを選択することができます。

カラーパレットの色を自由にカスタマイズできる（６色まで）

カラーパレットの一番下の６色は、Cocoon設定から好きな色に変更できます。

１．Cocoon設定→エディタのタブを選択する。

２．下の方にスクロールすると、「拡張カラーパレット色」がある。拡張色Ａ～Ｆに好きな色を設定できる。

設定した色が反映されました。↓　

自由にカスタマイズできる色は６色までです。

ですが、使う色は毎回決まった色の方が見やすいので、むしろ６色もカスタマイズできるのは多い方かなと思います。

まとめ：文字を囲って読みやすくしよう！

１. Cocoonのボックスは全部で８種類

２. 枠、背景、文字の色の変更も可能。（一部変更不可のものもあり）

３.ボックスを使うと記事にアクセントがついて読みやすくなる（ただし、使いすぎに注意）