関連記事一覧の画像表示を大きくします

Bloggerでは記事の最後に関連記事を表示してくれます。

QooQ List版 では関連記事のアイキャッチ画像が丸く切り抜かれて表示されます。

これだとホームのアイキャッチ画像と同じで、小さくてよく見えません。

画像を大きく表示できるようにしたいと思います。

関連記事一覧の画像を丸型から四角型に表示変更し拡大する

QooQ list版 では関連記事を丸型のアイキャッチ画像とともに表示してくれます。

当ブログでは下記のように表示されました。

これを四角のアイキャッチ画像とともに表示するようにしたいと思います。

HTMLのコードを一部変更します。

HTML編集画面で　.mrp-post-img{　を検索

変更点

border-radius: 50%; 　→数字を0%にしたら画像が四角に

width: 72px;　→数字変更で画像の横幅変更

height: 72px;　→数字変更で画像の縦幅変更

下記のようになりました。

周辺の数字をいじったら、横に並べる記事数の変更や画像形の変更ができるようです。

しかし、きれいな画像を16:9の比率でうまく表示させることがなかなかできません。

今後の課題にします。

こちらを参考にさせて頂きました。ありがとうございます。

https://www.sekatsubu.com/2019/12/square-image.html

まとめ

・関連記事一覧の画像表示を丸型から四角型に変更しました

・まだうまく表示できていないので、改善の余地ありです。

関連記事数が少ないですね。

記事数をもっと増やしていこうと思います。