ワードプレスで画像を挿入し、文字列をつけた時、それが複数あると思ったようにレイアウトできないということがあります。メディアを挿入する時に配置の設定ができますが、この配置の設定は実はfloatを使っているということが重要です。
- 左:float:left;
- 右:float:right;
- 中央:display:block ,margin:auto;
- なし:指定スタイルなし
実際に以下のようにかつて書いた記事があります。
先ずは柱の部分にトリマーで溝を掘っておく。このトリマー加工はうるさいので晴れ間に庭での作業。
天板と底板には柱になる部分をダボではめるのでダボ穴を掘りますが、柱のダボと合わせるのが大変です。ここはちょっとしたツールを使います。Boschから出ている一種の治具です。
画像は二つとも左置きです。しかし、最初の画像の横の文章が少ないので次の画像がその下に入ってしまいます。これを避けるにはfloatをclearします。
1 2 3 4 |
.pclear{ clear: both; padding:10px; } |
これをテーマのcssに登録します。(登録方法は以前の記事をご覧ください)その上で次に来る段落にスタイルを適用します。
1 2 3 |
<p class="pclear"><a href="http://ogu-tec.net/wp/wp-content/uploads/2015/07/ファイル-2015-07-13-17-46-23.jpg"><img class=" wp-image-135 alignleft" src="http://ogu-tec.net/wp/wp-content/uploads/2015/07/ファイル-2015-07-13-17-46-23-300x300.jpg" alt="ファイル 2015-07-13 17 46 23" width="157" height="157" /></a> 天板と底板には柱になる部分をダボではめるのでダボ穴を掘りますが、柱のダボと合わせるのが大変です。ここはちょっとしたツールを使います。Boschから出ている一種の治具です。</p> <p class="pclear">もし、回り込みを継続する必要がある場合は</p> |
先ずは柱の部分にトリマーで溝を掘っておく。このトリマー加工はうるさいので晴れ間に庭での作業。
天板と底板には柱になる部分をダボではめるのでダボ穴を掘りますが、柱のダボと合わせるのが大変です。ここはちょっとしたツールを使います。Boschから出ている一種の治具です。
もし、回り込みを継続する必要がある場合は
1 2 3 |
.pkeizoku{ overflow: auto; } |
を作って適応させてやればいいようです。ただし、この以後はやはりclearしなければなりません。
ただ、エディタにスタイル登録して適用するという方法は上手くいかなかった。