中小企業・個人事業の簡単ホームページ作成ソフトならとりあえずHP

ご利用実績11000人突破!

ユーザー向け使い方サイトとりあえずHPNAVI

  • 30日無料体験のお申し込み
  • はじめて訪問された方とりあえずHP公式サイト
  • ユーザー向け使い方ガイドとりあえずHPナビサイト

助け合い掲示板

文章の折り返しについて

:momo :2018-11-13 11:21:25 https://www.eigokan.jp/cont5/main.html
度々失礼します。

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

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

よろしくお願いいたします。
ご質問者様へこの問題は解決しましたか? 解決した!
この質問に答える

Re:文章の折り返しについて

:とらしろう :2018-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編集ウィンドウを閉じて上記の内容で設定」をクリックします。

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

記事編集フォームログイン

投稿時に設定したパスワードを入力してください

この質問を解決済みにする

 

質問内容を解決済みに変更しました。

 

※自動的に再読み込みがされます。

コメントにより質問の内容が解決した場合、
解決した事をお知らせしましょう。

投稿時に設定したパスワードを入力してください
↑このページのTOP
  • 簡単ホームページ制作ソフトとりあえずHP
  • これってどうやるの?と思ったら使い方サポート
  • 問い合わせ前に必ずチェック!よくあるご質問
  • ユーザー同士でスピード解決!助け合い掲示板