wordpressで画像の回り込みを解除する

ビジュアルエディター上で改行を打ち画像の下に文章を打ち込んでいるはずなのにちょっとズレ込んで被さってしまう。

プレビューではキッチリ収まっているのに投稿後スマホなどで確認するとズレている、など。改善が必要だと思い調べて見ました。

状態としてはこんな感じです。

↑改行を打っているのに画像の横に文字が回り込んでいます。

これを改善するのに何か対策を!と調べてみると・・・

タグを打ち込むという方法があるらしい事がわかりました。

ただ僕はあまりタグに詳しくないので簡単にタグを挿入出来る方法を探しました。

wordpressのプラグイン⇒新規追加⇒検索⇒TinyMce clear float。

インストールを済ませたら有効化します。

するとビジュアルエディターの隅っこにこんなアイコンが追加されます。

ここをポチッと押すとこんな感じでタグが入ります。

回り込みが防げているのがわかります。

画像を挿入した後、画像をクリックするとこんな感じの画面になります。

左から順に

画像を左寄せしてテキストを右側に周りこませる

画像をセンターにしてテキストの回り込みを禁止

画像を右寄せしてテキストを左側に回り込ませる

画像を左寄せしてテキストの回り込みを禁止

。

ただこの方法だと画像の下が空き過ぎる気がします。

体裁はどちらがいいのかと言うとタグを打ち込んだ方が、ムダが無く綺麗に見える気がします。

追記

以前ちょこっとだけwebのデザインをやっていた頃には表組をしてそこに画像・テキストを貼りこんでいく、という手法でした。

当時はまだCSSなどが新しい技術だった様に思います。

上記の様な表をキッチリpixel単位で指定してそのピクセル通りの画像やバナーを貼りこんで行くという手法です。

今は枠線が見える様にしてありますが実際は枠線サイズ0、線は表示しない様にします。

なんでこんな面倒な事しているのかというと、モニターの解像度に関係してきます。

ある程度のサイズ以下になると綺麗に配置されている筈のテキストや画像のバランスが見ている方のモニター解像度によって表示がズレるのです。

たまに見かけますよね(^^;

なのでピクセル単位で指定しておくと横スクロールのバーが表示されデザインが崩れないのです。

今もデザイン性の高いサイトではやっているのかも知れませんが。

Also published on Medium.