WordPressのアイキャッチが切れてしまう現象の原因と対応

WordPressでブログを書いていると、読者に記事の内容を一発で伝える為、あるいは読者の目を引く為にアイキャッチというものを作成します。

このアイキャッチですが、記事一覧で表示された時に上下左右が切れてしまうという現象がありました。こちらの原因と対策についてシェアします。

環境

使用しているテーマ：LION MEDIA

LION MEDIA[ライオン メディア] - デモサイト

 

17 users

AMP対応・SEO最適化・レスポンシブ・高機能の無料WordPressテーマ│LION MEDIA[ライ...

http://lionmedia.fit-jp.com

ライオン メディアは、モバイル端末での表示を早くするAMPに標準対応。SEO最適化済みで、レスポンシブデザイン。カスタマイズ性にも優れ、高機能でありながら表示速度も速い無料のデザイナーズ WordPressテーマです。

発生した現象

現象としては以下の通りです。

例として、何も考えずにアイキャッチの画像を[縦800px × 横1000px]で作ってみます。

すると、記事作成時のアイキャッチ画像設定画面では以下のように表示されます。

よし、全体が表示されており問題無さそうに見えます。

それでは念の為プレビュー画面でも確認しておきましょう。

すると、なぜか上下が切れています。

（プレビューで画像が切れているということは記事一覧でも切れている。）

アイキャッチ画像の上下が切れる原因

WordPressではテーマ毎にアイキャッチのサイズが決められていますが、私が使用しているLION MEDIAでは、記事一覧のアイキャッチのサイズは[縦410px × 横730px]と指定されている模様。

これは先ほどのアイキャッチの設定画面でも示されています。

このサイズより大きい画像はWordPressに画像をアップロードする際に自動でリサイズされてしまい、結果として冒頭に例として作成した[縦800px × 横1000px]の画像は上下が切れてしまっていた。

アイキャッチの画像の上下が切れないようにするには？

では画像のリサイズによって画像の上下が切れないようにするにはどうすれば良いかというと、リサイズされないようにすれば良い。

ということでLION MEDIAの推奨サイズである[縦410px × 横730px]のサイズでアイキャッチを再作成してみます。

アイキャッチ画像指定部分では上下は切れていない。これは前回と同様。問題はプレビュー画面でどうなるか、です。

プレビュー画面では以下のように表示されます。

上記の通り、指定サイズのアイキャッチ画像を作成すれば自動リサイズは行われず、画像の上下が切れない事がわかりました。

縦横の比率を保ったサイズであれば大きくても（小さくても）良い？

結論から書くと、比率を保っていれば問題ないと言えます。比率を保っていれば推奨サイズより大きい場合は縮小され、推奨サイズより小さい場合は拡大されますが、上下が切れる事はありません。

念の為、推奨サイズより大きい場合／小さい場合を確認してみます。

推奨サイズより大きい場合

[縦562px × 横1000px]でアイキャッチ画像を作成。

プレビュー画面では以下の表示となります。自動でリサイズ（縮小）され、全体が表示されています。

推奨サイズより小さい場合

[縦337px × 横600px]でアイキャッチ画像を作成。

プレビュー画面では以下の表示となります。自動でリサイズ（拡大）され、全体が表示されています。