😺

Simple Download Monitorファイル一覧の高さを揃える

2023/10/18に公開

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