画像付きの記事を作成していて、画像を左寄せにすればその横に文章を回りこませることができます。そこまではいいのですが次の文から見出しを設定して段落を分けようとすると、画像の横に見出しが来てしまいます。
これだと不恰好なので、画像の下に見出しが来るようにしたいです。原因である画像の回り込みと、見出し＜Hタグ＞とが干渉するのを解除したいとおもいました。
STINGER8の場合
私の使用しているテーマ「STINGER8」には、画像の回り込みを解除する機能が備わっていました。
テキスト編集に切り替えると「回り込み解除」というボタンが用意されています。こちらを回り込みをさせたい始点と終点で使ってこのように設定します。
<div class="clearfix">
回り込みさせる画像と文章
</div>
次の段落の見出しの＜Hタグ＞
これで見出しが画像の下にくるようになりました。
clearfixを自分で設定する
テーマで用意されていない時は自分でclearfixを設定します。
外観→テーマの編集からstyle.cssを開いてこちらを書き加えます。
.clearfix:after {
content:" ";
display:block;
clear:both;
}
これでclearfixというclassが使えるようになるので、先ほどと同様に回り込みさせたい所を<div class="clearfix"></div>で囲みます。
これで</div>以下では画像の回り込みが解除されます。
プラグインを使用する
プラグインで同様の機能を追加することができます。
TinyMCE Advanced
TinyMCE Clear Float
このふたつのプラグインをインストールして有効化すると、フロートの回り込みを解除するボタンが編集画面に追加されます。
回り込みを解除したい所でボタンを押せば、回り込みを解除することができます。
まとめ
画像の回り込みを解除して、次にくる段落の見出しと干渉しないようにしてみました。