settings
張り付くメニューバー
code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
?
code:style.css
.line strong {
}
ピン止めページを別の段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
強調表現の文字色を変更
code:style.css
.line strong {
}
強調をマーカーに変更
マーカー風
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient(transparent 30%, #7fff7f 90%, transparent 100%) }
タイトルをナビゲートバーに固定
code:style.css
@media screen {
.quick-launch .left-box {
position: fixed;
top: -2px;
left: 40px; /* brand-iconの幅に応じて変えてください */
z-index: 1000;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .left-box {
left: 55px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .left-box {
left: 70px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .left-box {
left: calc((100% - 1280px)/2 + 80px);
}
}
code:style.css
.btn-pagetop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
}
ビュレット関連
/icons/hr.icon
ビュレットをFontAwesomeに変更
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -5px;
top: -10px;
font-family: 'Font Awesome 5 Free';
/* font-family: FontAwesome; /* old */
font-weight: 900;
font-size: 6px;
/* content: '\f00c'; /* チェックマーク */
/* content: '\f068'; /* マイナス記号 */
/* content: '\f10c'; /* まる */
/* content: '\f111'; /* まる */
content: '\f0c8'; /* 四角 */
/* content: '\f096'; /* 四角 */
/* content: '\f140'; /* 二重丸 */
color: var(--li-color-0);
}
.line .indent-mark .dot {
background-color: transparent;
}
ビュレット色指定
code:style.css
.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5);
}
ビュレットカラーセット
code:style.css
:root {
}
/icons/hr.icon
ピン留め以外を非表示
code:style.css
.page-list .grid li:not(.pin) {
display: none;
}
ピンのスタイルを変える
code:style.css
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f0c6'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px; color: #2f4f4f; bottom: 0 }