知りたいこと
本棚画面に表示されているサムネイル(表紙)の大きさを変更する方法を知りたい。
回答
「詳細カスタマイズ設定>スタイル設定(CSS)>スタイル設定:CSS設定」の領域にCSSを設定することでサムネイルの大きさを変更できます。
以下、追加するCSSの二つの例を示します。
追加するCSS
1)PCで閲覧するときにサイズを大きくする(サムネイルの高さ200pxの場合)
@media screen and (min-width: 950px) {
#homeBody.shelfBackground{
background-size: auto 530px;
}
#content.shelfContent .shelf {
background-size: auto 530px;
min-height: 795px;
}
#content.shelfContent .shelf ul li {
width: 200px;
height: 265px;
box-sizing: border-box;
flex: 0 0 200px;
-ms-flex: 0 0 200px;
margin: 0 15px;
}
#content.shelfContent .shelf .ctitleWrapper {
width: 190px;
}
#content.shelfContent .shelf .cimageWrapper {
width: 200px;
bottom: 15px;
}
#content.shelfContent .shelf img.thumbnail {
max-width: 200px;
max-height: 200px;
}
}
2)モバイルで閲覧するときにサイズを大きくする(サムネイルの高さ120pxの場合)
@media screen and (max-width:949px) {
#homeBody.shelfBackground{
background-size: auto 360px;
}
#content.shelfContent .shelf {
background-size: auto 360px;
min-height: 360px;
}
#content.shelfContent .shelf ul li {
width: 120px;
height: 180px;
box-sizing: border-box;
flex: 0 0 120px;
-ms-flex: 0 0 120px;
margin: 0 12px;
}
#content.shelfContent .shelf .ctitleWrapper {
width: 110px;
}
#content.shelfContent .shelf .cimageWrapper {
width: 120px;
bottom: 10px;
}
#content.shelfContent .shelf img.thumbnail {
max-width: 120px;
max-height: 120px;
}
}