雑記

【Cocoon】ブロック装飾の枠線の太さを一括指定する方法

本記事に掲載しているコードはあらゆる環境での動作を保証するものではありません。
コードの追加前にはバックアップをとることをおすすめします。

Cocoonの段落ブロックを囲む枠線の太さはエディター画面の設定(ブロック>スタイル>枠線)で変更できますが、サイト全体でデザインを統一したい場合、投稿するたびに設定を変更するのは少し面倒ですよね。

追加CSSに以下のコードを追加すると、それぞれの枠線の太さを一括指定・一括変更することができます。
「◯px」の◯の部分には任意の数字を入れてください(数字が小さいほど枠線が細くなります)。

※すでに設置済みの枠線については、エディター画面で設定を変えていないもののみ変更されます。
※エディター画面での設定変更は追加CSSよりも常に優先されます。

なお、エディター画面では変更が反映されません。
公開前の確認にはプレビューをご利用ください。

実線
.is-style-border-solid{border-width:◯px;}

薄太
.is-style-border-thin-and-thick{border-width:◯px;}

実線(角丸小)
.is-style-border-radius-s-solid{border-width:◯px;}

薄太(角丸小)
.is-style-border-radius-s-thin-and-thick{border-width:◯px;}

実線(角丸大)
.is-style-border-radius-l-solid{border-width:◯px;}

薄太(角丸大)
.is-style-border-radius-l-thin-and-thick{border-width:◯px;}

コメント