【Cocoon】白抜きボックスのカスタマイズ｜おしゃれデザインを追加+ワンクリックで切り替え

Cocoonで記事を装飾する方法として「段落ブロック」がありますが、「リストやボタンも入れたい…」と思ったとき、中にブロックを組み込む用途には向いていません。

そこで今回は、Cocoonの白抜きボックスを活用した「デザイン拡張カスタマイズ」をまとめました。

このカスタマイズを入れておくとこんなことができるようになります。

後半では、実際に当ブログで使っている完成コードもそのまま公開しています。

コピペベースで導入できるので、

• HTMLやCSSが苦手な方
• デザイン調整を時短したい方
• Cocoonをもっと使いやすくしたい方

にもおすすめです。

Cocoon白抜きボックスのデザイン一覧

白抜きボックスは「シンプルで使いやすい」のが魅力。

ただ、標準デザインだけだと少し物足りなく感じることもあるので、用途ごとに使い分けしやすいように実際に使っているデザインを整理していった形です。

例えば、

• 通常解説 → 細線
• 注意ポイント → 太線
• 補足 → 付箋風
• 体験談 → 紙風

のように使い分けるだけでも記事全体が読みやすくなります。

しかも、エディタからワンクリックで切り替えできるので、「今回はどれを使おうかな」くらいの感覚で使えます。

色設定も自由なので、サイト全体の雰囲気に合わせやすいのも便利です。

では、デザインを用途別にご紹介します。

本文になじむ｜基本枠デザイン

まずは普段使いしやすい基本系は個人的にも使用頻度がかなり高いです。特に「実線（細線）」は、どんな記事にも合わせやすくて万能。装飾感を出しすぎず、自然に情報整理できます。逆に「角丸」を使うと少し柔らかい雰囲気になるので、

• 初心者向け記事
• 雑記系
• 会話調コンテンツ

とも相性がいいです。

影付き

重要ポイントを目立たせる｜強調・注意向け

ここは「読者の視線を止めたい時」に便利です。特に文章量が増えるほど「どこが重要なのか」が埋もれやすく、そんな時に、太線、付箋風左ラインのような装飾を入れるだけで読みやすさが変わります。派手すぎないので、Cocoonのシンプルさとも相性がいいです。

記事の雰囲気をつくる｜世界観・装飾系

このあたりは、記事全体の雰囲気づくりに便利です。

特に、紙風、ノート風、ステッチ系は、少し読みもの感が出るので体験談やレビュー系記事と相性が良いです。雑記や感想系で使うことが多いですが、装飾を少し変えるだけでも記事の印象は変わります。「なんか読みやすい」と感じる記事はこういう細かい部分が意外と効いていたりします。

自分でデザインしたい方向けに、各スタイルの具体的なCSSはこちらの記事で確認できます。

白抜きボックス以外にも便利な装飾がたくさんあります。Cocoon装飾ブロックガイドもあわせてご覧ください。

Cocoon白抜きボックスの基本操作（使い方）

この記事ではカスタマイズ方法を中心に解説していますが、はじめて使う方でも迷わないように基本操作を簡単にまとめておきます。

Cocoonカスタマイズ時の注意点

基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。

Cocoon白抜きボックスの実装手順（完成コードあり）

導入コード（特にCSS）は自分で調べて作ることもできます。

ただしその場合、デザインの統一や優先度調整など細かな調整が必要になります。

有料パートでは、実運用済み・調整済みの完成版コードをそのまま公開。

「CSSを探して微調整する時間」をなくし、すぐに完成形から使い始められます。

1回でも装飾探しに30分以上かけたことがあるなら、このコードはその時間をすぐに回収できます。

「装飾の自由度と、作業効率」その両方を手に入れたい方へ。

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。