【DIVER】画像の挿入に関して

画像の挿入

配置指定なし

wordpress_laptop

「恥の多い生涯を送ってきました」
(太宰治「人間失格」)

「親譲りの無鉄砲で子供の頃から損ばかりしている」
(夏目漱石「坊ちゃん」)

「山路を登りながら、こう考えた。
知に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい」
(夏目漱石「草枕」)

「国境の長いトンネルを抜けると雪国であった」
(川端康成「雪国」)

「つれづれなるまゝに、日ぐらし硯に向かひて、心にうつりゆくよしなしごとをそこはかとなく書き付くれば、あやしうこそ物狂ほしけれ」
(吉田兼好「徒然草」)

左寄せ

wordpress_laptop

「恥の多い生涯を送ってきました」
(太宰治「人間失格」)

「親譲りの無鉄砲で子供の頃から損ばかりしている」
(夏目漱石「坊ちゃん」)

「山路を登りながら、こう考えた。
知に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい」
(夏目漱石「草枕」)

「国境の長いトンネルを抜けると雪国であった」
(川端康成「雪国」)

「つれづれなるまゝに、日ぐらし硯に向かひて、心にうつりゆくよしなしごとをそこはかとなく書き付くれば、あやしうこそ物狂ほしけれ」
(吉田兼好「徒然草」)

中央寄せ

wordpress_laptop

「恥の多い生涯を送ってきました」
(太宰治「人間失格」)

「親譲りの無鉄砲で子供の頃から損ばかりしている」
(夏目漱石「坊ちゃん」)

「山路を登りながら、こう考えた。
知に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい」
(夏目漱石「草枕」)

「国境の長いトンネルを抜けると雪国であった」
(川端康成「雪国」)

「つれづれなるまゝに、日ぐらし硯に向かひて、心にうつりゆくよしなしごとをそこはかとなく書き付くれば、あやしうこそ物狂ほしけれ」
(吉田兼好「徒然草」)

右寄せ

wordpress_laptop

「恥の多い生涯を送ってきました」
(太宰治「人間失格」)

「親譲りの無鉄砲で子供の頃から損ばかりしている」
(夏目漱石「坊ちゃん」)

「山路を登りながら、こう考えた。
知に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい」
(夏目漱石「草枕」)

「国境の長いトンネルを抜けると雪国であった」
(川端康成「雪国」)

「つれづれなるまゝに、日ぐらし硯に向かひて、心にうつりゆくよしなしごとをそこはかとなく書き付くれば、あやしうこそ物狂ほしけれ」
(吉田兼好「徒然草」)

失敗例

画像を挿入するだけだとレイアウトが崩れてしまう

diver_html_try_image_insert

その時のhtmlはこんな風に記入しました。
xxx

成功例

diver_html_tag_try_success

htmlはこんな感じ
diver_html_tag_try_success

画像を挿入した下にそれぞれ、
<div class="clearfix"></div>
を記入すると回り込みのデザインが崩れません。

左寄せや右寄せで画像の横に文章を持ってこない

wordpress_laptop

「恥の多い生涯を送ってきました」
(太宰治「人間失格」)

「親譲りの無鉄砲で子供の頃から損ばかりしている」
(夏目漱石「坊ちゃん」)

「山路を登りながら、こう考えた。
知に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい」
(夏目漱石「草枕」)

「国境の長いトンネルを抜けると雪国であった」
(川端康成「雪国」)

「つれづれなるまゝに、日ぐらし硯に向かひて、心にうつりゆくよしなしごとをそこはかとなく書き付くれば、あやしうこそ物狂ほしけれ」
(吉田兼好「徒然草」)

まとめ

class指定が変わるだけ。

  • 指定なし→alignnone
  • 左寄せ→alignleft
  • 右寄せ→alignright
  • 中央寄せ→"aligncenter

十分なテキストを入れないと、

レイアウトが崩れる。

または、

<div class="clearfix"></div>
を記入。

おすすめの記事