文字の回り込み解除。

※『カテゴリー：WORDPRESS』は、主に自分のための覚書です。

文字の回り込み解除。

 

普通に「投稿－新規追加」の「ビジュアル」のページで「アップロード／挿入」から「画像を追加」する。

 

画像の「配置」を左寄せにしているので文字が回り込む。

ちなみに「HTML」のページで見ると…
<img class=”alignleft size-full wp-image-802″ title=”20090112″ src=”アップロードする画像があるフォルダ名/20090112.jpg（←画像ファイル名）” alt=”20090112″ width=”142″ height=”106″ /></a>配置を左寄せにしているので文字が回り込む。

例えば、左寄せの画像を複数続けると…

←ひとつめの左寄せ画像。

←ふたつめの左寄せ画像。

画像が回り込みまくってしまう。

ちなみに、「HTML」を見てみると…

<img class=”alignleft size-full wp-image-802″ title=”20090112″ src=”アップロードする画像があるフォルダ名/20090112.jpg（←画像ファイル名）” alt=”20090112″ width=”142″ height=”106″ /></a>←ひとつめの左寄せ画像<img class=”alignleft size-full wp-image-802″ title=”20090112″ src=”アップロードする画像があるフォルダ名/20090112.jpg（←画像ファイル名）” width=”142″ height=”106″ /></a>←ふたつめの左寄せ画像。

こんな感じ。

非常に気持ち悪い並び…。

あたしとしては画像を縦に並べたい！

しかしよくわからない。

参考としたのはこのページ。

小粋空間：CSS の after 擬似要素で回り込みを解除する

このCSSを操作する方法は意味がまだわからないので、いずれわかって来たときにやることとして、（問題棚上げ。）こちらで書かれている、「３．１ 後続の要素に clear プロパティを与える」という方法を用いることに。（これならなんとなくわかりそうだから。）←いい加減。

１．まず、普通に「投稿－新規追加」の「ビジュアル」のページで「アップロード／挿入」から「画像を追加」をする。

←ひとつめ。

←ふたつめ。
 

 

２．「HTML」ページに移って、

<img class=”alignleft size-full wp-image-802″ title=”20090112″ src=”アップロードする画像があるフォルダ名/20090112.jpg（←画像ファイル名）” alt=”20090112″ width=”142″ height=”106″ /></a>←ひとつめ。<p style=”clear:both”><img class=”alignleft size-full wp-image-802″ title=”20090112″ src=”アップロードする画像があるフォルダ名/20090112.jpg（←画像ファイル名）” alt=”20090112″ width=”142″ height=”106″ /></a>←ふたつめ。</p>

３．こんな感じ。
←ひとつめ。

←ふたつめ。

 

しかしこれ以降「ビジュアル」ページでENTERキーを押す度に、文字が<p style=”clear:both”>～（入力した文字）～</p>で囲まれてしまうのはあまり良くない現象なのかもしれません。

でも、また良い方法が見つかるまでとりあえずこの方法で記事を書いていこうと思います。

 

2009/2/15 「文字の回り込み解除。２」として追記あり。