Settings
https://scrapbox.io/files/622f42b0af1ae10021da6f0d.png
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
検索窓の表示数を増やす
code:style.csse
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto
}
code:style.css
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline } .code-block code > span:not(class)::before { content: counter(codeline);
position: absolute; display: inline-block; left: -4em; z-index: 10;
min-width: 50px; text-align: right; vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 } .cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } } code:style.css
/* スマートフォンには適用しない */
@media screen and (min-width: 768px) {
/* 各要素を非表示 */
.grid li.relation-label a .icon-lg, /* 「Links」のアイコン */
.grid li.relation-label .arrow, /* ラベルの右しっぽ */
.related-page-list .grid li.page-list-item a .description, /* ページの概要 */
.related-page-list .grid li.page-list-item a .icon /* サムネイル */ {
display: none;
}
/* 関連ページを左ペイン化 */
.related-page-list {
position: fixed;
left: 10px;
margin: -30px 20px 0 3vw; /* -30pxの部分はプロジェクトタイトルの位置に応じて変えてください */
padding: 0 10px 0 20px;
width: 18vw;
/* 関連リンク一覧部分を独立してスクロール */
height: 86vh;
overflow-y: auto;
z-index: 20; /* エディタ部分と領域が重なる可能性があるのでエディタより上層に設定 */
}
.drag-and-drop-enter {
position: absolute;
left: calc(20vw + 30px);
width: calc(55vw + 60px);
margin-top: -30px;
padding-left: 40px; /* 行番号表示が隠れないように設定 */
}
.related-page-list .grid {
width: 100%;
}
.related-page-list .grid li {
width: 100%;
margin: 2px;
height: auto !important;
}
.related-page-list .grid li a {
background: unset;
border: unset;
box-shadow: unset !important;
}
.related-page-list .grid li a .header {
padding: 0;
}
.related-page-list .grid li.page-list-item a {
background-color: var(--card-bg, #fff); /* 定義されているテーマでなければ白を設定 */ }
.related-page-list .grid li.page-list-item a .title {
font-size: 12px; /* ページタイトルを小さめに表示 */
}
.related-page-list .grid li.relation-label {
width: 100%;
min-height: 33px;
}
.related-page-list .grid li.relation-label .title {
display: block;
font-size: 12px; /* ラベルタイトルを小さめに表示 */
}
.related-page-list .grid li.relation-label.headword a {
display: block;
background-color: #888; /* ラベルの色 プロジェクトテーマに合わせて変えてください */ }
.related-page-list .grid li.relation-label:is(.links,.empty-links) {
min-height: unset;
height: auto;
}
.related-page-list .grid li.relation-label:is(.links,.empty-links) a {
display: block;
cursor: default; /* クリックしても何も起こらないのにデフォルトのカーソルがリンク用になっているのが気になったため */
background: unset; /* 「Links」のラベルの色 好きな色に設定してください */
margin: auto;
}
/* 「・・・」部分の調整 */
.grid li.ellipsis a {
display: block;
text-align: right;
height: 36px;
}
.grid li.ellipsis a .circle {
border-radius: 0;
height: 20px;
width: 40px;
}
/* 関連ページ要素のカウント */
/* ラベルをナンバリング */
.related-page-list {
counter-reset: label;
}
.related-page-list .grid li.relation-label.headword {
counter-increment: label;
}
.related-page-list .grid li.relation-label.headword::before {
content: counter(label);
position: absolute;
display: block;
left: 0px;
z-index: 10;
text-align: right;
font-size: 12px;
color: #fff; /* テーマに合わせて変えてください */ }
/* 各ラベルごとにページをナンバリング */
.related-page-list .grid {
counter-reset: item;
}
.related-page-list .grid li.page-list-item {
counter-increment: item;
}
.related-page-list .grid li.page-list-item::before {
content: counter(item);
position: absolute;
display: block;
left: -32px;
z-index: 10;
min-width: 30px;
text-align: right;
font-size: 12px;
}
/* ページメニューを固定 */
.col-page-side .page-menu {
position: fixed;
top: 100px;
}
}
code:style.css
.deco-\! {
}
.deco-\% {
}
.deco-\# {
}
.deco-\~ {
}
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; }