settings
カラーテーマ
code:style.css
:root {
}
settingsを罫線に変更
code:style.css
.page-list-item.grid-style-item.pin:nth-child(4)
{
width: 100%;
height: 0px;
margin-top: 20px;
margin-bottom: 30px;
}
プランバッジを非表示にする
code:style.css
.quick-launch .plan-badge {
display: none;
}
バックグラウンドの色を変える
code:style.css
body {
background-color: var(--bg-color) !important
}
フォントを変更
code:style.css
body, .editor, .grid li, .list li.page-list-item .stream {
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
/* 文字を書くときのエディタの文字サイズ */
font-size: 16px;
line-height: 28px;
}
.editor .text {
color: var(--default);
font-size: 16px;
line-height: 28px;
}
.editor .line-title .text {
font-size: 42.667px;
line-height: 1.75;
font-weight: bold;
}
ハッシュタグの見た目
code:style.css
opacity:0.7;
padding: 4px 6px;
font-size: 0.9em;
border: 1px solid;
border-radius: 2px;
}
opacity:1;
}
入力時の文字色と背景色を変更する
code:style.css
textarea#text-input:focus {
background: var(--default);
color: var(--bg-color);
}
カーソルをカスタマイズ
code:style.css
/* カーソルの幅と色替え */
.cursor { width: 4px; background-color: var(--default) }
@keyframes blink {
0% {opacity: 0}
49%{opacity: 0}
50%{opacity: 0.5}
}
.cursor {
animation: blink 1s infinite
}
ページメニューの色とホバー時の不透明度を変更
code:style.css
color: var(--default);
opacity: 0.1; /* Set this to 0 if you want a complete 無 */
transition: opacity 0.5s;
}
opacity: 1;
color: var(--default);
}
display: none;
}
ページメニューの色を調整
code:style.css
body {
--tool-color: var(--fg-color);
--tool-light-color: var(--fg-color);
--tool-badge-bg: var(--bg-color);
--tool-bg: var(--bg-color);
--tool-text-color: var(--fg-color);
--body-headings-color: var(--bg-color);
}
ドロップダウンメニューの色を変更する
code:style.css
body {
--dropdown-menu-bg: var(--fg-color);
--dropdown-menu-text-color: var(--shade);
--dropdown-menu-text-hover-color: var(--default);
--dropdown-menu-text-hover-bg: var(--bg-color);
}
code:style.css
.dropdown-menu,
.drawer .drawer-menu {
background-color: var(--dropdown-menu-bg);
border: var(--dropdown-menu-border, unset);
}
.dropdown-menu > li > a,
.drawer .drawer-menu ul li a,
.page-menu ul > li > div {
color: var(--dropdown-menu-text-color, #333); }
.dropdown-menu>li>a:active,
.drawer-menu ul li a:active,
color: var(--dropdown-menu-text-hover-color, #262626); background-color: var(--dropdown-menu-text-hover-bg, #f5f5f5); }
:is(.dropdown-menu, .drawer-menu) .divider {
color: var(--dropdown-menu-divider-color, #e5e5e5); }
.project-list-tab>a.active {
color: var(--dropdown-menu-bg);
background-color: var(--dropdown-menu-text-hover-color);
}
.project-list-tab>a {
color: var(--dropdown-menu-text-hover-bg);
background-color: var(--dropdown-menu-text-color);
}
検索ボックスの色を変える
code:style.css
body {
--search-form-bg: var(--bg-color);
--search-form-icon-color: var(--fg-color);
--search-form-icon-focus-color: #ffffff; }
form {
border:0px;
}
homeのgridを調整
code:style.css
.related-page-list .grid li.page-list-item a .header {
height: auto;
}
.grid li.page-list-item a .header .title {
font-size: 14.222px;
font-weight: 400 !important;
color: var(--default);
text-align: left;
line-height: 20px;
}
.grid.grid-md li.page-list-item a .description {
font-size: 12.8px;
padding: 7.5px;
line-height: 20px;
}
.grid.grid-lg li.page-list-item a .description {
font-size: 12.8px;
padding: 7.5px;
line-height: 20px;
}
.grid li.page-list-item a .description {
padding: 7.5px;
font-size: 12.8px;
line-height: 20px;
white-space: pre-line;
column-count: 1;
column-gap: 2em;
column-width: 12em;
height: 75%;
color: var(--shade);
flex-shrink: 16;
overflow: hidden;
}
.grid li.page-list-item a .icon {
padding: 0 0px;
}
.grid-md.grid li.page-list-item a .icon {
padding: 0 0px;
}
.grid li.page-list-item a .header {
padding: 10px 7.5px;
}
.grid-md.grid li.page-list-item a .header {
padding: 10px 7.5px;
}
.grid-lg.grid li.page-list-item a .header {
padding: 10px 7.5px;
}
.grid li.page-list-item a {
background-color: var(--fg-color);
box-shadow: none !important;
}
.grid li.page-list-item a .content {
justify-content: center;
align-content: bottom;
}
.navbar-default {
background-color: var(--fg-color);
overflow: unset;
}
.grid li.page-list-item a {
box-shadow: none !important;
}
ul.grid li.page-list-item a .header{
border-top: solid 1.75px var(--blue-link);
}
ul.grid-md.grid li.page-list-item a .header{
border-top: solid 1.75px var(--blue-link);
}
ul.grid-lg.grid li.page-list-item a .header{
border-top: solid 1.75px var(--blue-link);
}
.page {
box-shadow: none !important;
background-color: var(--fg-color);
}
関連ページ検索ボックスを調整
code:style.css
.related-page-list .toolbar .related-page-list-search .fa-search {
color: var(--shade);
font-size: 12.8px;
}
.related-page-list .toolbar .related-page-list-search {
background-color: var(--fg-color);
}
.related-page-list .toolbar .related-page-list-search input {
font-size: 12.8px;
}
コードブロックの色を調整
code:style.css
.line code{
background-color: var(--cb-color);
}
.line span.code-block {
background-color: var(--cb-color);
}
下部 new link 非表示
code:style.css
.empy-links{
display:none;
}
重要な部分を黒くする
ここが 重要なところ です!!
code:style.css
.deco-\! {
color: var(--fg-color); /* 文字 */
background-color: var(--default); /* 背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
選択範囲の色を変更
code:style.css
.selections{
background-color: var(--highlight);
}
行頭のドットを四角に変更する
code:style.css
.line .indent-mark .dot {
border-radius: 0%;
}
行頭のドットをハイフンに加工
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 5px;
height: 1px;
}
画像クリック時のURL非表示
code:style.css
.full-content-modal .modal-dialog .modal-content .modal-body a.link .text {
display: none;
}
引用
code:style.css
.line .quote {
display: inline-block;
border-left: solid 5px var(--default);
padding-right: 1em;
font-size: 0.9em;
background: var(--highlight);
}
メニューアイコンとロゴを非表示
code:style.css
.brand-icon {
display: none;
}
右下のページ数非表示
code:style.css
.status-bar {
display: none;
}
テロメア非表示
code:style.css
.telomere {
display: none;
}
pinのドッグイヤー非表示
code:style.css
.grid li.page-list-item a .pin {
display: none;
}
pinのページの高さ変更
code:style.css
li.grid-style-item.pin{
height:100% ;
width:100% ;
}
pinのiconを非表示
code:style.css
li.page-list-item.grid-style-item.pin a .content .icon {
display: none;
}
pinの色を変更
code:style.css
.grid li.page-list-item.pin a {
box-shadow: none !important;
}
ul.grid li.page-list-item.pin a .header{
border-top: solid 4px var(--highlight);
}
ul.grid-md.grid li.page-list-item.pin a .header{
border-top: solid 4px var(--highlight);
}
ul.grid-lg.grid li.page-list-item.pin a .header{
border-top: solid 4px var(--highlight);
}
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
ページリストでpinの内容を非表示
code:style.css
.page-list.clearfix .grid li.page-list-item.pin a.description {
display: none;
}
新規ページボタンを調整
code:style.css
background-color: var(--new-button-bg);
}
background-color: var(--new-button-bg);
}
新規ページボタンの色を変更
code:style.css
body {
--new-button-horizontal-color: var(--bg-color);
--new-button-vertical-color: var(--bg-color);
--new-button-bg: var(--fg-color);
}
ハイパーリンクの色を調整
code:style.css
color: var(--blue-link) !important;
}
color: var(--red-link) !important;
}
関連項目ラベルの色を調整
code:style.css
body {
--relation-label-bg: var(--blue-link);
--relation-label-text: var(--fg-color);
--relation-label-links-bg: var(--blue-link);
--relation-label-links-text: var(--fg-color);
--relation-label-empty-bg: var(--red-link);
--relation-label-empty-text: var(--fg-color);
}
hoverした時だけ下線を描画
code:style.css
.line a.link, .line a.page-link {
color: var(--default);
text-decoration: none;
}
.line a:hover {
text-decoration: underline;
}
mobile用UserCSS
code:style.css
@media (max-width: 420px) {
.line img.image {
max-height: none !important;
max-width: 100% !important;
}
}
チェックボックスになるタグ
code:import.css
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref$='/o':not(.icon) span, .line:not(.cursor-line) ahref$='/v':not(.icon) span { display: inline-block; width: 0; text-indent: -9999px
}
.line:not(.cursor-line) ahref$='/o':not(.icon)::after, .line:not(.cursor-line) ahref$='/v':not(.icon)::after { display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 400;
font-size: 120%; text-align: center; vertical-align: middle
}
.line:not(.cursor-line) ahref$='/o':not(.icon)::after { content: '\f0c8'; color: var(--shade);
}
.line:not(.cursor-line) ahref$='/v':not(.icon)::after { content: '\f14a'; color: var(--blue-link);
}
外部リンクにiconを付与
code:style.css
.line span:not(.modal-image) > a.link:not(.icon)::before {
font-family: 'Font Awesome 5 Free';
content: ' \f101';
font-weight: 600;
display: inline-block;
padding: 0 0.5em 0 0;
color: var(--blue-link);
}
読み込みアニメーション
code:style.css
/*読み込みアニメーション*/
a {
animation: fadeIn 0.8s cubic-bezier(.38,-0.01,.22,.99) 0s 1 normal;
}
@keyframes
fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
画像を並べて表示
1. 一行に敷き詰め] [| [画像URL][画像URL][画像URL]…]
2. 横幅いっぱい1列並べる] [*| [画像URL][画像URL][画像URL]…]
3. 3列並べ [***| [画像URL][画像URL][画像URL]…]
4. 5列並べ [*****| [画像URL][画像URL][画像URL]…]
code:style.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 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 }
[** [画像URL]] で77%中央配置
code:style.css
.level-2 img.image {
width: 77%;
display: block;
margin: 0 auto;
}
.level-3 img.image {
max-height: 300px;
}
.level-4 img.image {
display: none;
}
span.deco .empty-char-index{
display: none;
}
[[画像URL]] で中央配置
code:style.css
.line img.strong-image {
display: block;
margin: 0 auto;
}
画像の高さ制限OFF
code:style.css
.line .image {
max-height: none;
}
リストアイテムのサムネイル調整
code:style.css
.grid li.page-list-item a .icon {
height: 100%;
}
.grid li.page-list-item a .icon img {
display: block;
min-height: 100%;
object-fit: contain;
object-position: 50% 28%;
width: 100%;
/* margin: 0 auto; */
}
pinの内容を非表示
code:style.css
.page-list > .grid li.pin {
height: 44px;
width: 100%;
margin-bottom: 5px;
}
.page-list > .grid li.page-list-item.pin a .content :is(.description,.icon) {display: none;}
.page-list > .grid li.page-list-item a .pin {background: none;}