ブログ・SNS

ワードプレスで画像が崩れる問題

田舎暮らしキャリア形成を主軸としたブログをWordPress(WP)で初めて1か月ちょっとが経過し、自分なりに「こういう事できないのかな?」とか「こう見せたいんだけど」とか、「なんでうまくいかないのー?」と困ることが多発してます。

その度にググって解決策を探しているのですが、その指示通りにやっても上手くいかなかったり、困り果てることもしばしば。

いうわけで、同じような現象に悩まれている方々の為、自分の備忘録も兼ねて、学んだことを記していきたいと思います。

スマホで見ると画像が崩れてる…

WP使われているブロガーさんのほとんどがPC上で作業をされているかと思いますが、全ての閲覧環境で動作確認するの大変ですよね。んで、誰かから指摘されて気づく、みたいな。

私もPC上では問題ないのにスマホ上では画像が崩れて表示されてしまう現象に長らく苦しめられました。

/* 画像サイズ最適表示 */
img {
max-width: 100%;
height:auto;
}

このCSSでスマホでも画像の縦横比が崩れることなく、文字の邪魔をすることもなく、日本人のお手本のように並んでくれるようになりました。

ただしコメントアウトの/* 画像サイズ最適表示 */は認識されなかったようなので消しました。

もしお使いのテーマの追加CSSコーナー等に上記をインプットしてもエラーが出るようなら、同じく削除して2行目以降だけにしてみてください。

その他の解決策

私のブログはLion Blogというテーマで、レスポンシブ対応(つまりはどんな環境でも最適な見え方がするように順応してくれる)なのですが、なぜか画像だけがオカシイことに。

上記の方法で解決はしたものの、原因は不明なままです。

そういうわけで、別の理由で崩れている方もいらっしゃるかもしれませんので、その他ググって出てきた解決策も記しておきますね。

私の場合はうまくいきませんでしたが…。

プラグイン問題

なんらか悪さをしているプラグインが居る場合があるようです。1つずつ無効にして悪い子を探してみると良いようです。

WPアップデート時のバグ

画像問題じゃないけど私もバグったことあります。

一度WPログアウトして閉じて再度開きなおすと直っている場合があります。

アップデートじゃなくても長時間WP開きっぱなしにしてるとバグる場合もあるようですね。

CSSが崩れた

なんかCSSイジろうとして、うっかり変なとこ触っちゃった可能性があります。最後のに触ったところ確認しましょう。

上記のCSS対策を入れる時もそうですが、CSSに強くない人は必ずバックアップとってから作業しましょう。

余談ですが、私バックアップと言われてピンと来ないレベルのIT弱者なので、メモ帳とか適当なファイルにコピペするようにしてます。それがバックアップとして正しい手法なのかは謎ですが。

画像が大きすぎる・小さすぎる

スマホやデジカメで撮った写真をそのまま載せようとすると、大概が大きすぎてサイトに適していないサイズになっていると思います。

各WPテーマによって最適サイズは違うようですが、私は大きくても横700ピクセル程度にリサイズするようにしてます。

Windowsで標準で入っているペイントってソフトで簡単にサイズ変更できますね。


これにて解決。私の苦しみもひとつ消えました♪

2020年12月24日にWPテーマをLion BlogからJINに移行しました。

お勧めの本
独りで悩まず相談しよう!

★キャリア形成の相談なら★

ポジウィルキャリア

日本初の転職トレーニング

マンツーマンで転職支援

初回カウンセリング無料

10

親身さ

10

結果重視

10

1on1

9

女性向け

にほんブログ村 転職キャリアブログへ

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA