こんな感じではみだしてました。
投稿に挿入した画像がサイドバーにはみ出るので調整しました。
ググりまして、スタイルシートにて以下の記述を行い、imgファイルの設定を行うと良いとのことでした。
img{max-width:100%;height:auto;}
→横幅はページ幅の100%、高さは自動
img{max-width:90%;height:auto;margin:0% 5%}
→横幅はページ幅の90%、高さは自動、上下余白0%、左右余白5%
テーマ Atahualpa での調整方法
使用しているテーマ Atahualpa はcssをいじらず、テーマ用のオプションから設定します。 ※Atahualpa3.7.18
テーマ Atahualpa はスタイルシートがファイル css.php から作成されます。
そのcss.phpは「ダッシュボード」→「概観」→「Atahualpa Theme Options」で設定されます。
※普通のテーマでは style.css や、page.css 、post.css 等に記述するかと思います。
Atahualpa Theme Options を開きます。
左側メニューの下のほうに Style IMAGES の項目を選択して設定します。
デフォルトではこうなってます。
今回設定したいのは先ほどのこちらの条件です。
img{max-width:90%;height:auto;margin:0% 5%}
デフォルトの表記を観察すると分かりますが、style.css 上への記述のうち、 「 img{ 」 から 「 } 」の間の記述がなされているようですので、内部の表記だけ、上記青色の部分のみを記述します。
ただし、このオプションの設定では最後に「;」の区切りを入れ、改行して使用することになってますので以下の記述を設定します。
※実体のPHPではこの後の「 } 」までに他の記述が入る恐れがあるため。
max-width:90%; height:auto; margin:0% 5%;
以下のデフォルトの設定は私には不要でしたので消しました。
border: solid 1px #dddddd;・・・・・枠線スタイル、太さ、色 background-color: #f3f3f3;・・・・・画像枠の背景色 -moz-border-radius: 3px;・・・・・・枠線を丸めるなにか -khtml-border-radius: 3px;・・・・・・枠線を丸めるなにか -webkit-border-radius: 3px;・・・・・・枠線を丸めるなにか border-radius: 3px;・・・・・・枠線を丸めるなにか
Save changes を選択して実行します。
ページを更新して表示を確認します。 はみ出さなくなりました。
が、今度は左の余白が変動値を指定していたため、おかしなことに、、
左右の余白を「 % 」から「 px 」(ピクセル)指定に変えてみるのもいいですが、余白はいらない、ページ自体に余白があるので画像は100%にして、結局、、、
max-width:100%; height:auto;
で設定しました。最初からこれですればよかった。
こんな感じになりました。
結果として途中でしなくてもよいことしてますけど気にせず、このままいきます。
追記）・・・・のつもりでしたが、ブラウザの表示によっては画像の縮尺がおかしなことに、、、
以下のように設定すると、縮尺は維持されました。これでいいのかな？
max-width:100%; height:auto; padding:5px;
以上