Gutenberg(グーテンベルク)エディタで、画像に枠を設定してみる【WordPress・CSS】

枠
藤依しの
藤依しの

WordPressの新エディタに苦戦する藤依しのです。
今回は、『Gutenberg(グーテンベルク)エディター』で画像に枠線を付けるため、ちゃちゃっとCSSを追加します。

まず、一般的な枠線を付けるためのCSSがこちら。

.waku {
border: 1px #CCCCCC solid;
}

#CCCCCCはお好みの色に変えてください。
今までのエディタ(クラシックエディター)ではこれで終わりです。

クラシックエディターの場合
クラシックエディターの場合はこれで問題ない


同じく『Gutenbergエディター』の追加CSSに『waku』を設定してみます。
分かりづらいですが、ここでCSSが設定できます。

CSSの設定場所

CSSを適用すると、こうなります。

Gutenbergエディターの場合
藤依しの
藤依しの

…何かおかしくねぇ?

スポンサーリンク
スポンサーリンク

新エディタの追加CSSクラスは、適用先が違う

藤依しの
藤依しの

ちなみにグーテンベルクでは画像を『右揃え・中央揃え・左揃え』にすると、CSSがおかしくなります。

中央揃え

なぜこうなるかというと、新エディターのCSSは画像(img)に対して適用されるわけではないからです。

藤依しの
藤依しの

HTMLを確認すれば分かる通り、『.waku』というクラスは『divタグ』に対して適用されているのです。

そしてこの『.wp-block-image』というクラスのdivタグは、画像を左右中央に揃えると横幅いっぱいまで広がるので、結果ああなるわけですね。

要素の詳細

グーテンベルクはブロック単位で要素を並べていくビジュアルエディター。

画像を追加する場合はまず『.wp-block-image』クラスで作られたブロックが用意され
その中に『img』として画像が配置されます。

クラシックとグーテンベルクの違い

クラシックエディターでは、CSSの適用先は画像そのものでしたが
どうやらグーテンベルクでは、画像ではなくブロックに対して適用される仕様になっているみたいですね。

div内の『img』に対して適用するように変更

藤依しの
藤依しの

というわけで、CSSをこのように変更します!

.waku img {
border: 1px #CCCCCC solid;
}

こうすることで、ちゃんと画像だけに枠線が表示されます。

CSSを適用する

ちなみに当たり前ですが、CSSを変更することでクラシックエディター側の画像には枠線が表示されなくなります。

たとえばCSSに別な名前を付けて

.wp-block-waku img {
border: 1px #CCCCCC solid;
}

のようにすることで解決しますが、わざわざ分けたくないという人は
この際、過去の記事をグーテンベルクに移行するって手もあります。

クラシック ⇛ グーテンベルクへの移行方法

藤依しの
藤依しの

移行自体はめっちゃ簡単です。

投稿画面を開いて、クラシックエディターで作成されたブロックの右上の『︙』
そこから『ブロックへ変換』を選ぶだけ。

ブロックへ変換

ただし、
ブロックへ変換した画像は、右側ブロックメニューから『高度な設定』を選び、自分で設定しなきゃいけません。

CSSの設定

絶妙に不親切なので、時間に余裕がない場合はわざわざ移行せず、CSSを分ける方法で設定するのが良さそうです…

ちなみにこれは、あくまで『Gutenbergエディター』を使用している場合に限ります。
プラグインから『Classic Editor』を有効化している場合は、当てはまりません。

藤依しの
藤依しの

とはいえ、いずれ『Classicエディター』はなくなり、完全に『Gutenbergエディター』へ移行するでしょうから、今のうちに新しいエディターに慣れておくのも良いかもしれませんね。

それでは。