😺
Simple Download Monitorファイル一覧の高さを揃える
wordPressのファイルのダウンロードの管理が出来るプラグインのSimple Download Monitorで、3カラムでファイル一覧を表示したときに、アイテムの高さが揃うようにコードを作りました。
こちらのショートコードが、3カラムでダウンロードファイル一覧を表示できます。
[sdm_show_dl_from_category category_slug="カテゴリのスラッグ" number="12" fancy="2" orderby="date" order="desc" ]
CSSのコードです。
/* ファイル一覧の表示 */
.sdm_fancy2_wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.sdm_fancy2_download_title {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.sdm_fancy2_download_title::after {
content: "\A0"; /* 非改行空白文字 */
white-space: pre;
display: block;
}
.sdm_fancy2_thumb_image {
width: 100px; /* または任意の幅 */
height:100px; /* または任意の高さ */
object-fit: cover;
}
.sdm_fancy2_download_title {
display: block;
height: 2em; /* 1行の高さが1emと仮定 */
position: relative;
margin-top:2em;
}
.sdm_fancy2_download_title::after {
content: "\A0"; /* 非改行空白文字 */
white-space: pre;
display: block;
}
/* ダウンロードボタン */
.sdm_fancy2_download_link{
margin-top:2em;
}
画像のサムネイルは、アップロードするときに、サイズを揃えてください。
A4縦のサイズの中にA4横のサイズのサムネイルがある場合は、A4縦のサイズに揃えてください。
つまりA4縦の中央に、縮小したA4横のサムネイルを配置して保存すると良いです。
Discussion