MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【AED様】スクロール画面の画像サイズが表示されると拡大されて表示されます。

「画像サイズが拡大されて表示される」というご相談を頂きました。画像アップロード時に生成される別サイズ画像が縦横比維持かトリミングされるかの違いに思えます。

スクロール画面の画像サイズが表示されると拡大されて表示されます

テーマ:Anissaバージョン: 0.0.5
不具合が起こった日:2月17日
<きっかけ>
普段と変わらないように投稿をしていたところ、2月17日の投稿以降から本来の画像の割合より拡大されて表示されます。最初は気にしていませんでしたが、デザインが決まっている画像を入れた際に切れて見えてしまうので解決したいです。以下の内容をいくらか解決しようと試みてみましたができませんでした。お忙しいところすみませんがご存知であればご教授いただきたいです。
<対処してみたこと>
・画像サイズが同じものか確認済み
・投稿の画像挿入画面、画像の設定画面、設定▶︎メディア画面からも挑戦してみましたが変わりませんでした

トリミング(もしくはクロップ)の設定を確認してみましょう

>AEDさま
ご相談ありがとうございます。

「Anissa」というテーマは使った事がありませんので推測も入りますが、ご了承下さい。

サイトの画像を拝見しました。確かに画像が切れている部分がありましたね。
ただこれは拡大・縮小というよりは、画像をアップした際にトリミングされているのが原因に思いました。

実際、記事アイキャッチとTOP上部のカルーセルスライダーの画像だけを別で開いて確認していくと、2/17前後で別々の画像が使われているようです。

以下、URL例です。

◆変わらないケース
【YOURSITE】/wp-content/uploads/2019/02/Top-20-Mobile-Apps.png
上部スライドでも記事一覧のアイキャッチも同じ画像が使われています。

◆別々になっているケース
【YOURSITE】/wp-content/uploads/2019/02/Webデザイン勉強-無料サイト-1-480×315.png(スライド)
【YOURSITE】/wp-content/uploads/2019/02/Webデザイン勉強-無料サイト-1.png(記事アイキャッチ)
【YOURSITE】/wp-content/uploads/2019/02/Top-20-Mobile-Apps-1-480×315.png(スライド)
【YOURSITE】/wp-content/uploads/2019/02/Top-20-Mobile-Apps-1.png(記事アイキャッチ)

スライドの方では、なぜか-480*315 でトリミングされた画像が使われていました。
そのため、スライドによって画像高さがまちまちになっています。

ひとつ思い浮かんだのは、メディア設定のトリミング項目です。
設定>メディア でアイキャッチ、中・大サイズの画像生成を設定できますが、トリミングの仕様も変更できます。
トリミング設定

チェックが入っている場合、300-200の画像もトリミングして150-150にします。
チェックが入っていなければ、確か150-100とトリミングせず比率のみを変更するはずです。
この部分が変わらないのであれば、2/17前後のテーマアップデートなどでテーマの仕様自体が変更になっていることも考えられます。

WordPressのこのメディア設定以外に、テーマ側で独自の画像サイズでアップ画像を複製していることはよくあります。
カルーセルスライダーの画像サイズやトリミングの仕様変更でテーマ側の設定項目が追加されていないかも確認してみてください。
トリミング、クロップ(crop)といった内容があればそれかもしれません。

設定項目がなく、単に仕様変更となると、あとは480×315にトリミングされても問題無いようにアイキャッチを作成するか、テーマをカスタマイズするしかないと思います。
おそらく、カルーセルスライダーの表示部分でどのサイズの画像を使うか指定されているはずですが・・・

参考にして頂ければ幸いです。

おすすめコンテンツ

コメントを残す

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

CAPTCHA