【Cocoon初心者必見】おしゃれにカスタマイズできるCocoonボックスの活用術!

【Cocoon初心者必見】おしゃれにカスタマイズできるCocoonボックスの活用術!
スポンサーリンク

こんにちは、アリナ(@miia85_dct)です。

ブログでよく見かけるおしゃれなボックス。

どのように装飾するか、気になりますよね!

Cocoonには、おしゃれなボックスが簡単に作れるように実装されています。

プラグインを入れたり、CSSでコードを書いたりしなくてもいいんです。

使わない手はないですよね!!

ということで、可愛いアイコンや枠、ボックスを表示させる方法を備忘録として紹介します。

スポンサーリンク

Cocoonにはおしゃれなボックスが簡単に作成できる機能がある!?

キッズ_積み木の積み上げ

プラグインなしでおしゃれなボックスが実装できるので、Cocoon利用者はぜひ使ってみてください。

1. 見出しボックス

ブロックの追加 → COCOON汎用ブロック → 見出しボックス をクリック。

また、左上の青い+ボタンから「見出しボックス」と検索してもOKです。

Cocoon_見出しボックス

上記から見出しボックスをクリックすると、下のように見出しボックスが開きます。

見出しに、スタイル設定のアイコンから好きなアイコンを入れられます。

メニュー

ボックスの見出しの名前を変更できます!

また、枠や背景、文字色を好きな色に変更できます。

おすすめ
  • ABCDEF
  • 123456

2. タブ見出しボックス

ブロックの追加 → COCOON汎用ブロック → タブ見出しボックス をクリック。

また、左上の青い+ボタンから「タブ見出しボックス」と検索してもOKです。

見出しに、スタイル設定のアイコンから好きなアイコンを入れられ、見出しの名前を変更できます。

ボックスの枠や背景、文字の色も変更可能です。

絶対に行きたいおしゃれランチ
  • 恵比寿『〇〇〇』
  • 目黒『〇〇〇』
  • 代官山『〇〇〇』

3. タブボックス

ブロックの追加 → COCOONブロック → タブボックス をクリック。

また、左上の青い+ボタンから「タブボックス」と検索してもOKです。

スタイル設定のラベルで、16種類から選べます。

下記のようにボックスの枠の色や背景、文字の色は変更可能です。

ラベルや枠の色を変更できます!

デザインの種類が豊富にあります。

これはポイントです。

これはチップスです。

これはヒントです。

これはピックアップです。

これはブックマークです。

これはメモです。

これはダウンロードです。

これはブレイクです。

これはアマゾンです。

これはOKです。

これはNGです。

これはGOODです。

これはBADです。

これはプロフィールです。

4. ラベルボックス

ブロックの追加 → COCOON汎用ブロック → ラベルボックス をクリック。

また、左上の青い+ボタンから「ラベルボックス」と検索してもOKです。

見出しに、スタイル設定のアイコンから好きなアイコンを入れられ、見出しの名前を変更できます。

ボックスの枠や背景、文字の色も変更可能です。

アメリカ人気観光スポット
  • 自由の女神
  • タイムズスクエア
  • ウォルト・ディズニーワールド
おすすめメニュー
  • Aセット
  • Bセット
  • Cセット

5. 付箋風ボックス

ブロックの追加 → COCOONブロック  →  付箋風ボックス をクリック。

また、左上の青い+ボタンから「付箋風ボックス」と検索してもOKです。

スタイル設定のタイプで、5色の付箋風ボックスから選べます。

いろんな状況に応じて使い分けられますね!

例えば、箇条書きで書くとこんな感じ。

  • 〇〇スクール ← おすすめ
  • 〇〇スクール
  • 〇〇スクール

黄色の付箋風ボックスです。

赤色の付箋風ボックスです。

青色の付箋風ボックスです。

緑色の付箋風ボックスです。

6. アイコンボックス

ブロックの追加 → COCOONブロック  →  アイコンボックス をクリック。

また、左上の青い+ボタンから「アイコンボックス」と検索してもOKです。

アイコンボックスは、その名の通りアイコンがついているボックスです。

スタイル設定のタイプで、10種類から選べます。

補足情報(i)
プラスの補足情報を伝えたいときに使えます。

補足情報(?)
疑問に思うことなどを書けます。

補足情報(!)
補足で注意したいことを書けます。

メモ
メモしたいことを書けます。

コメント
コメントを書けます。

OK
〇〇はOKなど書けます。

NG
〇〇は著作権侵害でNGなど書けます。

GOOD
GOODポイントを書くときに使えます。

BAD
BADポイントを書くときに使えます。

プロフィール
誰かのプロフィールを書くときに使えます。

7. アイコンリスト

ブロックの追加 → COCOONブロック  →  アイコンリスト をクリック。

また、左上の青い+ボタンから「アイコンリスト」と検索してもOKです。

アイコンリストを押すと下記のようにリストボックスが開くので、リストを作成します。

ボックスの枠の外側をクリックすると、スタイル設定のアイコンから好きなアイコンを選ぶことができます。

アイコンリスト
  • リスト
  • リスト
  • リスト

また、アイコンやボックスの枠、背景、文字の色が変更可能です。

ハートアイコン
  • アイコンリスト
  • 可愛いアイコン
  • いっぱい
ポイント!
  • 重要
  • イチオシ
  • やっぱこれだね!

8. 白抜きボックス

ブロックの追加 → COCOONブロック  →  白抜きボックス をクリック。

また、左上の青い+ボタンから「白抜きボックス」と検索してもOKです。

下記のようにボックスの枠の色や背景、文字の色は変更可能です。

ピンクの白抜きボックスです。

オレンジの白抜きボックスです。

グリーンの白抜きボックスです。

9. 案内ボックス

ブロックの追加 → COCOONブロック  →  案内ボックス をクリック。

また、左上の青い+ボタンから「案内ボックス」と検索してもOKです。

スタイルの設定のタイプで、8種類から選べます。

プライマリー(濃い水色)の案内ボックスです。

セカンダリー(濃い灰色)の案内ボックスです。

インフォ(薄い青)の案内ボックスです。

サクセス(薄い緑)の案内ボックスです。

ワーニング(薄い黄色)の案内ボックスです。

デンジャー(薄い赤色)の案内ボックスです。

ライト(白色)の案内ボックスです。

ダーク(暗い灰色)の案内ボックスです。

Cocoonのおしゃれボックスでブログの装飾を楽しんでください

これまでCocoonで実装できるおしゃれなボックスを紹介してきました。

記事中で、適度にボックスを使用することで、文章ばかりになるのを防いでくれます。

プラグインなしで簡単にボックスが作成できるので、Cocoon利用者はぜひ使ってみてください。

この記事を書いた人

IT企業で営業・Webマーケター。
フリーランスでライター・Webデザイナーとして活動経験あり。
アメリカ・フィリピン留学、カナダ ワーキングホリデー、ヨーロッパ一周一人旅を経験。
海外渡航国 約20ヵ国。
留学や海外旅行、美容、フリーランス、買って良かったものなど役立つ情報を発信しています。
ダイエット検定1級、日本化粧品検定3級保持。

アリナをフォローする
ブログ
スポンサーリンク
アリナをフォローする
スポンサーリンク

コメント

タイトルとURLをコピーしました