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

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

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

変更する前のお願い！

手順

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.テンプレートを保存します。

おわりに

関連記事の画像サイズが変更されていれば変更完了です。今回の手順では72pxの画像を縦横比を維持して表示するようにしています。