Lightningカスタマイズ: ブログカードのサムネイルサイズを調整する

2023/04/04 最終更新日時 : 2023/04/04 サイノア

Lightningに変えてからブログカードのサムネイル画像のサイズが気になっていました。例えばこれ。

縦長画像をアイキャッチ画像として指定していると、ブログカードにしたときにこのように縦に長くなってしまうのです。でも、記事一覧表示では他の記事と同じように所定のサイズで表示されます。

「ちょっと気にはなるけど、ブログカードにしたときだけだし、良しとするか」と思っていたのですが、さすがにこれはダメだろうと思いました。

これだとあまりにも間抜けですよね。

ということで、CSSでなんとかならないかと調べてみたら、ちゃんと方法がありました。

img.blog-card-image-src {
	height: 150px;
	object-fit: cover;
}

こう指定するとこうなります。

高さは150pxにして、あとはcoverのサイズに収まるように、ということでしょうね。

切り取る場所は画像の真ん中のようです。上を取り出したいなら、このように「object-position」で指定すれば良いようです。

img.blog-card-image-src {
	height: 150px;
	object-fit: cover;
	object-position: 0 0;
}

指定方法は「object-position: 横の位置 縦の位置」です。上の例だと「object-position: 0 0;」ですから、横も縦も0の位置、すなわち、画像の左上を基準点として指定したことになります。「0 100%」と指定したら横が0で縦が100%ですから画像の左下が基準点になります。

なお、ネタ元はこちらです。

Webクリエイターボックス

 

1 Post

666 Users

989 Pockets

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

https://www.webcreatorbox.com/tech/object-fit

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…とい

ブログカード内のフォントサイズの調整はこちらの記事です。

Lightningカスタマイズ: ブログカードのフォントサイズなど

2023/04/04 最終更新日時 : 2023/04/04 サイノアブログカード内のフォントサイズが大きすぎる感じなので、調整してみます。 まず、現状。 これにはブログカードが二つあり…

アフィリエイトのある暮らし