Cocoonの画像の囲み効果が適用されない原因

ブログ運営

以前WordPressテーマCocoonの記事内画像を枠線で囲う設定を行ったのですがうまく適用されませんでした。

WordPressテーマCocoonで画像に枠の影をつける方法

その原因がCocoon公式サイトのフォーラムで紹介されていました。

本文画像設定タグの画像の囲みと拡大効果は選択するだけで有効になりますか?

無料WordPressテーマCocoon

WordPress標準エディターのGutenberg(グーテンベルク)

現在のワードプレスエディタ「Gutenberg」は2018年12月のWordPress 5.0でデフォルトエディターとなりました。

Gutenbergで「画像の追加」を行うとコードでは figure で囲まれます。

一方Cocoonの「画像の囲み効果」は p で囲まれた画像に対して囲み効果を適用しています。

そのため現状ではGutenbergで画像ブロックを追加した場合は囲み効果が適用されないようです。

p要素とfirure要素

p要素とfigure要素ではマークアップ (htmlなどによる文書構造の意味付け・定義付け)が違います。

p要素はその画像がなくなると文章の意味が通らなくなるときに使います。
画像が文脈の一部になっている場合です。

figure要素はその画像がなくなっても文章が成立するときに使います。
文章だけで意味が通じてその補足としての画像という場合です。

Gutenbergを使った画像の追加では全て figure になってしまいますが、プラグインで以前の標準エディタに戻すこともできます。

WordPressプラグインでクラシックエディタにする方法

コメント