settings

任意のページをページ下部の link 及びトップページの 一覧から隠す

code:style.css

/* ピンどめしてるページは表示しないでよい */

/* Draft: 始まりのページは表示しないで良い */

/* settings 系のページは表示しないで良い */

.related-page-list li.page-list-item:is(

) { display: none; }

li.page-list-item:is(

) { display: none; }

カードに表示される画像を小さく中央揃えに

code:style.css

.grid li.page-list-item a .icon {

flex: none;

margin: auto;

}

.grid li.page-list-item a .icon img {

display: table-cell;

width: auto;

max-height: 90px;

max-width: 90%;

vertical-align: middle;

border-radius: 5px;

}

カードのデザイン

code:style.css

/* カードタイトル文字の周りのスペースを調整 */

.grid li.page-list-item a .header{

padding; 8px 10px;

}

/* タイトルの上のBorderを消して 背景色を設定 */

.grid li.page-list-item a .header{

background: var(--card-title-bg);

border-top: 0px;

}

/* カード自体の borde-radius を 0 に */

/* アウトラインつける */

/* カードの下にあるシャドウを消す */

.grid li.page-list-item:not(.pin) a {

border-radius: 0;

box-shadow: none;

}

Scrapboxのカラースキームをいじる

code:style.css

html {

--navbar-bg: var(--hounotes-dark) !important;

--2hop-search-bg: var(--hounotes-light) !important;

--card-title-bg: var(--hounotes-light) !important;

--card-bg: var(--hounotes-gray) !important;

--card-box-shadow-color: var(--hounotes-darkest) !important;

--tool-bg: var(--hounotes-gray) !important;

--page-bg: var(--body-bg) !important;

}

code:style.css

/* quote は変数公開されてないのでいじる, --code-bg と同じ色にする */

.line .quote {

font-style: italic;

padding-top: .25em;

padding-bottom: .25em;

padding-left: .5em;

padding-right: .5em;

}

Code block

code:style.css

.line span.code-block .code-block-start {

}

.line span.code-block .code-block-start a {

}

Table block

code:style.css

.table-block .table-block-start {

}

.table-block .table-block-start a {

}

.table-block .cell:nth-child(odd),

.table-block .cell:nth-child(even) {

background-color: var(--code-bg, rgba(0, 0, 0, 0.04));

}

ピンどめページを段落わけ

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) { grid-column-start: 1; }

ピンどめをテキストのみの見た目に

code:style.css

.grid li.pin {

height: 3rem;

width: 100%;

}

.grid li.pin a {

box-shadow: none !important;

}

.grid li.pin .header {

border-top:none !important;

padding: 6px 5px !important;

}

.grid li.pin .title {

text-align: center !important;

text-decoration: underline;

}

.grid li.page-list-item a .header.pinned {

}

.grid li.pin .content :is(.description,.icon) {

display: none !important;

}

.page-list-item a .pin {

background: none !important;

}

外部リンクをわかりやすくする (アイコンつける)

code:style.css

.line a.link {

}

.line a.link:hover {

}

/* 外部リンクにアイコンをつける */

.line a:not(.icon).link::after {

font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";

content: '\f35d';

display: inline-block;

font-size: 0.8em;

font-weight: bold;

margin-left: .4em;

}

/* Houdini のドキュメントはHアイコンにする */

content: '\f47e';

}

/* Wikipedia のアイコン */

.line a:not(.icon).link:is(

)::after {

content: '\f266';

}

/* Github のアイコン */

.line a:not(.icon).link:is(

)::after {

content: '\f09b';

}

/* Twitter */

content: '\f099';

}

/* Youtube */

.line a:not(.icon).link:is(

)::after {

content: '\f167';

}

/* vimeo */

content: '\f40a';

}

アイコンの左右に隙間をつくる

code:style.css

.line img.icon:not(.strong-icon):first-child { margin-left: 0.25em; }

.line img.icon:not(.strong-icon):last-child { margin-right: 0.25em; }

インデントのドットサイズを少し控えめに

code:style.css

.line .indent-mark .dot {

height: 5px;

width: 5px;

}

トップページみため系

Home のタイトルの前に / を入れる

code:style.css

.quick-launch .project-home span.title::before {

content: "/";

}

Home の右上にある page-sort menuを隠す

code:style.css

.quick-launch .right-box {

display: none;

}

文字装飾記法

code:style.css

.line:not(.cursor-line) .deco-\| {

display: flex;

justify-content: center;

align-items: center;

margin-top: -2em;

margin-bottom: -2em;

flex-wrap: nowrap;

}

/* Youtube 動画に対応 */

