【blogger設定】QooQテンプレートのlist版をカスタマイズ 一覧表示と関連記事のサムネイルを丸から正方形にする方法
このブログはラムネグさんの「QooQ」というテンプレートを使用しています
今回はQooQのリスト版のサムネイルを正方形にする方法を紹介します
ブログのトップ画面の一覧表示にした際にリスト版では丸いサムネが表示されています
また記事の下に表示される関連記事の画像も丸く画像です
角の所が見切れてしまい、わかりずらいことがあるので画像を正方形に直しました
リンク
設定方法
関連記事の設定
まずは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編集画面に入ったら、画面内でキーボードの「Ctrl」＋「F」を押し検索画面を表示させます
そこに「.list-item-img{」と入力し検索してください
すると下図のように一つだけ黄色くハイライトされるかと思います
先ほどと同じように「50%」のところを「0%」に変更すればOKです
.list-item-img{display: block;border-radius: 50%;width: 72px;height: 72px;object-fit: contain;}
これで一覧表示のサムネが正方形で表示されます
まとめ
今回はQooQリスト版の一覧表示と関連記事のサムネイルを正方形にする方法を紹介しました
元の画像が正方形でない場合、少し左右がカットされて表示されてしまいますが、角の部分が見切れることはありません
多少見やすくなったかと思います
「0%」ではなく小さい値にすると角に丸みが付くのでアレンジも可能です
ぜひお試しください
