サイト型トップページの作り方を公開しています!Check

Cocoon白抜きボックス|複数デザインをサイドバーで切り替えるカスタマイズ

アイキャッチ|白抜きボックス Cocoon
Cocoon
記事内に広告が含まれています

「こんなことできたらいいな~」を考えました!

今回ご紹介するのは、Cocoonユーザーお馴染みの「白抜きボックス」です。

このような外枠だけのシンプルなボックスです

この白抜きボックスはシンプルなデザインながら使い勝手抜群!

  • リストなどのブロックを入れられる
  • ボーダー色・背景色の設定が自由

当記事では、サイドバーから簡単にデザインを切り替えられる13種類のスタイルを準備しました。「簡単な実装でボックスデザインを選べるようにしたい!」そんな方にぴったりの方法を紹介します。

この記事でできること
  • サイドバーから簡単操作
    • クリック操作だけで13種類のデザインが選べます。
    • デザインは後からCSSで自由にカスタマイズできます。
  • 同一ページ内で複数のデザイン使用
    • 異なるデザインを同じページ内で自由に組み合わせできます。
  • 汎用性の高いボックス設計
    • 箇条書きリストなど、ボックス内にブロックを入れることができます。
    • →背景色やボーダー色をお好みに合わせて調整可能です。
  • 簡単な実装手順
    • コードを2か所に貼り付けるだけで完了、作業時間は5分程度です。
    • 一度の設定で、サイト全体で繰り返し使えます。
    • 不要になった場合、追加したコードを削除することで元に戻ります。

有料テーマのような操作性が手軽に実現できます!

他のブロックデザイン切り替え方法も紹介しています。よく使うブロックがありましたらお試しください!

スポンサーリンク

この記事を書いた人

はっちゃんです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計340件(月間約20件)購入いただいています

実装イメージ|Cocoon「白抜きボックス」

当カスタマイズの目的は、以下の複数スタイルをサイドバーから簡単に選択することです。

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

元々が外枠だけのシンプルなデザインなのでカスタマイズしやすいです。

以下、実際の白抜きボックス表示例を掲載しますので参考にしてください。

「白抜きボックス」のスタイルは13種類

「タブ見出しボックス」のスタイルはCocoonデフォルトのほか、13種類追加しています。あまり多くてもごちゃごちゃ重くなってしまうので、違うデザインにしたい方はCSSを変更してみてください。

\各スタイルの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「白抜きボックス」カスタマイズの注意点と特徴

イメージ画像/ポイント

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

  • スキンによる影響
    • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによってはスタイルの重複等で表示が崩れる場合があります。
  • 子テーマを利用
    • 子テーマを使用することで安全性を確保しています。
    • 万が一不要になった場合は、追加したコードを削除することでデフォルトに戻せます。
  • PHPエラーが発生した場合の対処
    エラー表示が出て保存できない場合、以下の項目を確認してください。
  • WAF設定
    サーバーのWAF(Web Application Firewall)がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
  • ベーシック認証
    • サーバー側でアクセス制限(ベーシック認証)を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
スポンサーリンク

実装手順|Cocoon「白抜きボックス」のデザインをサイドバーで切り替えするカスタマイズ

実装手順は以下の2ステップ。2ヶ所にコードを設定するだけなので作業時間は5分ほどです。

PHPの設定

スタイル切り替えをエディタに追加

PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。

CSSの設定

各スタイルを指定する

CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。

カスタマイズ前にバックアップをおこないましょう。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。

特定商取引法に基づく表記
サイト名Turicco
サイトURLhttps://turicco.com/
お問い合わせhttps://turicco.com/contact/
購入方法コンテンツ販売サービス、codoc(コードク)を利用しています。
詳しくは購入者向けFAQをご覧ください。
納品方法記事公開
販売価格500円
お支払い
方法
クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについてcodoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。
シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

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