文章の折り返しについて

解決
済み

度々失礼します。

今現在制作中のページに、文章と写真を載せているページがあります。
最初のパラグラフでは左側に文章、右側に写真、という配置で満足しているのですが、写真のスペースが終わった後も文章が同じ幅で下に続いていきます。
この文章を写真の下にまで伸ばしていきたいのですが、どうしたら良いかわかりません・・・

解決策をご存知の方がいらっしゃれば、是非ご教授いただきたいと思っております。
HTMLソースの編集でも対応できます。

よろしくお願いいたします。


※お返事遅くなりまして申し訳ございません!
いただいた方法でやってみようと思います。
ありがとうございました!!

※※追伸ですみません。
お答えいただきました とらしろう 様
うまくできました!
理想通りです。ありがとうございました!

みんなの回答を見る

  • Userとらしろう
  • Calender2018-11-13 14:24:12

ホームページ拝見しました。
該当のページの感じだと、恐らく標準の画像追加機能を使用されていると思います。
標準の画像機能を使用している場合、多分ですが画像がある幅はその記事全体に画像用に固定されますし、HTML編集も大丈夫とのことなので、ファイルアップロード機能を利用して画像を記事内に入れてはどうでしょうか?

手順としては以下のような感じです。

1.標準の画像機能を解除する
管理画面から該当記事の編集画面を開き「画像」欄の「画像なし」にチェックを入れて、「上記の内容で設定」をクリックする。

2.ファイルアップロード機能で画像をアップする
https://pr.toriaez.jp/navi/howto/60.html

3.アップした画像のタグを編集する
https://pr.toriaez.jp/navi/howto/61.html
埋め込む前(上記URLの手順3の後)にコピーしたタグをちょっといじって以下のようにします。

<img src="○○○.jpg" alt="" style="float:right;margin-left:10px;margin-bottom:10px">

「style=」以降を付け足しています。
floatというのは画像を浮かせる(文字を回り込ませる)イメージで、「float:right」は画像を右上に浮かせています。
画像を左上に持ってきたい時は「float:left」にします。
marginは余白です。
margin-leftは画像の左側の余白、margin-bottomは画像の下の余白です。
余白を広くしたり狭くしたりしたい時は「px」の数値を変えて下さい。

4.編集したタグを貼り付けます。
該当ページの編集画面を開き、「HTML」をクリックし、HTMLモードにして先頭に3.で編集したタグを貼り付けます。
「更新」をクリックしてHTML編集ウィンドウを閉じて上記の内容で設定」をクリックします。

恐らく、これでできるかと思いますので、試してみてください。

記事を編集する
次のページ