6
NIERU★
ID nieru / 3
>>5
「管理 → 表示関連 → レイアウト関連 → トップページレイアウト → スレッドループテンプレート設定」
設定内容にある「%THUMBNAIL_URL%」を使用した画像要素へ、専用のclassを追加してください。
例:
<img src="%THUMBNAIL_URL%" class="thread-list-thumbnail" alt="">
既にclassが指定されている場合は、既存のclassを残して半角スペース区切りで追加します。
例:
<img src="%THUMBNAIL_URL%" class="thumbnail thread-list-thumbnail" alt="">
...もっと見る
続いて、「管理 → 表示関連 → レイアウト関連 → head・meta・style基本設定 → style設定」にCSSを追加します。
縦サイズのみ固定する場合:
.thread-list-thumbnail {
height: 280px;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
幅と高さを指定する場合:
.thread-list-thumbnail {
width: 160px;
height: 280px;
max-width: 100%;
object-fit: cover;
display: block;
}
画像要素に既存のwidth、height、またはstyle属性によるサイズ指定がある場合は、競合しないように削除してください。
「object-fit: cover」は指定サイズに合わせて一部を切り抜き、「object-fit: contain」は画像全体を表示します。