【Cocoon】段落ブロックのスタイル・配色カスタマイズ

Cocoonブロックスタイル
WordPress
記事内にプロモーションを含む場合があります。

Cocoonのブロックエディターは種類がたくさんありますね。
たとえば

左吹き出し

とか

とか。
ボーダー、スタイル、色設定を組み合わせると装飾パターンはかなり豊富!
自分でCSSを設定すると少し手間ですが、Cocoonは最初から用意されているのですごく便利ですね。

WordPressを始めた頃はアイコンブロックや案内ブロックをデフォルトの配色で使っていたんですが、このサイトの配色がグレージュ+黒なので全体が調和するような配色にカスタマイズしてみました。

Cocoon設定 > エディター タブで Gutenbergエディター にチェックを入れるとCocoonのブロックエディターが使えるようになります。

吹き出しの幅を伸縮させるカスタマイズはこちら。

段落ブロックの設定を調整

初期設定を上書きして表示位置を調整しました。

.is-style-information-box, .information-box,.information, .is-style-question-box, .question-box, .question, .is-style-alert-box, .alert-box, .alert, .is-style-memo-box, .memo-box, .is-style-comment-box, .comment-box, .is-style-ok-box, .ok-box, .is-style-ng-box, .ng-box, .is-style-good-box, .good-box, .is-style-bad-box, .bad-box, .is-style-profile-box, .profile-box, .common-icon-box, .has-box-style {
padding: 20px 25px;
}
.is-style-information-box::before,.information-box::before,.information::before, .is-style-question-box::before, .question-box::before, .question::before, .is-style-alert-box::before, .alert-box::before, .alert::before, .is-style-memo-box::before, .memo-box::before, .is-style-comment-box::before, .comment-box::before, .is-style-ok-box::before, .ok-box::before, .is-style-ng-box::before, .ng-box::before, .is-style-good-box::before, .good-box::before, .is-style-bad-box::before, .bad-box::before, .is-style-profile-box::before, .profile-box::before {
top: 0;
left: 25px;
width: auto;
margin-left: 0 !important;
padding-right: 0;
border: none;
font-size: 28px;
}
.is-style-question-box::before, .question-box::before, .question::before, .is-style-alert-box::before, .alert-box::before, .alert::before, .is-style-information-box::before, .information-box::before, .information::before, .is-style-ok-box::before, .ok-box::before {
background: #f4f3f1;
border-radius: 50%;
}

※追記1:アイコンのボーダー非表示をひとまとめに設定しました。
※追記2:アイコンの位置がPC、モバイルとも同じ位置に表示されるよう固定値に変更しました。

情報ボックス

お知らせなど。

.is-style-information-box, .information-box, .information {
background: #edf0f1;
border: 1px solid #5f92a4;
}
.is-style-information-box::before,
.information-box::before,
.information::before {
color: #5f92a4;
}

質問ボックス

質問とか疑問。

.is-style-question-box, .question-box, .question {
background: #efece3;
border: 1px solid #ab8769;
}
.is-style-question-box::before, .question-box::before, .question::before {
color: #ab8769;
}

アラートボックス

アラート。注意書き。

.is-style-alert-box, .alert-box, .alert {
background: #f6efec;
border: 1px solid #bc6c75;
}
.is-style-alert-box::before, .alert-box::before, .alert::before {
color: #bc6c75;
}

メモボックス

メモ。

.is-style-memo-box, .memo-box {
background: #f3f0ea;
border: 1px solid #5d813f;
}
.is-style-memo-box::before, .memo-box::before {
color: #5d813f;
}

コメントボックス

コメント。

.is-style-comment-box, .comment-box {
border: 1px solid #a9b2b7;
background-color: #f0f0f0;
}
.is-style-comment-box::before, .comment-box::before {
color: #a9b2b7;
font-weight: 900;
}

OKボックス

・良い例1
・良い例2
・良い例3

.is-style-ok-box, .ok-box {
background: #eeebe7;
border: 1px solid #88b2d1;
}
.is-style-ok-box::before, .ok-box::before {
color: #88b2d1;
}

NGボックス

・悪い例1
・悪い例2
・悪い例3

