「こんなことできたらいいな～」を考えました！
今回はとても使い勝手のよい「白抜きボックス」です。
このような外枠だけのシンプルなボックスです
「白抜きボックス」を使う際に、サイドバーで複数のデザインを切り替えるカスタマイズを紹介します。
Cocoonではバージョン2.6.1で段落ブロックのスタイルが追加されましたが、段落そのものの装飾のため、中にブロックを入れることができません。ちょっとしたテキストなら使いやすいのですが、改行したい長めの文章や箇条書きリストを追加したい場合などにやや不便です。
そこで、白抜きボックスが活躍します。
- サイドバーからクリックするだけで複数のスタイルが選べる
- →13スタイル準備しました
- →デザインは後からCSSで自由に変更可能
- →13スタイル準備しました
- 白抜きボックス内にブロックが入れられる（例：箇条書きリストなど）
- 同じページ内で複数のデザインが使える
- ブロックの汎用性アップ
- 実装方法は２ヶ所にコードを貼り付けるだけ
有料テーマ風の使い心地になります！
ブロックのデザイン切り替えシリーズ、他にも紹介しています。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計250件（月間約20件）購入いただいています
です
実装イメージ／Cocoon「白抜きボックス」
当カスタマイズの目的は、以下のような複数のスタイルをサイドバーから簡単に選択することです。
クリックするだけで簡単切り替え
実用性の高いシンプルなデザインを厳選しました！
元々が外枠だけのシンプルなデザインなのでカスタマイズしやすいです。
- 色はCocoon設定で設定できます（従来通り）
- 背景色、ボーダー色、文字色
- CSSが分かる方はデザインを自由に変更できます
「白抜きボックス」のスタイルは13種類
「タブ見出しボックス」のスタイルはCocoonデフォルトのほか、13種類追加しています。あまり多くてもごちゃごちゃ重くなってしまうので、違うデザインにしたい方はCSSを変更してみてください。
デフォルト
Cocoonデフォルト：通常のデザイン
スタイル 1
- 特徴:：二重線のボーダーが強調され、スタイリッシュな印象を与えます
- ボーダー： 太さ4px、スタイル: ダブル
スタイル 2
- 特徴：シンプルでクリーンな印象のボーダー。一般的な用途に適しています
- ボーダー：太さ1px、スタイル: 実線
スタイル 3
- 特徴：シンプルさを保ちつつ、少し太めのボーダーで存在感を出します
- ボーダー：太さ2px、スタイル: 実線
スタイル 4
- 特徴：破線のボーダーが遊び心を加え、目を引くデザイン
- ボーダー：太さ1px、スタイル: 破線
スタイル 5
- 特徴：破線のボーダーで、スタイル4よりも太めでしっかりした印象を与えます
- ボーダー：太さ2px、スタイル: 破線
スタイル 6
- 特徴：点線のボーダーが柔らかさを演出し、親しみやすい印象を与えます
- ボーダー：太さ2px、スタイル: ドット
スタイル 7
- 特徴：点線のボーダーがより太く、視覚的なアクセントが強いデザインです
- ボーダー：太さ4px、スタイル: ドット
スタイル 8
- 特徴：上部にのみボーダーを持つことで付箋風のデザインに
- ボーダー：太さ5px、スタイル: 実線（右・左・下はなし）
スタイル 9
- 特徴：左にのみボーダーを持つことで付箋風のデザインに
- ボーダー：太さ5px、スタイル: 実線（上・右・下はなし）
スタイル 10
- 特徴：ストライプ模様の背景が特徴的で、視覚的なインパクトがあります
- ボーダー：太さ0px、背景: 繰り返し線形グラデーション
スタイル 11
- 特徴：格子状のパターンを持つ背景で、視覚的なアクセントが強いデザインです
- ボーダー：太さ0px、背景: 線形グラデーションで形成された方眼風模様
スタイル 12
- 特徴：影付きの装飾的なデザインで、めくれた紙風のアクセントを追加します
- ボーダー：太さ0px、装飾: 右上にボーダー効果
スタイル 13
- 特徴：白のステッチ風のアクセントを追加し、柔らかくかわいい印象になります
- ボーダー：太さ0px、背景: 破線のボーダー
「白抜きボックス」の使い方
- ブロックメニューを選択
ブロックエディタで「白抜きボックス」を選択します。
- お好みのスタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
選んだスタイルがすぐに反映されます。
- 色・アイコン設定
お好みで色設定をおこなってください。
- ボックスの内容を編集
ボックス内にコンテンツを入力したら完成です。
当カスタマイズの注意点と特徴
- 検証はスキン「なし」でおこなっています
- お使いのスキンにより、「白抜き」部分に他のスタイルが入っている場合は表示が崩れることがありますのでご了承ください
- 子テーマを使うため、比較的安全におこなえます
- 当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります
- PHPでエラーがでる場合は下記をご確認ください
- サーバー側でベーシック認証（アクセス制限）を設定していないか
- →エラーが表示され編集できません
- サーバー側でWAF設定をONにしていないか
- →エックスサーバーではONにしていても影響ないようです
どちらも一時的に解除の上、作業後は設定を元に戻しましょう
実装方法／Cocoon「白抜きボックス」のデザインをサイドバーで切り替えするカスタマイズ
実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。
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 コメントはこちらへ