関連記事の画像表示を拡大-がむしゃら院長開業日記

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

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

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

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

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

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

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

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

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

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

変更点

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

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

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

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

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

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

今後の課題にします。

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

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

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