/noratetsu/_CSS_Grid-lg - Scrapbox Reader

generated at 2/16/2025, 8:40:42 PM
_CSS_Grid-lg
UserCSS設定のための管理者用ページです。
グリッドサイズを最大にした時の挙動をブログビュー風に変更。
説明→●グリッドサイズ変更でビューを変えるようにした

万が一参考にしたいとお考えの方がいらっしゃる場合、私のCSSではなく、これのために参考にした元のプロジェクト/katolab様をご参照ください。
（は手探りでやっているので適切でない記述がたくさん紛れている可能性があります。）

2021/12/04
あまり幅が広すぎても見づらいので左右の余白を多く取るようにした

●ページ一覧での左右余白を変数で整理する
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;}
}

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;
 	border: solid 1px #DDD;
} 
.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;
}

ブログビューに限り除外するページの設定
style.css.page-list .grid.grid-lg li.page-list-item.pin,
.page-list .grid.grid-lg li.page-list-item[data-page-title^="▽"], 
.page-list .grid.grid-lg li.page-list-item[data-page-title^="▼"], 
.page-list .grid.grid-lg li.page-list-item[data-page-title^="●"], 
.page-list .grid.grid-lg li.page-list-item[data-page-title^="_"],
.page-list .grid.grid-lg li.page-list-item[data-page-title^="Thinking out loud "], 
.page-list .grid.grid-lg li.page-list-item[data-page-title$="、"], 
.page-list .grid.grid-lg li.page-list-item[data-page-title="nora"] {
	display: none;
}

#_import