Cocoonでは、👇のような囲み枠を標準で使えます。
記事内で「大事なポイント」や「補足内容」などを囲み枠に入れると、読者にとって分かりやすい記事になりますね。
基本の設置手順
- STEP①ボックスを選ぶ
①囲み枠を入れる場所をクリックして、②左上の「＋」アイコンをクリックしましょう。
すると大量の項目が表示されるので、③ボックスで検索して、④設置するブロックをクリックします。（今回はアイコンボックスを例とします）
すると、文章の中に「囲み枠」が入ります。
【補足】
すぐ右側の「＋」マークをクリックしてもOKです。
「ボックス」で検索して探せます。
- STEP②中身を書く
続いて、囲み枠の中をクリックして下さい。
👇のように、文章を書けばOKですね。
👇のように、「太字」「文字色の変更」「マーカー」で中身の文章を強調することもできます。
- STEP③デザインを決める
Cocoonでは1つの囲み枠の中に、様々なデザインが用意されています。
今回紹介したアイコンボックスも、👇のように変更可能。
用途によって、様々な使い方ができる仕組みですね。
デザインの変更は、①囲み枠全体を選択して、②右側の「タイプ」の中から選ぶだけ。
【補足】
囲み枠のギリギリ外側をクリックして青色で囲まれた状態にすると、右側にボックスの編集画面が表示されます。（囲み枠の内側をクリックすると、中身の文章の編集になるので注意して下さい）例えば、アイコンボックスの場合は「補足情報」を選ぶと👇のデザインに変わります。
「ボックスを選ぶ」⇒「中身を書く」⇒「デザインを決める」の手順ですね。
囲み枠の種類
Cocoonに用意されている囲み枠のデザインを紹介します。
アイコンボックス（10種類）
左側にアイコンがついたボックスですね。
PC表示の時はアイコンが左・スマホ表示の時はアイコンが上に自動で変更される仕組みです。
案内ボックス（8色）
薄い色の背景のシンプルな囲み枠ですね。
プライマリー（濃い水色）
セカンダリー（濃い灰色）
インフォ（薄い青）
サクセス（薄い緑）
ワーニング（薄い黄色）
デンジャー（薄い赤色）
ライト（白色）
ダーク（暗い灰色）
ライト（白色）は背景で白色以外を利用している人向けです。
白抜きボックス
枠線のシンプルな囲み枠ですね。（枠線の色は自由に設定可能）
白抜きボックス
白抜きボックス
白抜きボックス
白抜きボックス
白抜きボックス
👇のように、枠線＋背景としても使えます。
白抜きボックス
白抜きボックス
白抜きボックス
白抜きボックス
白抜きボックスのデザイン変更
白抜きボックス全体を選択した状態で、右側の「色設定」を調整しましょう。
ボーダー色・背景色とも、様々な色が用意されています。
例えば、オレンジの枠線＋うすいオレンジの背景色なら👇の状態ですね。
ボーダーを濃い色・背景を薄い色で、同系色にするのが基本です。
付箋風ボックス（5種類）
左側に線が入ったボックスです。
灰色
黄色
赤色
青色
緑色
タブボックス（16種類）
左上にタブがついた囲み枠です。
大事なポイントなどを伝えるのに最適です。
タブのメッセージとアイコンを選択でき、枠線と背景の色も変更できます。
メモのタブと、緑色の枠線の組合せ
ポイントのタブと、オレンジ色枠線＋うすいオレンジ背景の組合せ
チェックのタブと、青い枠線＋うすい青色背景の組合せ
タブボックスの使い方
ボックス全体を選択して、右側で左上タブのラベル・枠の色・背景の色を選べます。
タブは全部で16種類から選べますよ。
見出しボックス
👇のように、見出しの部分を自由に書ける囲み枠です。
ここに囲み枠の中身の文章
アイコン・枠線の色・背景色も、全てお好みに設定できます。
アイコンは約50種類用意されています。
見出しボックスの使い方
ボックス全体を選択して、右側でアイコン・枠の色・背景の色を選べます。
自由に設定できるのが便利ですね。
タブ見出しボックス
見た目はタブボックスと同じですが、見出し部分を自由に書けるタイプですね。
囲み枠に記事の要点を書いて、読者に分かりやすく伝えましょう！
アイコン・枠線の色・背景色も、全てお好みに設定できます。
使い方は「見出しボックス」と同じです。
ラベルボックス
こちらも左上部分に見出しがついた囲み枠ですね。
囲み枠に記事の要点を書いて、読者に分かりやすく伝えましょう！
アイコン・枠線の色・背景色も、全てお好みに設定できます。
使い方は「見出しボックス」と同じです。
その他の囲み枠
吹き出し
アイコン＋名前付きの吹き出しです。読者にあなたのことを覚えてもらえる便利な囲み枠ですね。会話風で記事が読みやすくなります。
アコーディオン
クリックで開閉するボックスです。
ここに書いた内容は、クリックした時のみ表示される仕組みです。一部の人のみが対象となる補足内容を書く場合などに便利ですね。
FAQ
Q＆Aを書く時に、便利な囲み枠です。
- Q送料はかかりますか？
- A
基本送料は650円です。（北海道・沖縄は1,500円、離島は3,000円
タイムライン
手順や流れを解説する時に便利なボックスです。
- STEP①○○の実施
ここに解説文
- STEP②△△の手続き
ここに解説文
- STEP③□□の開始
ここに解説文
STEPの数は自由に増やせます。
マイクロバルーン
ボタンやバナーなどと使ってアピールをできる便利なボックスですね。
囲み枠の使い時
囲み枠を使う基本的なシーンを確認しておきましょう。
要点を入れる
囲み枠で最もよく使うシーンですね。
見出しの要点・記事の要点を入れて、読者に分かりやすく伝えます。
ポイントのタブと、オレンジ色枠線＋うすいオレンジ背景の組合せ
文章だけでは内容が伝わりにくいので、要点を入れましょう！
テキストリンクを入れる
内容が関連する記事へリンクを貼る時に使う手法ですね。
例えばこの記事は「囲み枠」の記事ですが、関連する記事として「吹き出し」の記事へリンクを貼るとしましょう。
下記のテキストリンクが基本となりますが・・・
👇のように囲み枠の中にリンクを入れて目立たせるのもOK。
リンクを目立たせて、クリック率を上げましょう！
箇条書きを入れる
箇条書きは、同時に複数の要点を伝えられる優れた手法です。
囲み枠の中に入れると、分かりやすく伝えられます。
- 要点を入れる
- テキストリンクを入れる
- 箇条書きを入れる
箇条書きはWebサイトで必須のテクニックです！
カラーパレットの拡張もOK
Cocoonでは最初から用意されて色が豊富ですが、さらに好みの色を追加できます。
👇の部分に、自由に追加できる仕組みですね。
詳しくは、👇の記事で解説しています。
好きな色を最大6色追加できますよ、
注意点
使い方をある程度統一
記事ごとに使い方がバラバラだと、読者にとって分かりにくいです。
例えば要点なら・・・
要点を「Point」＋青色で統一しておく。
注意点なら・・・
デザインや色の使い分けはお好みでOKですが、ブログ全体で使い方を統一すると分かりやすいですね。
色の使い過ぎに注意
この記事では、デモとして多くの色を使っていますが・・・
カラフル過ぎると見づらい記事となります。
使い方に統一感を持たせながら、3～4色程度を使うといいでしょう。
例えば青系を要点・緑系をリンク・補足を黄色系・注意点を赤系など、使い方を決めて派手になり過ぎないようにしましょう。
コメント