【WordPress】STORK(ストーク)で縦長アイキャッチ画像を横長に統一する方法

最近こことは別の場所でWordPressテーマ、「STORK（ストーク）」を使うようになりました。

んで、いろんな制約から縦長の画像をアイキャッチ画像として使うことが多いのです。

でもアイキャッチ画像が縦長だと記事の一番上に表示された時に表示領域埋まったりなんかいろいろ気持ち悪いので、縦長の画像も全部横長になるようにCSSを追記してみました。

つまりどういうことだってばよ

画像で説明したほうが早かったですね。

デフォルトの場合

こんな感じに、縦長の画像が目一杯表示されます。

ファーストビューでほぼアイキャッチ画像しか見えなくなるのでこれはあまりよろしくない。

今回のカスタマイズ後

こんな感じに画像の真ん中だけを自動で切り取ってくれます。太ももが強調されていい感じ。

追記するCSS

簡単に解説

max-height: 480px

画像の高さを最大480pxに制限します。見たまんまですね。

ちなみにスマホビューでは最大300pxに制限しています。

object-fit: cover

max-heightの指定だけだと、指定サイズを超えた場合に画像が潰れてしまいます。

そのため、超えた場合には中央で切り取るようにするのがこのcss。

画像編集ではなくCSSで対応する理由

「こんな面倒くさいコード打つぐらいなら最初から画像の編集をしてしまえばいいのでは？」という声も聞こえてきそうですね。

まぁ、これはこれでわざわざCSSで対応する理由はしっかりあるんですよ。

１．いちいち編集するのめんどくさい。

率直にめんどくさいです、いちいち編集ソフト開いてトリミングして保存したりするの。

今回のなら一回コピペだけしとけばあとは何も考えず画像設定するだけ。楽です。

２．引用とかの規約的な問題

察する人は察してくれると思うのですが、商材として使用許可されている画像って編集したらまずいんですよね。

でもCSSならサイト側で表示の設定を変えているだけなので、

「これ画像は編集してないもん！ほんとだもん！悔しかったら画像ダウンロードしてみ！元画像のまんまだから！！」

ってのが言えるわけです。かしこい！

そんな感じで、上記2つのどちらかの問題を抱えている方は是非お試しを。おわり。