【EASEL】カテゴリー、タグ一覧表示のアイキャッチ画像周りの修正①

一部のカテゴリーやタグでの一覧表示のアイキャッチ画像に統一感を出すためのカスタマイズです。

デフォルトのアイキャッチ表示

修正後

画像が正方形になるように修正しました。

CSSの編集

figure.eye-catch {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}


.text-wrap article figure.eye-catch{
width: 30%;
min-width: 150px;
height: 100%;
}

アスペクト比を１/１に固定し、はみ出た部分は切り取られるようにしました。

また、画面の幅によってアイキャッチ画像のサイズが変わるように修正しています。

次の記事ではPHPを編集して、アイキャッチ画像を設定していない記事にもアイキャッチ画像を表示させるようにします。

【EASEL】カテゴリー、タグ一覧表示のアイキャッチ画像周りの修正②