CocoonテーマでGutenbergの画像ブロックにも枠線をつける

WordPress

ぬにょす(挨拶)。

WordPressでGutenbergエディタを使っているのですが、画像に枠線をつけたくてCocoonの設定で有効にしてみたものの反映されなかったので。

外観のカスタマイズでCSSを追加しました。

/*ボーダー*/ .iwe-border figure img, .iwe-border figure amp-img { border: 1px solid #ccc; } /*ボーダー(太線)*/ .iwe-border-bold figure img, .iwe-border-bold figure amp-img { border: 4px solid #eee; } /*シャドー*/ .iwe-shadow figure img, .iwe-shadow figure amp-img { box-shadow: 5px 5px 15px #ddd; } /*シャドーペーパー*/ .iwe-shadow-paper figure img, .iwe-shadow-paper figure amp-img { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08); }
Code language: CSS (css)

Cocoon本体では<p>配下の<img>にだけスタイルを定義しているので、<figure>配下の<img>にも同じスタイルを定義した、ってだけです(笑)。

コメント

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