●スライドバーでビューを切り替えるようにする試行
※mypageに貼ったインポート構文で読み込んでいる先に書き込んでテストしているため、閲覧者の皆さんはまだご利用になれません。
まず新たに用意したいビューは…
ファイルリストのように表示する
明らかに右半分余っているので2列にしてみる（フォントサイズちょっと下げた）
これをカードのサイズを変えるスライドバーで切り替える
一部参考にしているページ
コードが現在めちゃめちゃ汚いのと、既に適用してあるものとの兼ね合いになっているところがあるのでまだコードは貼れない
だいたい整理されたので一応貼っておきますがあくまで自分用に作ったものです。
既にページ一覧にCSSを適用している場合、その箇所についてunsetとか書いておく必要が生じることがあります。
style.css.page-list .grid.grid-md li.page-list-item.grid-style-item {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
}
.page-list .grid.grid-md li.page-list-item.grid-style-item a {
/* width: 29vw; 3列にする */
width: 43vw; /* 2列にする */
/* width: 96vw; 1列にする */
/* max-width: 1184px; 1列の時に適用 */
height: auto;
margin: 0;
padding: 0;
border-radius: 0;
border: none !important;
}
.page-list .grid.grid-md li.page-list-item a {
width: 100%;
margin: 10px 0;
background-image: none !important;
box-shadow: none;
transition: background-color 300ms ease;
}
.page-list .grid.grid-md li.page-list-item a:hover {
box-shadow: none;
background-color: #F0F0F0; /* ライトテーマの場合 */
}
.page-list .grid.grid-md li.page-list-item a .content {
width: 100%;
height: 100%;
}
.page-list .grid.grid-md li.page-list-item a .title {
font-size: 14px;
line-height: 20px;
-webkit-line-clamp: 1; /* タイトルは1行のみ表示する */
}
.page-list .grid.grid-md li.page-list-item a .header {
border: none;
padding: 10px 20px;
}
.page-list .grid.grid-md li.page-list-item a .pin,
.page-list .grid.grid-md li.page-list-item a .hover,
.page-list .grid.grid-md li.page-list-item a .description {
display: none;
}
/* サムネイルを右端に表示する */
.page-list .grid.grid-md li.page-list-item a .icon {
position: absolute;
top: 0%;
right: 0%;
width: auto;
height: auto;
}
.page-list .grid.grid-md li.page-list-item a .icon img {
display: block;
max-height: 40px;
max-width: 100%;
object-fit: contain;
}備考
●特定のカードのサイズを小さくするを適用したカードが行方不明になる
ページ一覧上に存在はしているけど多分リストの裏にあって実質フィルタリングされた状態
空欄にならずに詰められている
→修正方法はわかった
挙動の利用を考える
更に→●ブログ風ビューの試行