※『カテゴリー: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を操作する方法は意味がまだわからないので、いずれわかって来たときにやることとして、(問題棚上げ。)こちらで書かれている、「3.1 後続の要素に clear
プロパティを与える」という方法を用いることに。(これならなんとなくわかりそうだから。)←いい加減。
1.まず、普通に「投稿-新規追加」の「ビジュアル」のページで「アップロード/挿入」から「画像を追加」をする。
2.「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>
3.こんな感じ。
←ひとつめ。
←ふたつめ。
しかしこれ以降「ビジュアル」ページでENTERキーを押す度に、文字が<p style=”clear:both”>~(入力した文字)~</p>で囲まれてしまうのはあまり良くない現象なのかもしれません。
でも、また良い方法が見つかるまでとりあえずこの方法で記事を書いていこうと思います。
2009/2/15 「文字の回り込み解除。2」として追記あり。
pタグは素のままにして、区切りたいところ(p閉じるタグの後)で<br style=”clear:both”>でもいいかもしれません。
yoshiさん。
実はあたし、「p」と「br」の区別を理解していません。
どちらも改行されることはわかるのですが、改行幅(ワープロ的な表現で言うと「行送り」)が違うことには気づきました。←次元が低い(苦笑)
「p」で囲まれているブロックに対して何らかの命令を行うものだというのは、プログラムの羅列を観察していて気付いたのですが、今だ意味を捉えられず…。
もっと根本から勉強しなきゃいけないのかも。
ちょっと面白そうな世界です。
yoshiさんが教えてくださった方法、次の投稿で試してみます。
今まであたしが試した方法とどう違うのかよくよく観察して、次への糸口を見つけたいと思います♪
ありがとうございました!
[…] 文字の回り込み解除。 « そういうことになっちゃいました。 : http://gala-tibitabi.catfood.jp/20090112/801 […]
[…] 文字の回り込み解除。 CSS の after 擬似要素で回り込みを解除する 終。 Category: […]