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

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

10月7日スタート月100万円ブログを作る！ 9,800円モニター先着5名

10カ月で、月100万稼ぐ出会い系ブログを作成
2025年7月に、月収100万円ブログができる
月収100万円に必要な、300記事がもらえる
10カ月間の無制限サポート
文章作成が苦手でも、サクサク書ける記事文例
一記事100円以下の、体験モニター特別価格
アフィリエイト特別単価、15万円

グループブロックに色がつかない不具合　SILK Cocoon WP
見出しH2のナンバリング（通番表示）をしない
付箋ブロックの色を薄くした　SILK Cocoon WP

グループブロックに色がつかない不具合　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);
}