.is-style-ng-box, .ng-box {
background: #eeebe7;
border: 1px solid #9e002c;
}
.is-style-ng-box::before, .ng-box::before {
color: #9e002c;
}

グッドボックス

・良い例1
・良い例2
・良い例3

.is-style-good-box, .good-box {
background: #eeebe7;
border: 1px solid #9da958;
}
.is-style-good-box::before, .good-box::before {
color: #9da958;
}

バッドボックス

・悪い例1
・悪い例2
・悪い例3

.is-style-bad-box, .bad-box {
background: #eeebe7;
border: 1px solid #8f4547;
}
.is-style-bad-box::before, .bad-box::before {
color: #8f4547;
}

プロフィールボックス

あるあり
この記事を書いた人。

.is-style-profile-box, .profile-box {
background: #efefef;
border: 1px solid #5b7e90;
}
.is-style-profile-box::before, .profile-box::before {
color: #5b7e90;
}

プライマリー

装飾用ボックス1

.is-style-primary-box, .primary-box, .sp-primary, .primary {
background-color: #e5e8e6;
background-image: radial-gradient(#ffffff 10%, transparent 10%), radial-gradient(#ffffff 10%, transparent 10%);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
border: 1px solid #004a61;
color: #004a61;
}

セカンダリー

装飾用ボックス2

.is-style-secondary-box, .secondary-box {
background-color: #eae7ef;
background-image: radial-gradient(#ffffff 10%, transparent 10%), radial-gradient(#ffffff 10%, transparent 10%);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
border: 1px solid #692751;
color: #692751;
}

サクセス

装飾用ボックス3

.is-style-success-box, .success-box, .sp-success, .success {
color: #605e61;
background-color: #eaeaea;
border: 1px solid #a6a1aa;
}

インフォ

最初の情報ブロックと同じ配色にしようと思ったけど少し変えています。

.is-style-info-box, .info-box, .sp-info, .info {
border: none;
background-color: #e5e9eb;
color: #005f94;
}

デンジャー

ワイン系に白抜き文字。

.is-style-danger-box, .danger-box, .sp-danger, .danger {
border: none;
color: #ffffff;
background-color: #81617d;
}

ワーニング

黄色系。文字色はデフォルト。

.is-style-warning-box, .warning-box, .sp-warning, .warning {
border: none;
background-color: #f2eccc;
}

ライト

ベージュ系。

.is-style-light-box, .light-box {
border: none;
color: #736c70;
background-color: #e6e2de;
}

ダーク

グレーに近いチョコ色と白抜き文字。

.is-style-dark-box, .dark-box {
border: none;
color: #ffffff;
background-color: #736c70;
}

付箋

共通の設定

[class*=is-style-sticky-] {
border-width: 0 0 0 15px;
color: #5a5b5c;
}

.is-style-sticky-gray {
background-color: #e3e4e8;
border-color: #6e6f72;
}

.is-style-sticky-red {
background-color: #efe9dc;
border-color: #945153;
}

.is-style-sticky-blue {
background-color: #e0ebed;
border-color: #79a1a7;
}

.is-style-sticky-yellow {
background-color: #eeeadf;
border-color: #dfaf3f;
}

.is-style-sticky-green {
background-color: #eaeedf;
border-color: #b1c586;
}

 
以上が配色変更したCocoonのブロック(ボックス)スタイルの設定でした。
Chromeのデベロッパーツールで確認しながらひとつずつ設定……結構時間がかかりましたね。
使わないボックスも多いので別の用途ができたら変更するかもしれません。

カスタマイズしたスタイルを編集画面にも反映させる

これで編集画面にもプレビューが適用されてわかりやすくなります。
カスタマイズ に追加した場合は編集画面のプレビューに反映されませんでした。

まだ他に使っていないスタイルもたくさんあってその辺りの設定はまだなんですが、使う時が来たらまた配色を考えてみようと思います。

PR 配色はこちらの本を参考にしています。

配色デザイン事典

配色デザイン事典

配色パターンが豊富。いろんな組み合わせを探せるので配色に困らない。多すぎで迷うくらい。

3色だけでセンスのいい色2

3色だけでセンスのいい色2

3色の組み合わせなのでシンプルでわかりやすく、カラーインデックスが便利。

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