ホーム / ブログノウハウ /

【Blogger解説】丸いサムネ表示を四角に変更する方法

2023/03/27

ブログノウハウ

t f B! P L

 


この記事では「Blogger」の記事一覧に表示される
丸くて小さいサムネ画像を、16:9の横長の表示に
変更する方法を紹介しています
■更新履歴
・2023年3月28日…テンプレ作成

手順

①左メニューから「テーマ」をクリックします

②カスタマイズの右にある▼から「HTMLを編集」をクリックします


③コード内を適当に一度クリックした後、
　Ctrl＋Fを押して「Serch：～」（検索窓）を出します


④「Serch：～」に以下のワードをコピペしてEnterキーで検索します

　<img class='list-item-img 

■変更前

<img class='list-item-img' expr:src='data:post.thumbnailUrl'/>

⑤以下の様に書き換えます

■変更後

<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 320, &quot;16:9&quot;)'/>


⑥続けて.list-item-img-box を探して以下の様に変更します

■変更前
.list-item-img-box{
flex-shrink: 0;
flex-basis: 72px;
}
.list-item-img{
display: block;
border-radius: 50%;
width: 72px;
height: 72px;
object-fit: cover;
}

■変更後

/*　サムネサイズ変更　*/
.list-item-img-box{
 flex-shrink: 0;
 flex-basis: 140px;
}
.list-item-img{
 display: block;
 border-radius: 0%;
 width: 140px;
 height: 80px;
 object-fit: contain;
}

⑦成功するとサムネが大きく表示されます！


お疲れ様でした

QooQ