settings

import系

code:style.css

@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";

@import "../特定のページを非表示にするUserCSS/style.css";

@import "../Youtubeの埋め込みを小さくするUserCSS/style.css";

@import "../navbarが画面幅いっぱいに表示されるようになったのを元に戻すUserCSS/style.css";

@import "../本文リンクにamzn.toがあるとき、ページにアソシエイト参加中の一文を追加するUserCSS/style.css";

@import "../キャラアイコン表示用UserCSS/style.css";

フォント

code:style.css

.editor, .stream {

font-family: 'Noto Sans JP';

}

.cursor rect {

width: 2px;

}

幅

code:style.css

.page-column {

grid-template-columns: 46px minmax(20%, 90%) min-content;

grid-template-areas: "spacer page menu";

}

.page {

padding: 36px;

}

.line .telomere .telomere-border {

left: -36px ; /* -49px */

}

テーブル

code:style.css

/* セル間に線を入れる */

.table-block .cell {

/* 全てのセルの右と下 */

}

.table-block .cell:first-child {

/* 1列目のセルの左 */

}

.section-title + .line .table-block .cell {

/* 1行目のセルの上 */

}

/* テーブル名のリンク */

.table-block .table-block-start {

background-color: transparent;

&:before {

content: "▌";

letter-spacing: -4px;

}

& a {

}

}

アイコン画像

code:style.css

.icon {

border-radius: 4px;

}

アイコン拡大表示用

探偵.icon

code:style.css

.deco-\| {

display: inline-block !important;

filter: unset !important;

margin: 1em 0 0 !important;

vertical-align: bottom;

& img.icon {

height: 128px !important;

width: auto !important;

}

}

.deco-\! {

display: inline-block !important;

filter: unset !important;

margin: 1em 0 0 !important;

vertical-align: bottom;

img.icon {

height: 32px !important;

width: auto !important;

}

}

streamを非表示にする

code:style.css

display: none;

}

色変えなど

code:style.css

.line.permalink {

}

:root {

}

.line .telomere .telomere-border.unread:not(.updated-after-load) { border-color: var(--telomere-updated); } .line .telomere .telomere-border.updated-after-load { border-color: var(--telomere-updated); }

.scroll-bar-overlay .unread-bar { background-color: var(--telomere-updated) !important; }

/* 関連ページエリアの色変え*/

.grid li.relation-label.links a,

.grid li.relation-label.project-links a {

color: var(--page-link-color);

}

/* カードの上部ラインを消す */

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

border-top: 0px;

padding: 8px 12px 10px;

}

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

color: var(--code-block-label-text);

}

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

background-color: var(--code-block-bg);

}

/* 引用でタグ非表示にした分の不自然な空白に引用アイコンを配置する */

.line .quote {

border: 0;

position: relative;

}

.line:not(.cursor-line) .quote>.tag {

margin-right: .6em;

}

.line:not(.cursor-line) .quote::after {

position: absolute;

z-index: 0;

top: 0;

left: 0;

color: rgba(0, 0, 0, 0.25);

font-size:150%;

font-family: 'Font Awesome 5 Free';

font-weight: 600;

content: '\f10d';

padding-right: .4em;

vertical-align: super;

mix-blend-mode: multiply;

}

ぼかし記法

code:style.css

.line:not(.cursor-line) .deco-\~:not(:hover) { filter: blur(3px); }

Scrapboxアイコンをバーガーアイコンに置き換え

code:style.css

.brand-icon { display: none !important }

.navbar-brand::before {

content: '\f0c9';

font-family: 'Font Awesome 5 Free';

font-weight: 900;

font-size: 28px

}

ピン留め表示を変更

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: '\f08d';

font-family: 'Font Awesome 5 Free';

font-weight: 900;

font-size: 16px;

color: var(--page-bg);

bottom: 0;

display: inline-block;

transform: rotate(35deg);

}

検索ボックス拡張

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 .telomere .telomere-border,

.line .telomere .telomere-border.unread {

transition: none;

box-sizing: content-box;

}

.line .telomere .telomere-border:hover,

.line .telomere .telomere-border.unread:hover {

box-sizing: border-box;

width: auto;

background-color: transparent;

}

/* ↓新着以外のテロメアの色と太さ */

.line .telomere .telomere-border {

width: 2px;

}

/* ↓新着のテロメアの色と太さ */

.line .telomere .telomere-border.unread {

width: 3px;

}

画像を横に並べる

code:style.css

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

display: flex;

justify-content: center;

align-items: center ;

filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));

margin: -1em 0 -3em;

}

.line .deco-\| img.image {

object-fit: contain;

margin: 0;

filter: drop-shadow(0px 0px 0px ) !important;

top: 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) }

文中で引用する

code:style.css

.deco-\" {

padding: 0 .4em;

margin: 0 2px -3px 2px;

color: rgba(255, 255, 255, 0.8);

background-color: rgba(96, 135, 145, 0.8);

font-size:97%;

font-weight: 100%;

font-style: italic;

}

.deco-\"::before {

color: var(--navbar-icon-hovered-color);

font-size:65%;

font-family: 'Font Awesome 5 Free';

font-weight: 600;

content: '\f10d';

padding-right: .4em;

vertical-align: super;

}

外部リンクの色を変えたり、尻にアイコンをつけたりする

code:style.css

.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 900;

display: inline-block;

}

color: var(--page-extarnal-link-color);

text-decoration: none;

}

padding-bottom: 0px;

border: none;

}

ページ閲覧数を非表示にする

code:style.css

フォントを変えたらアイコンがずれるのでアイコンの-0.3emを解除

code:style.css_

/*.line img.icon {

top: 0;

}*/

画像のサイズを変える

code:style.css

.level-1 img { width: 16.7%; max-height: none; background-color: transparent; }

.level-1 .deco-- img {text-decoration: none; width:64px; background-color: transparent; }

.level-2 img { width: 33.3%; max-height: none; background-color: transparent; }

.level-3 img { width: 50%; max-height: none; background-color: transparent; }

.level-4 img { width: 66.7%; max-height: none; background-color: transparent; }

.level-5 img { width: 83.3%; max-height: none; background-color: transparent; }

.level-6 img { width: 100%; max-height: none; background-color: transparent; }

インデントされてないlevel-3以上を見出しとして使う

code:style.css

.line.line-title {

font-size: 2em;

}

.line-title .char-index {

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

background: var(--card-bg);

display: inline-block;

line-height: 1;

vertical-align: baseline;

padding-bottom: .1em;

&:first-of-type {

padding-left: .1em;

}

&:last-of-type {

padding-right: .1em;

}

}

.line.line-title .text {

padding-bottom: .5em;

}

strong.level-3:not(.indent strong.level-3),

strong.level-4:not(.indent strong.level-4),

strong.level-5:not(.indent strong.level-5),

strong.level-6:not(.indent strong.level-6) {

display: inline-block;

line-height: 1.1;

vertical-align: baseline;

margin-top: .5em;

font-weight: 400;

.deco-\* .char-index {

display: inline-block;

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

background: var(--card-bg);

padding-bottom: .1em;

margin-bottom: .2em;

&:first-of-type {

padding-left: .1em;

}

&:last-of-type {

padding-right: .1em;

}

}

}

強調記法以外でラベルと同じスタイルをつける

code:style.css

.deco-\+ {

display: inline-block;

line-height: 1;

vertical-align: baseline;

margin-top: .5em;

padding: .1em .2em .2em;

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

background: var(--card-bg);

font-size: 1.05em;

font-weight: 400;

}

リスト内で改行させる

1行目[, 2行目]

code:style.css

.deco-\,::before {

content: '\A';

white-space: pre;

}

インデント幅を変える

見出しをラベルにしたらインデントもっと深い方がバランスよかった

code:style.css

:root {

--li-indent-d: 1.5em; /* 段差の幅 */

--li-indent-0: 0em;

--li-indent-1: 2.5em;

--li-indent-2: calc( var(--li-indent-1) + var(--li-indent-d) );

--li-indent-3: calc( var(--li-indent-2) + var(--li-indent-d) );

--li-indent-4: calc( var(--li-indent-3) + var(--li-indent-d) );

--li-indent-5: calc( var(--li-indent-4) + var(--li-indent-d) );

--li-indent-6: calc( var(--li-indent-5) + var(--li-indent-d) );

}

ページ上部のハッシュタグを装飾する

code:style.css

display: inline-block;

padding: 0 .5em;

margin-right: .4em;

margin-top: .5em;

border-radius: 3px;

webkit-transform: scale(1);

transform: scale(1);

font-weight: 600;

letter-spacing: 2px;

/* 最初の#消す */

display: none;

}

&:not(:hover) {

}

&:hover {

}

&::before, &::after {

position: absolute;

content: '';

width: .5em;

height: 1.4em;

top: 4px;

}

&::before {

right: 0;

}

&::after {

left: 0;

}

}