Settings
UserCSSを書くページ
要は、このプロジェクトのデザインの設定をするためのページ
大抵の人にとっては関係のないページです
style.css@import "../見出しのデザインを変えるUserCSS/style.css";_style.css@import "/api/code/Mijinko/プロジェクトタイトルと戻るボタンを上部に固定するUserCSS/only-page.css";style.css@import '/api/code/Mijinko/特定のリンクにアイコンをつけるUserCSS/style.css';style.css@import '/api/code/Mijinko-other/関連ページリストをページの横に表示するUserCSS_ver.2/style.css';_style.css@import "/api/code/Mijinko/関連ページ一覧をページの横に表示するUserCSS(最小版)/style.css";（CSSのみ）
style.css@import '/api/code/Mijinko/ScrapCalc/inline-code-like.css';応急処置
style.csshtml body {
--page-bg: var(--body-bg);
}その他
_style.css@media (min-width: 768px) {
.related-page-list div.links-2-hop ul.grid li.relation-label a {
/* 関連リンク 2 hops link ラベル */
background-color: var(--relation-label-bg);
}
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク 2 hops link ラベル（ホバー時） */
background-color: #4D5263;
color: #eee;
}
}デフォルトの
font-family に "Font Awesome 5 Free","Font Awesome 5 Brands" を追加しただけ。style.css/* Font Awesomeを常時使えるようにするCSS */
div.editor,
.grid li {
font-family: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 5 Free","Font Awesome 5 Brands","AppIcons",sans-serif;
}ブラケット記法追加
style.css/* [! 警告表記を使えるようにする] */
body {
--warning-text-color: #fff;
--warning-bg: #e33;
--warning-bg-border: #ee6000;
--spoiler-bg: var(--page-text-color);
}
.deco-\! {
--page-link-color: #80c9fe;
--empty-page-link-color: #ffb7b8;
color: var(--warning-text-color);
background-color: var(--warning-bg);
font-weight: bold;
padding: 1px 2px;
/* border: 1.1px solid var(--warning-bg-border); */
border-radius: 1px;
background: repeating-linear-gradient(-45deg, var(--warning-bg), var(--warning-bg) 17px, var(--warning-bg-border) 3px, var(--warning-bg-border) 20px);
}
/* [| <text>]でスポイラー */
.line:not(.cursor-line) :is(.deco-\|, .deco-\| a.page-link):not(:hover) {
color: transparent;
background-color: var(--spoiler-bg);
}全体的なデザイン調整
style.css/* 色設定 */
body {
--accent-color: #787878;
--accent-color-gray: #676767;
--accent-level-4: #9e9e9e;
--new-button-bg: var(--accent-color);
--new-button-hover-bg: var(--accent-color-gray);
--new-button-active-bg: #4d4d4d;
/*--relation-label-links-bg: rgba(191, 191, 191, 1);*/
/*--relation-label-empty-bg: rgba(183, 183, 183, 1);*/
--card-bg: rgba(61, 61, 61, 1);
--page-bg: rgba(61, 61, 61, 1);
/*--body-bg: rgba(36, 36, 36, 1);/**/
--body-bg: hsl(0deg 0% 18%);/**/
--telomere-border: rgba(91, 91, 91, 1);
--card-title-bg: rgba(49, 49, 49, 1);
--card-title-bg-pinned: rgba(49, 49, 49, 1);
--tool-light-color: rgba(100,100,100,1);
--tool-bg: #38383880;
}
/* デフォルトカラー (Default Light テーマ用) */
html {
--line-title-color: #000;
}
/* ピン留めアイテムとそれ以外を分ける */
.grid-style-item.pin + .grid-style-item:not(.pin) {
clear: left;
}
/* カード一覧の画面でウィンドウサイズを変更した時の動きを減らす */
/*li.grid-style-item,
.related-page-list:is(div, section) ul.grid li.relation-label {
width: 154px;
height: 169px;
margin: 0 16.8px 16.8px 0;
}*/
/* ページタイトルのスタイル */
div.line-title .text {
font-size: 28px;
border-bottom: 2px solid var(--line-title-color);
padding-left: 0.25em;
padding-bottom: 9px !important;
margin-bottom: 21px;
}
/* ページタイトルのテロメアの調整 */
div.line.line-title .telomere .telomere-border {
padding-bottom: var(--line-title-border-width);
}
/* アイコン画像が上寄りになるのを修正する */
.line img.icon {
vertical-align: middle;
}
/* コードブロックのタイトル行のスタイル */
.line span.code-block .code-block-start {
display: inline-block;
font-size: 14px;
margin-left: 0.5px;
padding: 2px 4px;
color: var(--page-text-color);
background-color: var(--accent-color);
filter: brightness(90%);
--code-start-border: solid 1px #7f7f7f;
border-right: var(--code-start-border);
border-bottom: var(--code-start-border);
}
.line span.code-block .code-block-start a {
color: var(--page-text-color);
}Streamボタンを表示する
UserCSSをいじる際にStreamでの表示を想定していないことが多いので非表示にした
今まで通り、メニュー経由であれば閲覧可能
_style.css/* Streamボタンを表示する */
nav.navbar ul.navbar-menu>li.stream-btn {
display: block;
}非表示
style.css.line#L62a861987838e3000072183a ~ .line span.code-block,
.page[data-title="ミュートページリスト(井戸端)"] .code-block {
display: none;
}
.page-list-item:is(
[data-page-title^="独り言Twitter"],
) {
display: none;
}
.stream .page:is(
[data-title^="独り言Twitter"],
) {
display: none;
}外部ソースのCSS
＃で始まるタグをラベル風にする
このソース元のCSSは全体的に綺麗なので必見。
こうなる -> #Sample
いつも通り勝手に改造しました。
ここはダーク系のテーマカラーなので、黒く塗りつぶした。
カーソルを合わせたときにぴょこぴょこする動きは控えめにした。
style.css/* これは上のCSSで指定済み
body {
--accent-color: #3d95c9;
}
*/
/* ＃で始まるタグをラベル風にする */
a[type="hashTag"]{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: var(--page-bg);
color: #72cafd !important;
font-size: 0.8em;
border: 1px solid var(--accent-color);
border-radius: 3px;
transition: .2s;
-webkit-transform: scale(1);
transform: scale(1);
}
a.empty-page-link[type="hashTag"]{
color: #fb7476 !important;
border-color: var(--accent-color);
}
a[type="hashTag"]:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
} webkit-transform って何ぞや -> https://creive.me/archives/16145/#i外部リンクを区別するUserCSS
ソースから色やサイズの項目を追加している。
style.css/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: bold;
display: inline-block;
font-size: .5em;
color: #888;
padding-right: 2px;
}通常リンクはこうなるUserCSS(Scrapbox)
コードの行番号を表示する
スタイルを変えたくてソースからあちこちいじってる。
行番号をコードブロックの中に入れるために、セレクタの指定周りを変更している。
色とかも変えてる。
タイトル行はSettings#61d779457838e30000fc208bで変えてる。
style.css/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px #fff;
/* ↓行番号の色の指定はここ */
color: var(--code-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
background-color: var(--accent-color);
}
}箇条書きのバレットをFontAwesomeにするUserCSS
番号付きの箇条書きのみ改変するようにしてある。
style.css.line.number-list .dot {
display: list-item; /* 表示する */
background-color: transparent;
}
.line.number-list .dot::before {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: -11px;
content: '\f292';
font-size: 4px;
color: var(--page-text-color);
}インデントに縦線を表示するようにした
色に関する記述は省略している。
style.css.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid rgb(255,255,255,0.2); /* 色の指定 */
}のびのびドロップダウン
style.css.navbar-form .dropdown.open ul.dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}