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

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

アイキャッチ/白抜きボックス Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

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

今回はとても使い勝手のよい「白抜きボックス」です。

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

この「白抜きボックス」にいくつかのスタイルを設定して、サイドバーでデザインを切り替えるカスタマイズを紹介します。

Cocoonではバージョン2.6.1で段落ブロックのスタイルが追加されましたが、段落そのものの装飾のため、中にブロックを入れることができません。ちょっとしたテキストなら使いやすいのですが、改行したい長めの文章や箇条書きリストを追加したい場合などにやや不便です。

そこで、白抜きボックスが活躍します。

ここがポイント
  • サイドバーからクリックするだけで複数のスタイルが選べる
    • →13スタイル準備しました
    • →デザインは後からCSSで自由に変更可能です
  • 色設定がそのまま使える
    • →段落ブロックの装飾では色固定ですが、白抜きボックスは色がお好みで設定できます
  • 白抜きボックス内にブロックが入れられる(例:箇条書きリストなど)
  • 同じページ内で複数のデザインが使える
  • ブロックの汎用性アップ
  • 実装方法は2ヶ所にコードを貼り付けるだけ(所要時間5分程度)

有料テーマ風の使い心地になります!

ブロックのデザイン切り替えシリーズ、他にも紹介しています。

よく使うブロックがありましたらお試しください!

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計250件(月間約20件)購入いただいています
はっちゃん
です
プロフィール

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

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

クリックするだけで簡単切り替え

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

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

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

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

\各スタイルのCSSはこちらを使っています/

背景色、ボーダー色、文字色は設定から自由に選べます(従来通り)

デフォルト

Cocoonデフォルト:通常のデザイン

スタイル 1

  • 特徴::二重線のボーダーが強調され、スタイリッシュな印象を与えます
  • ボーダー: 太さ4px、スタイル: ダブル
/* スタイル 1 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 4px;
	border-style:double;
}

スタイル 2

  • 特徴:シンプルでクリーンな印象のボーダー。一般的な用途に適しています
  • ボーダー:太さ1px、スタイル: 実線
/* スタイル 2 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 1px;
}

スタイル 3

  • 特徴:シンプルさを保ちつつ、少し太めのボーダーで存在感を出します
  • ボーダー:太さ2px、スタイル: 実線
/* スタイル 3 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 2px;
}

スタイル 4

  • 特徴:破線のボーダーが遊び心を加え、目を引くデザイン
  • ボーダー:太さ1px、スタイル: 破線
/* スタイル 4 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 1px;
	border-style:dashed;
}

スタイル 5

  • 特徴:破線のボーダーで、スタイル4よりも太めでしっかりした印象を与えます
  • ボーダー:太さ2px、スタイル: 破線
/* スタイル 5 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 2px;
	border-style:dashed;
}

スタイル 6

  • 特徴:点線のボーダーが柔らかさを演出し、親しみやすい印象を与えます
  • ボーダー:太さ2px、スタイル: ドット
/* スタイル 6 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 2px;
	border-style:dotted;
}

スタイル 7

  • 特徴:点線のボーダーがより太く、視覚的なアクセントが強いデザインです
  • ボーダー:太さ4px、スタイル: ドット
/* スタイル 7 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 4px;
	border-style:dotted;
}

スタイル 8

  • 特徴:上部にのみボーダーを持つことで付箋風のデザインに
  • ボーダー:太さ5px、スタイル: 実線(右・左・下はなし)

薄め背景色をつけてご利用ください

/* スタイル 8 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 5px;
	border-right:none;
	border-left:none;
	border-bottom:none;
}

スタイル 9

  • 特徴:左にのみボーダーを持つことで付箋風のデザインに
  • ボーダー:太さ5px、スタイル: 実線(上・右・下はなし)

薄め背景色をつけてご利用ください

/* スタイル 9 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 5px;
	border-right:none;
	border-top:none;
	border-bottom:none;
}

スタイル 10

  • 特徴:ストライプ模様の背景が特徴的で、視覚的なインパクトがあります
  • ボーダー:太さ0px、背景: 繰り返し線形グラデーション

色固定のため、設定は利用できません

/* スタイル 10 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 0;
	background-image: repeating-linear-gradient(-45deg,#f2f3f7 0, #f2f3f7 3px,transparent 3px,transparent 6px);/*ストライプ*/
}

スタイル 11

  • 特徴:格子状のパターンを持つ背景で、視覚的なアクセントが強いデザインです
  • ボーダー:太さ0px、背景: 線形グラデーションで形成された方眼風模様

色設定は利用できますが、方眼模様は薄いグレーのため背景は白がおすすめ

/* スタイル 11 */
.wp-block-cocoon-blocks-blank-box-1{
	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

  • 特徴:影付きの装飾的なデザインで、めくれた紙風のアクセントを追加します
  • ボーダー:太さ0px、装飾: 右上にボーダー効果

薄め背景色をつけてご利用ください

/* スタイル 12 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 0;
	position:relative;
}

.wp-block-cocoon-blocks-blank-box-1: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 rgba(0, 0, 0, 0.15);
}

スタイル 13

  • 特徴:白のステッチ風のアクセントを追加し、柔らかくかわいい印象になります
  • ボーダー:太さ0px、背景: 破線のボーダー

破線が白のため、背景色をつけてご利用ください

/* スタイル 13 */
.wp-block-cocoon-blocks-blank-box-1{
	border-radius:0;
	border-width: 0;
	position: relative;
	z-index: 0;
}

.wp-block-cocoon-blocks-blank-box-1: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の「付箋風ボックス」は不要になります。

「白抜きボックス」の使い方

  • ブロックメニューを選択

    ブロックエディタで「白抜きボックス」を選択します。

  • お好みのスタイルを選ぶ

    サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。

    選んだスタイルがすぐに反映されます。

  • 色・アイコン設定

    お好みで色設定をおこなってください。

  • ボックスの内容を編集

    ボックス内にコンテンツを入力したら完成です。

当カスタマイズの注意点と特徴

  • 検証はスキン「なし」でおこなっています
    • お使いのスキンにより、「白抜き」部分に他のスタイルが入っている場合は表示が崩れることがありますのでご了承ください
  • 子テーマを使うため、比較的安全におこなえます
  • 当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります
  • PHPでエラーがでる場合は下記をご確認ください
  • サーバー側でベーシック認証(アクセス制限)を設定していないか
    • →エラーが表示され編集できません
  • サーバー側でWAF設定を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をコピーしました