.line:not(.cursor-line) .deco-\| iframe.youtube {

width: 100%;

height: inherit;

}

code:style.css

/* 中央寄せにする部分, テキスト編集中は無効化 */

.line:not(.cursor-line) .deco-\" {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

margin-top: -2em;

margin-bottom: -2em;

}

/* 文字の見た目の部分 */

.line .deco-\" {

font-style: italic;

font-size: .8em;

}

code:style.css

.line span.deco-\! {

display: block;

padding: 1em;

border-radius: 4px;

vertical-align: middle;

}

.line:not(.cursor-line) span.deco-\! {

margin-top: -1.8em;

margin-bottom: -1.8em;

}

/* 左にアイコンを挿入する */

.line:not(.cursor-line) span.deco-\!::before {

font-family: 'Font Awesome 5 Free';

content: "\f06a";

font-size: 1em;

font-weight: 700;

margin-right: .3em;

}

.line .level-1 span.deco-\! {

font-weight: normal;

}

.line .level-2 span.deco-\! {

font-size: .833em; /* 1/1.2 */

font-weight: normal;

}

ページ下部に表示される関連で "Links" という箱を消す

code:style.css

.related-page-list .grid li.links {

display: none;

}

タグに迫力を出す

code:style.css

font-weight: bold;

padding: .2em .4em;

border-radius: .2em;

text-align: center;

}

}

テロメアいらないので非表示に

code:style.css

.telomere {

display: none;

}

code:style.css

.lines a.icon:is(

) {

display: block;

width: inherit;

pointer-events: none;

margin-top: -1em;

margin-bottom: -1em;

}

.lines img.icon:is(

) { display: none; }

Stream のみためを調整

code:style.css

.stream .page {

padding: 21px;

}

/* stream page の icon を消す */

.stream .page .icons {

display: none;

}

/* stream page の hr */

.stream .page .hidden-lines {

width: 1em;

}

/* stream のタイトルのデザイン */

.stream .line-title {

text-align: center;

font-weight: 700;

}

.stream .line-title a {

}

.stream .line-title a:hover {

color: var(--line-title-color);

text-decoration: none;

}

.stream .line-title a:active {

color: var(--line-title-color);

text-decoration: none;

}

/* Events を隠す */

.stream .project-events {

display: none;

}

記事ページのデザイン

code:style.css

/* 記事ページ本文の左右のpaddingを消す */

.page {

padding-right: 0px;

padding-left: 0px;

}

code:style.css

/* 記事ページタイトルを中央表示に */

.page-wrapper .lines .line-title span.text {

text-align: center;

font-weight: 700;

padding-bottom: 0;

}

code:style.css

/* 一行目の上下幅を調整 */

.page-wrapper .lines div.line:nth-child(2) {

padding-top: 10px;

padding-bottom: 10px;

margin-bottom: 21px;

}

/* 一行目を中央寄せに, 文字のデザイン */

.page-wrapper .lines div.line:nth-child(2) span.text {

text-align: center;

font-style: italic;

font-size: 0.9em;

}

/* 一行目になにも書かれていないなら圧縮する */

.lines .line:nth-child(2):not(.cursor-line) br.empty-char-index {

display: contents;

}

本文が無いページは圧縮してすぐに関連が見えるように表示する

code:style.css

/* .page 自体に設定されている padding を消す */

/* .page 下部の box-shadow を消す */

.page-wrapper main.page {

padding-top: 0;

padding-bottom: 0;

box-shadow: none;

}

/* .page の方で padding を消したので .line の最終要素に padding を追加する */

/* box-shadow の代わりに Border を表示する */

.page-wrapper div.line:last-child {

padding-bottom: 21px;

}

以降はおためし

code:style.css

.line:not(.cursor-line):nth-child(2) .deco-\" {

display: inherit;

}

.line:nth-child(2) .deco-\" {

font-size: inherit;

color: inherit;

font-style: inherit;

}

code:ignore.css

.line:not(.cursor-line):nth-child(2) .deco-\" span.char-index:first-child::before {

font-family: 'Font Awesome 5 Free';

content: "\f303";

font-size: .8em;

font-weight: 700;

margin-right: .4em;

}

code:style.css

background-color: inherit;

font-weight: bold;

padding: inherit;

text-align: center;

text-decoration: underline !important;

/* border-radius: 1em; */

}

}

code:style.css

/* table に Border を入れる */

.table-block .cell {

}

code:style.css

/* inline code 記法の syntax hilight を無効化 */

code.code span {

color: inherit !important;

}

code:style.css

/* 文字サイズ(おためし) */

.editor {

font-size: 14px;

}