Sumirexxx

今日もiPhone片手に出かけます

WordPressでアイキャッチ画像が拡大縮小してしまうのを防ぐCSS はてなブックマーク - WordPressでアイキャッチ画像が拡大縮小してしまうのを防ぐCSS

WordPress 日刊すみれぽ

PC作業
長年悩んでいたことが解決しました。
このブログではWordpressのアイキャッチ画像をスクエア(正方形)にして表示しています。

本来は、MarsEditとSLPRO X、どちらも投稿記事の先頭画像をアイキャッチ画像に設定できます。(MarsEditの設定では『Auto Post Thumbnail』というプラグインを使います)
しかし私の場合はアイキャッチをスクエア(正方形)にしているので、画像を入れた後にわざわざスクエアに画像を切り取ってアイキャッチとしてセットし直していました。

たまにならいいですが、これが毎回となるととてもめんどくさい。

この作業をしないと、画像がスクエア(正方形)では表示されるものの、縮小されてしまうのが悩みでした。

CSS修正前のアイキャッチ

それぞれぎゅーっと潰されたように縮小されているのがわかるでしょうか?スクエアにするのを忘れると、すぐにこんな風に縮小されてしまっていたのです。

修正前1

修正前2

修正前3

修正前4

解決法はやはりCSSにあった

今回はこのように書きました。

    /*アイキャッチ*/
	img.attachment-large.wp-post-image {
  	  width: 200px;
  	  height: 200px;
  	  object-fit: cover;
 }

最後のobject-fitを追記しました。

CSVV修正後のアイキャッチ

CSSを修正した後のアイキャッチです。画像をさわることなく、CSSだけで綺麗な表示にすることができました。

修正後1

修正後2

修正後3

修正後4

「MarsEdit」カテゴリーの記事一覧 | Sumirexxx

「SLPRO X」タグ記事がついた記事一覧 | Sumirexxx

まとめ

画像全部をリサイズしようとしていましたが、CSSだけで解決できてよかったです。

<