●スライドバーでビューを切り替えるようにする試行
※mypageに貼ったインポート構文で読み込んでいる先に書き込んでテストしているため、閲覧者の皆さんはまだご利用になれません。
https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20
まず新たに用意したいビューは…
ファイルリストのように表示する
https://gyazo.com/e75295ef2c55ba2d07b041fe4aeeec6d
明らかに右半分余っているので2列にしてみる（フォントサイズちょっと下げた）
https://gyazo.com/2d2dc68c1e910ca8731bf20758bbb098
これをカードのサイズを変えるスライドバーで切り替える
https://gyazo.com/15a961adf62d3983babe5522c30bfd37
一部参考にしているページ
コードが現在めちゃめちゃ汚いのと、既に適用してあるものとの兼ね合いになっているところがあるのでまだコードは貼れない
だいたい整理されたので一応貼っておきますがあくまで自分用に作ったものです。
既にページ一覧にCSSを適用している場合、その箇所についてunsetとか書いておく必要が生じることがあります。
code: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;
}
備考
ページ一覧上に存在はしているけど多分リストの裏にあって実質フィルタリングされた状態
空欄にならずに詰められている
→修正方法はわかった
挙動の利用を考える