4
NIERU★
ID nieru / 3
投稿本文内に表示される添付画像のサムネイルについて、HTMLとCSSを直接編集することで、縦サイズ固定または幅・高さを任意に指定できます。
「管理 → 表示関連 → レイアウト関連 → 添付ファイル表示レイアウト」を開き、「画像ファイルの表示レイアウト」にある画像要素へ専用のclassを追加してください。
例:
<a href="%DETAIL_URL%"><img src="%THUMBNAIL_URL%" class="embed-image
post-file-thumbnail" style="margin:5px" alt="%NAME%"></a>
続いて、「管理 → 表示関連 → レイアウト関連 → head・meta・style基本設定 → style設定」にCSSを追加します。
...もっと見る縦サイズのみ固定する場合:
.post-file-thumbnail {
height: 280px;
width: auto;
max-width: 100%;
display: block;
}
幅と高さを指定する場合:
.post-file-thumbnail {
width: 160px;
height: 280px;
max-width: 100%;
object-fit: cover;
display: block;
}
数値はご希望のサイズに変更していただけます。
「object-fit: cover」は、指定したサイズに合わせて画像の一部を切り抜いて表示します。画像全体を切り抜かずに表示したい場合は、「cover」を「contain」へ変更してください。
既存の「embed-image」classだけを変更すると、ほかの画像表示にも影響する可能性があるため、専用classを追加する方法をおすすめいたします。