アメブロの画像の横幅が記事の幅を超えてバグが起こったときの対処法。CSSの貼り付けの解決策

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

画像は自動で縮小と保存はできるんですか?

よしたか
できますよ。今は修正されていると思いますが、聞かれたので答えておきますね。

画像の横幅が記事エリアの幅を超えて

画像が切れてしまう という現象が起こっているようです。

 

そんな時はCSSで編集してしまいましょう。

この記事を読むことで
  • 画像の大きさの自動修正をかける方法がわかります。
  • CSSでコピペで自分のアメブロサイトが修正できます。

画像が大きいときの画面に合わせた大きさにする方法

画像が大きくてはみ出すんですけどどうしたら・・・

画像を記事に貼る時に

 

記事エリアの幅よりも画像の横幅が

大きかった場合・・・・

 

画像が途中で途切れてしまう現象が起こるようです。

(自分はあまりアメブロをしないので

その現象に立ち会うことがあまりありません。)

 

とりあえずそうなったときの

対処法だけお知らせしておきます。

 

 

記事エリアで使われる画像の

横幅のサイズの最大値を設定しておきます。

 

 

横幅のサイズよりも小さい幅なら

そのまま表示

 

 

記事エリアの幅以上の幅の時だけ

最大値に自動縮小する

 

という方法があります。

 

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宣言です。⇒取りあえず高さは自動で変えてという指令です。

 

まとめ

 

今回は画像の大きさの自動修正をかける方法を伝えました。

 

アメブロもアップデートされているので

今はこんなことが起きるのかわかりませんが

古いソフトを使っている人はまだ起きているのかも知れないので

回答を今日は書きました。

 

メルマガやっているので登録よろしくお願いします(^^)

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事