
こんにちは。YOSHITAKA(@YOSHITA19704216)です。

画像の横幅が記事エリアの幅を超えて
画像が切れてしまう という現象が起こっているようです。
そんな時はCSSで編集してしまいましょう。
- 画像の大きさの自動修正をかける方法がわかります。
- CSSでコピペで自分のアメブロサイトが修正できます。
Contents
画像が大きいときの画面に合わせた大きさにする方法
画像が大きくてはみ出すんですけどどうしたら・・・
画像を記事に貼る時に
記事エリアの幅よりも画像の横幅が
大きかった場合・・・・
画像が途中で途切れてしまう現象が起こるようです。
(自分はあまりアメブロをしないので
その現象に立ち会うことがあまりありません。)
とりあえずそうなったときの
対処法だけお知らせしておきます。
記事エリアで使われる画像の
横幅のサイズの最大値を設定しておきます。
横幅のサイズよりも小さい幅なら
そのまま表示
記事エリアの幅以上の幅の時だけ
最大値に自動縮小する
という方法があります。
CSSで指定する内容
横幅が400pxに縮小されて
高さもその比率で縮小されます。
※新旧両方のデザインスキンで有効です。
CSSの貼り付け コピペ
CSSの最後に以下の記述を追記すると、
画像の横幅の最大値が400pxに設定されます。
CSSコード コピペ
.articleText .detailOn img, .subContents .detailOn img {
max-width: 400px;
height: auto !important;
}
CSSの簡単解説
CSSコード解説
- max-width: 400px;
⇒横幅の広さのMAXが400pxです。 - height: auto !important;
⇒ ほぼ全ての優先順位を吹っ飛ばす奥義が存在します。
!importan宣言です。⇒取りあえず高さは自動で変えてという指令です。
まとめ
今回は画像の大きさの自動修正をかける方法を伝えました。
アメブロもアップデートされているので
今はこんなことが起きるのかわかりませんが
古いソフトを使っている人はまだ起きているのかも知れないので
回答を今日は書きました。
メルマガやっているので登録よろしくお願いします(^^)