【ブログ設定】QooQ list版のテンプレートで一覧表示と関連記事のサムネイルを正方形にする

このブログはラムネグさんの「QooQ」というテンプレートを使用しています



今回はQooQのリスト版のサムネイルを正方形にする方法を紹介します


通常のテンプレートは正方形にする方法がありましたが、リスト版はよくわからなかったので放置していました

通常のQooQで一覧表示のサムネを正方形にする方法はこちら↓

しかし、ブログのトップ画面の一覧表示にした際にリスト版では丸いサムネが表示されてしまいます

角が切れてしまうので見にくい場合があるので何とかしようと思い、サムネを正方形にする方法を探しました

調べてみると関連表示を正方形にする方法と同じ方法でできたので合わせて紹介します

関連表示を正方形にする方法

関連記事を正方形にする方法は下記の「せかつぶ！」さんのブログを参考にしました



それではまず、ブログ編集画面から
ブログカスタマイズ　＞　テーマ　＞　HTMLの編集

HTMLを編集するのでバックアップは取っておきましょう
変更するときは何でもバックアップが重要です

HTML編集画面に入ったら、画面内でキーボードの「Ctrl」＋「F」を押し検索画面を表示させます
そこに「.mrp-post-img{」と入力し検索してください

すると下図のように一つだけ黄色くハイライトされるかと思います


そうしたら下のコードの黄色いところを変更しましょう

.mrp-post-img{
 display: block;
 border-radius: 50%;
 width: 72px;
 height: 72px;
 object-fit: cover;
 margin: 0 auto 0 auto;
}

↓

.mrp-post-img{
 display: block;
 border-radius: 0%;
 width: 72px;
 height: 72px;
 object-fit: cover;
 margin: 0 auto 0 auto;
}

これで関連記事の表示が正方形になっているかと思います

一覧表示を正方形にする

それでは次に一覧表示も正方形にします

やり方は関連記事とほぼ同じです

ブログカスタマイズ　＞　テーマ　＞　HTMLの編集

HTMLを編集するので今度もバックアップは取っておきましょう

HTML編集画面に入ったら、画面内でキーボードの「Ctrl」＋「F」を押し検索画面を表示させます
そこに「.list-item-img{」と入力し検索してください

すると下図のように一つだけ黄色くハイライトされるかと思います


そしたら同じように「50%」を「0%」に変更すればOKです

.list-item-img{
display: block;
border-radius: 50%;
width: 72px;
height: 72px;
object-fit: contain;
}

これで一覧表示のサムネが正方形で表示されます

まとめ