settings
CSS設定
@importが最上部に来るように分割する
code:style.css
code:custom.css
フォントの変更(Windows : Yu Gothic)
code:font.css
.editor, .stream, .grid li.page-list-item a .title {
font-family: Roboto , "Yu Gothic Medium" , sans-serif;
}
タイトルバーのフォント変更
code:navbar.css
a.project-home > span.title {
font-family: 'Permanent Marker', serif;
}
画像表示形式の変更
code:custom.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex; }
.line .deco-\| img.image { object-fit: contain; margin: 0; }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1); }
.line .level-2 .deco-\| > span { width: calc(100%/2); }
.line .level-3 .deco-\| > span { width: calc(100%/3); }
.line .level-4 .deco-\| > span { width: calc(100%/4); }
.line .level-5 .deco-\| > span { width: calc(100%/5); }
.line .level-6 .deco-\| > span { width: calc(100%/6); }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100%; } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden; } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em; } 外部リンクにアイコンを表示
code:custom.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
font-weight: 900;
content: ' \f35d';
display: inline-block;
}
箇条書き表示の変更
箇条書き表示の明度をインデントレベルに応じて変更
code:custom.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .c-0 + .dot {
height: .2em;
width: .4em;
border-radius: 25%;
}
.app:not(.presentation) .line .indent-mark .c-0 + .dot {
top: auto;
bottom: 0;
}
.app .line .indent-mark .c-1 + .dot {
height: .2em;
width: .4em;
border-radius: 25%;
}
.app:not(.presentation) .line .indent-mark .c-1 + .dot {
top: auto;
bottom: 0;
}
.app .line .indent-mark .dot {
height: .2em;
width: .4em;
border-radius: 25%;
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0;
}
code:custom.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:custom.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
テロメアを非表示
code:custom.css
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
display: none;
}
空ページへのリンク
code:custom.css
}
カードの縦長の画像を縮小して全体を表示する
code:custom.css
.content .icon {
overflow: hidden;
}
.content .icon img {
height: auto !important;
width: auto !important;
max-height: 100%;
max-width: 100%;
}
カードの横長の画像を上下中央揃えにする
code:custom.css
.content .icon {
margin: auto 0 auto 0;
}
ヘッダーを固定する
code:navbar.css
.navbar {
top: 0px;
z-index: 51010;
background-color: rgba(236,39,87,0.7);
backdrop-filter: unset;
margin-bottom: 0;
}
.expandable-menu {
z-index: 51011;
}
.modal {
z-index: 501013;
}
.modal-backdrop {
z-index: 501012;
}
.search-form .form-group input {
color: var(--search-form-text-color, rgba(255, 255, 255, 0.7));
background-color: var(--search-form-bg, rgba(255, 255, 255, 0.55));
}
code:custom.css
/* カーソルの幅と色替え */
.cursor {
width: 3px; background-color: rgb(0, 0, 0, 0.75);
}
背景の変更
code:custom.css
html{
min-height: 100vh;
overflow-y: scroll;
}
body::before{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
タイトルバーの表示変更
code:navbar.css
a.project-home > span.title {
font-size: 0;
height: 38px;
}
a.project-home > span.title:after {
font-size: 24px;
content: "ivgtr.md";
}
/* ホームボタンをナビゲーションバー内に固定する */
.quick-launch .project-home {
left: 60px;
color: white;
position: relative;
pointer-events: auto;
}
.quick-launch {
margin-bottom: 1rem;
}
.quick-launch .project-home:hover {
background-color: rgba(0,0,0,0.08)!important;
color: snow!important;
}
.quick-launch .left-box {
position: fixed;
top: 0;
z-index: 51011;
width: 100%;
pointer-events: none;
}
.quick-launch .plan-badge {
margin: 0 0 0 64px;
}
アイコンの変更
code:navbar.css
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-size: cover;
border-radius: 9999px;
}
Streamにアクセスするボタン
code:navbar.css
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
code:navbar.css
.kamon {
margin-left: 5px;
}