閉じる

サイドバーに画像がはみ出ないようにする。

こんな感じではみだしてました。

hamidashi

投稿に挿入した画像がサイドバーにはみ出るので調整しました。

ググりまして、スタイルシートにて以下の記述を行い、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 を開きます。
atahualpa-option-01

左側メニューの下のほうに Style IMAGES の項目を選択して設定します。
atahualpa-option-02-imgcss

デフォルトではこうなってます。
IMAGE-in-POST

今回設定したいのは先ほどのこちらの条件です。

img{max-width:90%;height:auto;margin:0% 5%}

デフォルトの表記を観察すると分かりますが、style.css 上への記述のうち、 「 img{ 」  から 「 } 」の間の記述がなされているようですので、内部の表記だけ、上記青色の部分のみを記述します。

ただし、このオプションの設定では最後に「;」の区切りを入れ、改行して使用することになってますので以下の記述を設定します。
※実体のPHPではこの後の「 } 」までに他の記述が入る恐れがあるため。

max-width:90%;
height:auto;
margin:0% 5%;
IMAGE-in-POST-2

以下のデフォルトの設定は私には不要でしたので消しました。

 border: solid 1px #dddddd;・・・・・枠線スタイル、太さ、色
 background-color: #f3f3f3;・・・・・画像枠の背景色
 -moz-border-radius: 3px;・・・・・・枠線を丸めるなにか
 -khtml-border-radius: 3px;・・・・・・枠線を丸めるなにか
 -webkit-border-radius: 3px;・・・・・・枠線を丸めるなにか
 border-radius: 3px;・・・・・・枠線を丸めるなにか

Save changes を選択して実行します。
SaveChange

ページを更新して表示を確認します。  はみ出さなくなりました。
hamidashi-2

が、今度は左の余白が変動値を指定していたため、おかしなことに、、
hamidashi-3
左右の余白を「 % 」から「 px 」(ピクセル)指定に変えてみるのもいいですが、余白はいらない、ページ自体に余白があるので画像は100%にして、結局、、、

max-width:100%;
height:auto;

で設定しました。最初からこれですればよかった。

こんな感じになりました。
hamidashi-4

結果として途中でしなくてもよいことしてますけど気にせず、このままいきます。

追記)・・・・のつもりでしたが、ブラウザの表示によっては画像の縮尺がおかしなことに、、、

縦長画像

以下のように設定すると、縮尺は維持されました。これでいいのかな?

max-width:100%;
height:auto;
padding:5px;

以上

© 2016 DAG Kfz222 | WordPress テーマ: CrestaProject の Annina Free