settings
code: style.css
/*本文が入る領域*/
.page {
box-shadow: none;
}
/*文字色*/
.editor {
}
/*画像サイズ*/
.line img.image {
max-height: none ;
max-width: 95% ;
}
/*リストの色*/
.grid li.page-list-item a {
}
/*背景色*/
body {
}
/*マウスオーバー*/
.grid li.page-list-item a .hover {
background-color: rgba(00, 00, 00, 0.3) ;
}
参考
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
参考
code:style.css
.grid li.page-list-item a .icon {
position: relative;
display: flex; /* フレックスボックスを有効化 */
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
padding: 0; /* 不要な余白を削除 */
margin: 0 auto !important;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 110%;
max-width: 200%;
vertical-align: middle;
border-radius: 3px;
}
参考
code:style.css
/* grid設定でアイテムを上詰めにする */
.grid {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
}
/* その他のアイテムが上に寄るように調整 */
.grid li.page-list-item {
margin: 0;
padding: 0;
flex-shrink: 0; /* 他のアイテムが圧縮されないように */
}
参考
code:style.css
.line .telomere .telomere-border {
border-width: 0px 0px 0px 0px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none
}
.unread {
border-color: #000 !important; }
参考
code:style.css
.navbar {
background-color: #000000 !important; }
.new-page-button {
background-color: #222 !important; /* 暗くする */ color: #555 !important; /* 文字色も暗く */ }
img, canvas, video {
max-width: 100% !important;
height: auto !important;
display: block;
}
img {
width: 100% !important; /* 親要素の幅に合わせて画像を広げる */
height: auto !important; /* 高さを自動で調整し、アスペクト比を保持 */
display: block; /* 画像の下に余白ができるのを防ぐ */
}
.col-menu {
display: none !important;
}
.page-menu {
position: absolute; /* もしくは fixed、必要に応じて */
top: 10; /* 上からの位置調整 */
right: 0; /* 右端に配置 */
left: auto; /* 左側の位置を無効化 */
bottom: auto; /* 必要に応じて下の位置を調整 */
}
.page-list-item.pin {
grid-column-start: 1 !important;
}
/* 他のページを上に寄せる */
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 2fr));
gap: clamp(8px, 1.5svw, 16px);
align-items: start; /* 上詰めにする */
}
li.page-list-item.pin {
grid-row-start: auto;
grid-row-end: span 1;
width: 100%;
height: 1px !important;
}
.flex-container {
display: flex;
justify-content: flex-start; /* 左寄せ */
align-items: flex-start; /* 上寄せ（必要に応じて） */
}
.container {
max-width: 1596px;
}
code:style.css
.page-list .grid li {
width: 250px !important;
height: 250px !important;
margin: 0 0px 0px 0;
}
.grid li.page-list-item a .header {
padding: 7px 5px !important;
border: none;
background-color: rgba(0, 0, 0, 0)
}
参考
code: style.css
.grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}
code: style.css
.page-list .grid li.page-list-item{
width: 1%;
height: 1px;
}
/* pinの高さ */
/* pin の意匠を消す*/
.grid li.page-list-item a .pin{
display: none;
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
li.page-list-item.pin {
grid-row-start: auto;
grid-row-end: span 1;
width: 100%;
height: 1px !important;
}