WP Cocoon スキンのカスタマイズ SILK

CocoonのスキンSILKに関する細かな不具合の修正、カスタマイズ方法を簡潔に記載しておきます。

グループブロックに色がつかない不具合　SILK Cocoon WP

以下のコードを Cocoon Child: style.css に追加して保存する。

//グループブロックに色をつける
.is-style-sticky-green {
border-color: #81c784;
background: rgba(200, 230, 201, 0.25);
}
.is-style-sticky-blue {
border-color: #64b5f6;
background: rgba(187, 222, 251, 0.25);
}
.is-style-sticky-red {
border-color: #e57373;
background: rgba(255, 205, 210, 0.25);
}
.is-style-sticky-yellow {
border-color: #ffd54f;
background: rgba(255, 213, 79, 0.25);
}

見出しH2のナンバリング（通番表示）をしない

以下のコードを Cocoon Child: functions.php に追加して保存する。

//H2 見出しナンバリング　オフ
define('SILK_COUNTER', false);

付箋ブロックの色を薄くした　SILK Cocoon WP

付箋ブロックの色合いが濃いのが気になっていました。色を変えるのは面倒なので、色はそのままにしておいて透明度を上げました。結果的に淡い色になっています。

/*付箋ブロックの色*/
.is-style-sticky-green {
border-color: #81c784AD;
border-left-width: 3px;
background: rgba(200, 230, 201, 0.05);
}
.is-style-sticky-blue {
border-color: #64b5f6AD;
border-left-width: 3px;
background: rgba(187, 222, 251, 0.05);
}
.is-style-sticky-red {
border-color: #e57373AD;
border-left-width: 3px;
background: rgba(255, 205, 210, 0.05);
}
.is-style-sticky-yellow {
border-color: #ffd54fAD;
border-left-width: 3px;
background: rgba(255, 213, 79, 0.05);
}