_CSS_Grid-lg
UserCSS設定のための管理者用ページです。
グリッドサイズを最大にした時の挙動をブログビュー風に変更。
万が一参考にしたいとお考えの方がいらっしゃる場合、私のCSSではなく、これのために参考にした元のプロジェクト/katolab様をご参照ください。 （nora.iconは手探りでやっているので適切でない記述がたくさん紛れている可能性があります。）
2021/12/04
あまり幅が広すぎても見づらいので左右の余白を多く取るようにした
code:style.css
@media screen and (min-width: 1261px) {
:root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
:root {--margin-side: 8px;}
}
code:style.css
.page-list ul.grid.grid-lg {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
width: 100%;
}
.page-list .grid.grid-lg li.page-list-item {
width: unset;
height: unset;
margin: 0;
}
.page-list .grid.grid-lg li.page-list-item a {
width: calc(90vw - var(--margin-side) * 4);
border-radius: 0;
border: none !important;
background-image: none !important;
box-shadow: none;
}
.page-list .grid.grid-lg li.page-list-item a .content {
padding: 20px;
}
.page-list .grid.grid-lg li.page-list-item a .header {
border: none;
}
.page-list .grid.grid-lg li.page-list-item a .pin,
.page-list .grid.grid-lg li.page-list-item a .icon {
display: none;
}
.page-list .grid.grid-lg li.page-list-item a .description {
max-height: 200px;
margin-bottom: 20px;
}
.page-list .grid.grid-lg li.page-list-item a .description::after {
content: "本文を読む";
position: absolute;
right: 50px;
}
ブログビューに限り除外するページの設定
code:style.css
.page-list .grid.grid-lg li.page-list-item.pin,
display: none;
}