本文内画像のスタイル調整とレスポンシブWeb確認画面の幅変更 (No. 1693)

質問

○すぐ使えるCGI 添付ファイル付 ウェブページ更新ツール 大容量版 Ver 4.8

いつもお世話になっております。今回は２つ質問させて頂きたいことがあります。

１つ目は「本文内に挿入した画像」と記事本文の間を空ける（改行する）方法を教えて下さい。本文自体には{{{<br>}}}を使用して改行や空間をあけることができました。しかし、挿入した画像には{{{<br>}}}が効きません。
「画像とファイル」タグ自体に、元から画像の下に空間をつくるみたいな設定にすればよいのでしょうか？

2つ目は、確認画面の幅をレスポンシブデザインを維持したまま変更する方法を教えて下さい。幅は最高690px固定でそれ以下はウィンドウの大きさによって変動するようにしたいです。※固定する幅から「ヘッダー部分のリンク」と「ライセンス情報」は抜かしたいです。

申し訳ありませんが、よろしくお願い致します。

回答

「すぐ使えるCGI」のご利用誠にありがとうございます。

■製品の確認
ご利用中の製品は、管理画面がレスポンシブWebタイプのものですね。

■画像の回りの空間について
挿入した画像の回りに空間を確保するには、ご認識頂いているように、右クリックから自動挿入されるタグそのものに空間の設定をして下さい。<br>よりはスタイルシート（CSS）がおすすめです。

挿入されるタグの設定については、下記のページの「挿入されるタグの調整」部分をご覧下さい。

「アップロードした画像やファイルを本文内に挿入する方法」
http://sugutsukaeru.jp/support/376/

■レスポンシブWebデザイン管理画面の最大幅の調整
ご希望は、ウィンドウ幅が大きくても内容部分の幅が 690px 以上にはならないようにしたいという事ですね。

○編集対象ファイル
管理画面用のCSSファイルは以下の場所にありますのでこれを編集して下さい。
webdir/parts/css/admin.css

○幅を設定する範囲
調整をご希望の範囲（＝ヘッダーとフッターのライセンス情報リンクを除いた部分）は「<div class="container-fluid">」という<div>タグで囲まれています。

設定方法は色々な可能性がありますが、例えばこのタグに id 属性を指定して、その id に関するスタイル指定をして下さい。なお、既存の設定で左右に 20pxずつの padding（余白）が取られていますので、それも考慮して必要なら別の設定で上書きして下さい。

CSS での最大幅の指定方法は max-width の指定などがありますが、多数のブラウザに対応させたい場合は「メディアクエリー」など端末の幅を限定しながらスタイル設定をする方法もご検討下さい。

なお、CSSの設定方法の詳細は、一般の参考書をご参照下さいますようお願い致します。


◆頂いたご質問内容からの変更点
タイトルに詳細情報を追記しました