css

ということで、眠い目こすってます。 あいすBLASTです。 いやいや、ほんと勉強不足って怖いです。 CSSをそのまま書ける変態さんはきっともう知ってるかもしれないですが 今まで超絶苦労していた部分が、まさか1行で完結するとは・・・ 事の発端は、このサイトって元々画像をデジカメで撮ったものを素材としてまして VGAサイズ、要は4：3比率の 「640×480」で作っていました。 というのも、もともとの制作環境がスクエア画面でしたし、ワイド液晶が普及するよりも前のことだったので 当時は、VGAで整えればいいでしょって思ってました。 ところが時代が変わり、スマホで写真を撮ったりしていくうちに比率が変わり、いまや16：9が当たり前に・・・ そうすると、ものぐさなので画像の縦横比を整えて～なんてしたくないのです。 撮ったら、アップロードして自動でリサイズかけてくれるWordpressでは（そういう仕様にしています）面倒ごとはすべて自動で方付けられるようにしています。 そうすると、まぁ元から調節してアップロードすれば何も問題ないのですが、縦横比が乱雑してくるのです。 しかも、アイキャッチとかで使うのは１：１だったりもして、第一次縦横比戦争勃発なのです。 そこで考えたのが、それぞれの役割ごとに画像を作るのではなくて、1枚の写真をトリミングとかしてもらって、指定サイズで表示する方法。 もちろん、SEOやページ評価の観点では、画像の大きさとサイズがあってないよ！ってダメ出しを食らいますが、アフィリエイトしてるわけじゃないし、ほぼ自己満足で作ったようなページなので、なにより簡単なのがいい。 これまでは、CSSであーだのこーだの設定して、なんとかサイズを指定してましたが、やっぱり縦横比がおかしかったり、横で調節して縦は長さが変わったりしていたのです。 それでも、まぁそれなりの見てくれだったので妥協していましたが見つけてしまいました。 その名も object-fit: cover; CSSのサイズ指定に、この子を追加してあげるとなんとびっくり。 そのサイズでトリミングしてくれる優れもの。 もちろん、リサイズをかけて反映しているので、原寸大で切られることもなく、あっさり解決してしまいました。 この子の優れているのは、サイズ指定に応じて切ってくれるので、スクエアだろうが長方形だろうが関係なし。 縦指定にも横指定にも対応してくれるので、無敵です。 早速、新着一覧と、記事のナビページでリスト表示しているサムネイルに適用してみました。 新着一覧ではスクエア指定 記事一覧では横長指定 しっかりトリミングしてくれています。 レスポンシブルも対応しているので、ページの解像度や表示環境が変わっても問題がありません。 無論、いろんなオプションがあるので、好みに合わせて使ってみてください。 あいす鬼感激！

Warodpressで記事一覧ページのサムネイルにカテゴリーアイコンをつける方法

縦横比に悩まない！CSSで画像をトリミング object-fit: cover に惚れた