テスト投稿9つ目です。画像を左回りで掲載してから文章を入れます。縦長の画像にしたので画像の横から文章が表示されると思います。

test5.jpg
画像が入っている「a」タグの終了タグ「/a」の後ろで「改行」をしてから文章を書き始めました。
どうでしょう?



ちゃんと画像の横に文章が入っていますね。
しかも上から!!
そういう設定がCSS上でされているんでしょうね。



こうやって見たらわかるんですが、画像のすぐ横に文章が表示されてしまって見づらいですね。できれば画像の横に余白がほしいですね。

.article__content img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}


これが多分、画像の設定です。
ここに「margin-right:10px」を入れてもいいんですが、そうすると、例えば横長の画像の場合も右に余白が入ってしまうので、中央寄せの意味がなくなりますね!
このCSSに直接記述するのはやめて、記事を書いているこの画面上で、「a」タグの中に「style="margin-right:10px;"」を入れてあげればいいと思います。



文字が画像の右側に表示されているわけですが、これを解除するためには「<br clear="all">」を入れると、画像の下に文章が移動しますので。
何を言っているのか意味がわからないでしょうが、このページを見たらわかるでしょう?
「できれば画像の横に余白がほしいですね。」のすぐ横に「<br clear="all">」を入れたので、次のCSSの記述からは画像の下に表示されるようになっております。

カテゴリ「テスト投稿1」の最新記事

この記事へのコメント