Cocoon白抜きボックスをおしゃれにカスタマイズ！複数デザインの使い分け方法

Cocoonの「白抜きボックス」は、箇条書きやカスタムカラーが使えるシンプルな万能ボックス。

初心者から上級者まで多くのブロガーが愛用していますが、「もっとおしゃれにしたい」「複数デザインを記事ごとに使い分けたい」と思う場面もありますよね。

そこでこの記事では、初心者でもわずか5分で設定できる 15種類のスタイリッシュな白抜きボックスデザイン を、ワンクリックで切り替える方法をご紹介します。

完成コードは記事後半で有料公開中。

15種類のデザインを即導入でき、有料テーマのような操作性とデザイン性をCocoonで手に入れられるのが大きな魅力。このサイトでも実際に愛用しているおすすめカスタマイズです。

こんなデザインが可能に！Cocoon白抜きボックスのカスタマイズ例

各スタイルの具体的なCSSはこちらのボックスデザイン記事で確認できます。

以下、各スタイルの特徴、使用例、実際の表示サンプルを掲載しますので導入の参考にしてください。

以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。

白抜きボックスの使い方｜基本操作と編集の流れ

Cocoonの「白抜きボックス」は、WordPressの編集画面で簡単に操作可能。以下のステップで設定しましょう。

Cocoonカスタマイズ時の注意点と特徴まとめ

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

• スキンによる影響
  この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • 関連記事 バックアップ＆復元方法
    

• サーバー設定の影響
  WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
  

Cocoon白抜きボックスの実装手順｜完成コードのご案内（有料）

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

• PHP＋CSSの完成版コード（コピペで導入可能）
• 15種類のデザインをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で「完成形の白抜きボックス」を導入したい方はぜひご活用ください。