【QooQ】関連記事のサムネイル画像のサイズを変更する方法【カスタマイズ】

関連記事に表示されるサムネイル画像のサイズを変更する方法です。関連記事のサムネイル画像は表示時点で72pxにカットされています。そのため、そのままサイズ変更してもカットされた状態で変更されるため、思った通りにサイズ変更することができません。

そこで、カットしていない状態のサムネイル画像を表示するように変更します。

変更する前のお願い！
手順
おわりに

変更する前のお願い！

この記事はブログを Blogger でブログを運営していた時のものです。QooQ のバージョンは 1.28 を利用していました。現在の Blogger とは仕様が異なる可能性がございますのでカスタマイズされる際はご注意ください。また、QooQのテンプレートを直接変更しますので、実施前に必ずテンプレートのバックアップ作成をお願いいたします。

手順

1.Blogger のテンプレート編集画面にて「関連記事」で検索して以下のコードを変更してください。

変更前

r.thumbnail=n.media$thumbnail.url

変更後

r.thumbnail=n.media$thumbnail.url.replace(//s[0-9]+(-c)?/, "/s72")

※72はサムネイル画像として表示する画像サイズです。変更前はs72-cで取得しています。おそらくトリミングした72pxで取得していると思います。

2.次に以下のコードを変更してください。

変更前

.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の変更は不要です*/
border-radius: 0%; 
width: 72px;
height: 72px;
object-fit: contain;
margin: 0 auto 0 auto;
}

※width と height に任意のサイズを設定します。

3.テンプレートを保存します。