
「こんなことできたらいいな~」を考えました!
今回ご紹介するのは、Cocoonユーザーお馴染みの「白抜きボックス」です。
このような外枠だけのシンプルなボックスです
この白抜きボックスはシンプルなデザインながら使い勝手抜群!
当記事では、サイドバーから簡単にデザインを切り替えられる13種類のスタイルを準備しました。「簡単な実装でボックスデザインを選べるようにしたい!」そんな方にぴったりの方法を紹介します。

有料テーマのような操作性が手軽に実現できます!
他のブロックデザイン切り替え方法も紹介しています。よく使うブロックがありましたらお試しください!
- Cocoonタブブロック
- Cocoonブログカード
- Cocoonアイコンボックス
- Cocoonラベルボックス
- Cocoonタブ見出しボックス
- Cocoonアコーディオン(トグル)
- Cocoon新着記事・人気記事ブロック
実装イメージ|Cocoon「白抜きボックス」
当カスタマイズの目的は、以下の複数スタイルをサイドバーから簡単に選択することです。

実用性の高いシンプルなデザインを厳選しました!

元々が外枠だけのシンプルなデザインなのでカスタマイズしやすいです。
- 色はサイドバーで設定できます
- 背景色、ボーダー色、文字色
- CSSでデザインを自由に変更できます

