WordPress(SANGO)で画像にテキストが回り込まない件について

本記事はテーマによって表現・挙動が違うこともある部分です。SANGOでの例をご紹介します。

WordPressの画像挿入で、テキストが回り込まなくなった!

以前のバージョンのWordPressでは、ブロックエディタにて画像挿入後のツールバーでの位置変更で「左寄せ(または右寄せ)」をすると、カンタンにテキストを回り込ませるのができていたのですが、アップデートによりどこかのタイミングで突如できなくなりました。(SANGO使用中に気づいた点です)

回り込まないサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


↑私の環境下ではエディタ内(編集側)では回り込んでいるのですが、フロント側(表示側)では回り込んでいません。

調べたら、以前画像挿入で吐き出されるタグが昔は、

<div class="wp-block-image">
<figure class="alignleft size-full is-resized"><img src="~~ /></figure>
</div>

という感じでdivで画像が囲まれていたのが、
今はそうではなくなり、figure自体にwp-block-imageというタグがつくようになっているせいかと思います。

対処法

これを回避するには、Wordpress標準の「グループ」というブロックを使用するのが良いです。

回り込むサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像とテキストを同じグループブロックで囲むだけです。
そうすると無事反映されます。

SWELLではそもそも回り込まない

注意点として、SWELLのテーマをお使いの方では、この方法を使ってもそもそも回り込みません

開発者さんが初心者向けに熟慮した結果のようです↓

WordPress初心者の多いSWELLでは、回り込みが必要な人よりも、「floatをよく知らず回り込みもさせたくないのに誤操作でfloatさせてしまい焦ってしまう人」の方が多数のため、現状ではこのような仕様にしています。

(そのようなケースでは不具合として報告されてくる方もけっこういらっしゃるので…。)

どうしても回り込みが必要な場合は、段落ブロックにクラスを付けて clear: none; を指定していただければと思います。

画像ブロックと段落ブロック < SWELLに関する質問

このように、回り込みに関してはテーマによって挙動が違うため留意してください。

この記事を書いた人

はなわ

パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。

お仕事のご依頼はこちらまで

パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA