settings

import系

code:style.css

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

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

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

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

@import "../UserCSS-descriptionにinline-iconが含まれる時、最初のアイコンを拡大してサムネ代わりにする/style.css";

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

@import '../UserCSS-拡張記法で画像表示サイズを調整する/style.css';

@import "../UserCSS-ブレット変更/style.css";

フォント

code:style.css

.editor, .stream {

font-family: 'Noto Sans JP';

}

.cursor rect {

width: 2px;

}

変数定義

code:style.css

body {

--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);

--tool-bg: rgba(0, 0, 0, 0.1);

--navbar-bg: rgba(64, 69, 81, 0.3);

--2hop-search-bg: rgba(255, 255, 255, 0.15);

--new-button-vertical-color: var(--new-button-horizontal-color);

--card-box-shadow-color: transparent;

--card-box-shadow: none;

--card-box-hover-shadow: transparent;

--tool-light-color: rgba(183, 189, 197, 0.4);

--tool-bg: rgba(183, 189, 197, 0.1);

--tool-badge-bg: rgba(183, 189, 197, 0.2);

--body-headings-color: var(--tool-color);

}

管理者のみ適用/管理者以外に適用

code:css

/* 管理者のみ適用 */

}

/* 管理者以外に適用 */

}

ページ全体

code:style.css

@media(width < 1024px) {

body {

--app-padding-top: 36px;

--container-width: 736px;

--page-padding: 20px 25px;

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

--li-indent-0: 0em;

--li-indent-1: 1em;

--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));

}

.telomere { display: none; }

}

@media(width >= 1024px) {

body {

--app-padding-top: 40px;

--container-width: 956px;

--page-padding: 20px 25px;

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

--li-indent-0: 0em;

--li-indent-1: 1em;

--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));

}

.telomere { display: none; }

}

@media(1024px < width) {

body {

--app-padding-top: 56px;

--container-width: 1300px;

--page-padding: 36px;

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

--li-indent-0: 1em;

--li-indent-1: 1em;

--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));

}

}

.app {

padding-top: var(--app-padding-top);

}

.container {

max-width: var(--container-width);

}

.page-column {

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

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

}

.page {

padding: var(--page-padding);

border-radius: 2px;

}

.line .telomere .telomere-border {

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

}

/* 水平線しかない行は上下の空白を減らす */

margin-top: -1em;

margin-bottom: -2em;

}

/* 画像リンクの縦サイズを高さいっぱいにする */

a:has(img) {

display: inline-block;

}

テーブル

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: .5rem 0 0 !important;

vertical-align: bottom;

& img.icon {

height: 96px !important;

width: auto !important;

}

}

.line:has(.deco-\| img.icon) .indent-mark {

min-height: 128px;

}

.deco-\! {

display: inline-block !important;

filter: unset !important;

margin: 1em 0 0 !important;

vertical-align: bottom;

& img.icon {

height: 32px !important;

width: auto !important;

}

}

.line:has(.deco-\! img.icon) .indent-mark {

min-height: 32px;

}

/* 特定の文字のスペースを調整する */

streamを非表示にする

code:style.css

}

色変えなど

code:style.css

.line.permalink {

}

.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);

}

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

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

&:hover {

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

}

}

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

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

}

.fa-copy:before {

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

}

.line span.code-block .tool-buttons {

margin-left: 0;

}

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

.line .quote {

border: 0;

position: relative;

}

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

margin-right: 14px;

}

.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;

}

/* 引用行が連続している場合は引用アイコンを消す */

.quote-line + .quote-line .quote::after { content: none; }

文字色を薄くにする

code:style.css

ぼかし記法

code:style.css

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

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

スマホ環境でも反映されるよう調整

code:style.css

div.col-brand.global-menu-button {

& .navbar-brand {

justify-content:left;

display:inline;

margin-right:2px;

pointer-events:auto;

& div.brand-icon {

border:none !important;

box-shadow:none !important;

width:20px;

height:1px;

display:inline-block;

position:relative;

cursor:pointer;

vertical-align:middle;

margin-right:0;

padding:0;

box-sizing:border-box;

transform:none !important;

&::before, &::after{

content:"";

position:absolute;

left:0;

width:20px;

height:1px;

transform:none !important;

}

&::before{ top:-7px; }

&::after{ bottom:-7px; }

& * { display: none !important; }

}

& span.kamon.kamon-caret-down { display: none !important; }

}

}

セパレータ

code:style.css

display: flex;

align-items: center;

&:not(.cursor-line){

height: 28px;

&:after{

flex-grow: 1;

content: '';

}

display:none;

}

}

}

ピン留め表示を変更

code:style.css

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

border-radius: 0 0 0 2px;

}

カードの調整

code:style.css

.grid {

display: grid;

margin: 0;

grid-auto-flow: dense;

grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;

gap: 16px !important;

& li.page-list-item {

& a {

& .header {

text-overflow: unset;

width: 100%;

border-top: 0;

padding: 0;

line-height: 16px;

border-top: 0;

padding: 0 !important;

margin: auto 0 auto !important;

}

& .title {

line-height: unset;

max-height: unset;

overflow: unset;

-webkit-line-clamp: unset;

-webkit-box-orient: unset;

text-overflow: unset;

font-size: 13px;

font-weight: 400;

letter-spacing: 0.077rem;

background: linear-gradient(#222) left / 100% 1em no-repeat;

position: relative;

z-index: 10;

padding: 0 !important;

margin: 0 !important;

display: inline !important;

}

& .icon {

flex: unset;

overflow: unset;

margin-inline: unset;

border-radius: unset;

width: 100%;

height: 100%;

position: absolute;

& img {

margin: unset;

display: unset;

border-radius: unset;

min-width: 150%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-35%, -40%);

}

&::after {

content: '';

background: linear-gradient(90deg, rgba(35, 41, 51, 1), rgba(35, 41, 51, .3));

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

mix-blend-mode: exclusion;

}

}

& .description {

line-height: 30px;

padding: 0 2px;

font-size: 12px;

white-space: pre-line;

column-count: 1;

column-gap: 2em;

column-width: 10em;

height: inherit;

flex-shrink: 16;

overflow: hidden;

& * {

}

}

}

}

}

.page-list ul.grid li.page-list-item {

height: 140px;

aspect-ratio: auto;

grid-column: span 1;

grid-row: span 1;

&:nth-child(5n+1):not(:first-child):not(.pin) {

grid-column: span 2;

width: auto;

}

}

検索ボックス拡張

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,

& .telomere-border.unread {

transition: none;

box-sizing: content-box;

}

& .telomere-border:hover,

& .telomere-border.unread:hover {

box-sizing: border-box;

width: auto;

background-color: transparent;

}

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

& .telomere-border {

width: 2px;

}

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

& .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 .2em 0 1.2em;

margin: 0 .2em;

background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));

position: relative;

}

.deco-\"::after {

position: absolute;

z-index: 0;

left: 0;

color: rgb(0 0 0 / 10%);

font-size: 150%;

font-family: 'Font Awesome 5 Free';

font-weight: 600;

content: '\f10d';

padding-right: 0.4em;

vertical-align: super;

mix-blend-mode: multiply;

}

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

code:style.css

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

font-family: 'appicons';

content: ' \e042';

font-weight: 900;

display: inline-block;

}

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

text-decoration: none;

& .image {

padding-bottom: 0px;

border: none;

}

}

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

code:style.css

画像のサイズを変える

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:not(.cursor-line).line-title {

font-size: 2em;

}

.line:not(.cursor-line).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:not(.cursor-line).line-title .text {

padding-bottom: .5em;

}

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

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

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

.line:not(.cursor-line) 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

.line:not(.line-title) .text:not(.code-block)

{ margin-left: var(--li-indent-0); }

.line code:not(.highlight) { margin-left: 1em; }

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

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;

}

}

コードブロック色変え

code:style.css

body {

--code-bg: transparent;

}

code.highlight .hljs { background: var(--hljs-background-color); color: var(--hljs-deletion-color); }

code.highlight .hljs-comment,code.highlight .hljs-quote { color: var(--hljs-quote-color); }

code.highlight .hljs-keyword,code.highlight .hljs-selector-tag,code.highlight .hljs-addition { color: var(--hljs-addition-color); }

code.highlight .hljs-number,code.highlight .hljs-string,code.highlight .hljs-meta .hljs-meta-string,code.highlight .hljs-literal,code.highlight .hljs-doctag,code.highlight .hljs-regexp { color: var(--hljs-regexp-color); }

code.highlight .hljs-title,code.highlight .hljs-section,code.highlight .hljs-name,code.highlight .hljs-selector-id,code.highlight .hljs-selector-class { color: var(--hljs-selector-class-color); }

code.highlight .hljs-attribute,code.highlight .hljs-attr,code.highlight .hljs-variable,code.highlight .hljs-template-variable,code.highlight .hljs-class .hljs-title,code.highlight .hljs-type { color: var(--hljs-type-color); }

code.highlight .hljs-symbol,code.highlight .hljs-bullet,code.highlight .hljs-subst,code.highlight .hljs-meta,code.highlight .hljs-meta .hljs-keyword,code.highlight .hljs-selector-attr,code.highlight .hljs-selector-pseudo,code.highlight .hljs-link { color: var(--hljs-link-color); }

code.highlight .hljs-built_in,code.highlight .hljs-deletion { color: var(--hljs-deletion-color); }

/* フチつける */

.line:has(.code-block):not(:has(.start)) .indent { border-color: var(--code-border-color); border-style: solid; border-width: 0 1px 0; padding: 0 1.25rem 0; }

.line:has(.code-block.start) + .line:has(.code-block) .indent { padding-top: .8rem; border-top-width: 1px; border-radius: 4px 4px 0 0; }

.line:has(.code-block):is(:not(:has(+ .line .code-block)), :has(+ .line .code-block.start)) .indent { padding-bottom: .8rem; border-bottom-width: 1px; border-radius: 0 0 4px 4px;}

/* 文中ハイライト用 */

code.code.highlight {

border-radius: 0;

background-color: rgba(0, 0, 0, 0.02);

}

表記揺れリンク

code:style.css

.deco-\# {

position: relative;

&:has(.page-link) {

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

&:hover {color: var(--page-link-hover-color);}

}

&:has(.empty-page-link) {

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

&:hover {color: var(--empty-page-link-hover-color);}

}

& a span {

position: absolute;

inset: 0;

font-size: 0;

}

.cursor-line & {

& a span {

position: unset;

inset: unset;

font-size: unset;

}

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

}

}

AppIcons表示用

code:style.css

.deco-\}::after {

font-family: "AppIcons";

font-size: 48px;

line-height: 80px;

content: "\A\E001 - \\E001 | \E002 - \\E002 | \E003 - \\E003\A\E004 - \\E004 | \E005 - \\E005 | \E006 - \\E006\A\E007 - \\E007 | \E008 - \\E008 | \E009 - \\E009\A\E00A - \\E00A | \E00B - \\E00B | \E00C - \\E00C\A\E00D - \\E00D | \E00E - \\E00E | \E00F - \\E00F\A\E010 - \\E010 | \E011 - \\E011 | \E012 - \\E012\A\E013 - \\E013 | \E014 - \\E014 | \E015 - \\E015\A\E016 - \\E016 | \E017 - \\E017 | \E018 - \\E018\A\E019 - \\E019 | \E01A - \\E01A | \E01B - \\E01B\A\E01C - \\E01C | \E01D - \\E01D | \E01E - \\E01E\A\E01F - \\E01F | \E020 - \\E020 | \E021 - \\E021\A\E022 - \\E022 | \E023 - \\E023 | \E024 - \\E024\A\E025 - \\E025 | \E026 - \\E026 | \E027 - \\E027\A\E028 - \\E028 | \E029 - \\E029 | \E02A - \\E02A\A\E02B - \\E02B | \E02C - \\E02C | \E02D - \\E02D\A\E02E - \\E02E | \E02F - \\E02F | \E030 - \\E030\A\E031 - \\E031 | \E032 - \\E032 | \E033 - \\E033\A\E034 - \\E034 | \E035 - \\E035 | \E036 - \\E036\A\E037 - \\E037 | \E038 - \\E038 | \E039 - \\E039\A\E03A - \\E03A | \E03B - \\E03B | \E03C - \\E03C\A\E03D - \\E03D | \E03E - \\E03E | \E03F - \\E03F\A\E040 - \\E040 | \E041 - \\E041 | \E042 - \\E042\A\E043 - \\E043 | \E044 - \\E044 | \E045 - \\E045\A\E046 - \\E046 | \E047 - \\E047 | \E048 - \\E048\A\E049 - \\E049 | \E04A - \\E04A | \E04B - \\E04B\A\E04C - \\E04C | \E04D - \\E04D | \E04E - \\E04E\A\E04F - \\E04F | \E050 - \\E050 | \E051 - \\E051\A\E052 - \\E052 | \E053 - \\E053 | \E054 - \\E054\A\E055 - \\E055 | \E056 - \\E056 | \E057 - \\E057\A\E058 - \\E058 | \E059 - \\E059 | \E05A - \\E05A\A\E05B - \\E05B | \E05C - \\E05C | \E05D - \\E05D\A\E05E - \\E05E | \E05F - \\E05F | \E060 - \\E060\A\E061 - \\E061 | \E062 - \\E062 | \E063 - \\E063\A\E064 - \\E064 | \E065 - \\E065 | \E066 - \\E066\A\E067 - \\E067 | \E068 - \\E068 | \E069 - \\E069\A\E06A - \\E06A | \E06B - \\E06B | \E06C - \\E06C\A\E06D - \\E06D | \E06E - \\E06E | \E06F - \\E06F\A\E070 - \\E070 | \E071 - \\E071 | \E072 - \\E072\A\E073 - \\E073 | \E074 - \\E074 | \E075 - \\E075\A\E076 - \\E076 | \E077 - \\E077 | \E078 - \\E078\A\E079 - \\E079 | \E07A - \\E07A | \E07B - \\E07B\A\E07C - \\E07C | \E07D - \\E07D | \E07E - \\E07E\A\E07F - \\E07F | \E080 - \\E080 | \E081 - \\E081\A\E082 - \\E082 | \E083 - \\E083 | \E084 - \\E084\A\E085 - \\E085 | \E086 - \\E086 | \E087 - \\E087\A\E088 - \\E088 | \E089 - \\E089 | \E08A - \\E08A\A\E08B - \\E08B | \E08C - \\E08C | \E08D - \\E08D\A\E08E - \\E08E | \E08F - \\E08F | \E090 - \\E090\A\E091 - \\E091 | \E092 - \\E092 | \E093 - \\E093\A\E094 - \\E094 | \E095 - \\E095 | \E096 - \\E096\A\E097 - \\E097 | \E098 - \\E098 | \E099 - \\E099\A\E09A - \\E09A | \E09B - \\E09B | \E09C - \\E09C\A\E09D - \\E09D | \E09E - \\E09E | \E09F - \\E09F\A\E0A0 - \\E0A0 | \E0A1 - \\E0A1 | \E0A2 - \\E0A2\A\E0A3 - \\E0A3 | \E0A4 - \\E0A4 | \E0A5 - \\E0A5\A\E0A6 - \\E0A6 | \E0A7 - \\E0A7 | \E0A8 - \\E0A8\A\E0A9 - \\E0A9 | \E0AA - \\E0AA | \E0AB - \\E0AB";

}

.deco-\{ {

font-family: "AppIcons";

}