以下、実際の白抜きボックス表示例を掲載しますので参考にしてください。
「白抜きボックス」のスタイルは13種類
「タブ見出しボックス」のスタイルはCocoonデフォルトのほか、13種類追加しています。あまり多くてもごちゃごちゃ重くなってしまうので、違うデザインにしたい方はCSSを変更してみてください。
デフォルト
デフォルト
Cocoonデフォルト:通常のデザイン
スタイル 1
二重線
- 特徴:二重線のボーダーが強調され、スタイリッシュな印象を与えます
- ボーダー:太さ4px、スタイル:ダブル
/* スタイル 1 */
.blank-box{
border-radius:0;
border-width: 4px;
border-style:double;
}
スタイル 2
実線 1
- 特徴:シンプルでクリーンな印象のボーダー。一般的な用途に適しています
- ボーダー:太さ1px、スタイル:実線
/* スタイル 2 */
.blank-box{
border-radius:0;
border-width: 1px;
}
スタイル 3
実線 2
- 特徴:シンプルさを保ちつつ、少し太めのボーダーで存在感を出します
- ボーダー:太さ5px、スタイル:実線
/* スタイル 3 */
.blank-box{
border-radius:0;
border-width: 2px;
}
スタイル 4
破線 1
- 特徴:破線のボーダーが遊び心を加え、目を引くデザイン
- ボーダー:太さ1px、スタイル:破線
/* スタイル 4 */
.blank-box{
border-radius:0;
border-width: 1px;
border-style:dashed;
}
スタイル 5
破線 2
- 特徴:破線のボーダーで、スタイル4よりも太めでしっかりした印象を与えます
- ボーダー:太さ2px、スタイル:破線
/* スタイル 5 */
.blank-box{
border-radius:0;
border-width: 2px;
border-style:dashed;
}
スタイル 6
ドット 1
- 特徴:点線のボーダーが柔らかさを演出し、親しみやすい印象を与えます
- ボーダー:太さ2px、スタイル:ドット
/* スタイル 6 */
.blank-box{
border-radius:0;
border-width: 2px;
border-style:dotted;
}
スタイル 7
ドット 2
- 特徴:点線のボーダーがより太く、視覚的なアクセントが強いデザインです
- ボーダー:太さ4px、スタイル: ドット
/* スタイル 7 */
.blank-box{
border-radius:0;
border-width: 4px;
border-style:dotted;
}
スタイル 8
付箋風 1
- 特徴:上部にのみボーダーを持つことで付箋風のデザインに
- ボーダー:太さ5px、スタイル:実線
/* スタイル 8 */
.blank-box{
border-radius:0;
border-width: 5px;
border-right:none;
border-left:none;
border-bottom:none;
}
スタイル 9
付箋風 2
- 特徴:左にのみボーダーを持つことで付箋風のデザインに
- ボーダー:太さ5px、スタイル:実線
/* スタイル 9 */
.blank-box{
border-radius:0;
border-width: 5px;
border-right:none;
border-top:none;
border-bottom:none;
}
スタイル 10
ストライプ
- 特徴:ストライプ模様の背景が特徴的で、視覚的なインパクトがあります
- ボーダー:なし
- 背景:繰り返し線形グラデーション
/* スタイル 10 */
.blank-box{
border-radius:0;
border-width: 0;
background-image: repeating-linear-gradient(-45deg,#f2f3f7 0, #f2f3f7 3px,transparent 3px,transparent 6px);/*ストライプ*/
}
スタイル 11
方眼
- 特徴:格子状のパターンを持つ背景で、視覚的なアクセントが強いデザインです
- ボーダー:なし
- 背景:線形グラデーションで形成された方眼風模様
/* スタイル 11 */
.blank-box{
border-radius:0;
border-width: 0;
background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),linear-gradient(90deg, transparent 19px, #ccc 20px);
background-size: 20px 20px;
}
スタイル 12
めくれた紙風
- 特徴:影付きの装飾的なデザインで、めくれた紙風のアクセントを追加します
- ボーダー:なし
- 装飾:右上にボーダー効果
/* スタイル 12 */
.blank-box{
border-radius:0;
border-width: 0;
position:relative;
}
.blank-box:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: #ccc #fff #ccc;
box-shadow: -1px 1px 1px rgb(0 0 0 / .15);
}
スタイル 13
白ステッチ
- 特徴:白のステッチ風のアクセントを追加し、柔らかくかわいい印象になります
- ボーダー:なし
- 背景:破線のボーダー
/* スタイル 13 */
.blank-box{
border-radius:0;
border-width: 0;
position: relative;
z-index: 0;
}
.blank-box:before{
position: absolute;
border: 2px dashed #fff;/*破線の太さ・色*/
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:5px;
z-index: -1;
border-radius:3px;
}
私はスタイル12のめくれた紙風のデザインが好きでよく使っています。シンプルで可愛い…♡
スタイル10のストライプもシンプルで良きです。ベースが「白抜きボックス」なので、リストを追加できるのも嬉しいポイントです!
付箋風も自由な色設定ができるので、実質Cocoonの「付箋風ボックス」は不要になります。
「白抜きボックス」の使い方
- ブロックメニューを選択
ブロックエディタで「白抜きボックス」を選択します。
- お好みのスタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
選んだスタイルがすぐに反映されます。
- 色・アイコン設定
お好みで色設定をおこなってください。
- ボーダー色
- 背景色
カラーパレットの色をお好みで追加・変更することもできます。
- ボックスの内容を編集
ボックス内にコンテンツを入力したら完成です。
Cocoon「白抜きボックス」カスタマイズの注意点と特徴

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。
- WAF設定
サーバーのWAF(Web Application Firewall)がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。 - ベーシック認証
- サーバー側でアクセス制限(ベーシック認証)を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
実装手順|Cocoon「白抜きボックス」のデザインをサイドバーで切り替えするカスタマイズ
実装手順は以下の2ステップ。2ヶ所にコードを設定するだけなので作業時間は5分ほどです。
PHPの設定
スタイル切り替えをエディタに追加
PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。
CSSの設定
各スタイルを指定する
CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。
ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。
特定商取引法に基づく表記 | |
---|---|
サイト名 | Turicco |
サイトURL | https://turicco.com/ |
お問い合わせ | https://turicco.com/contact/ |
購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
納品方法 | 記事公開 |
販売価格 | 500円 |
お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
返金・キャンセルについて | codoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |

Comment コメントはこちらへ