settings
https://gyazo.com/ea82fd9e87eef69e45694c71571aaa3a
UserCSS
code:style.css
/* Color menu (CSS) */
/* @import url("/api/code/yude/settings/color-menu.css"); */
/* 文字の Align */
@import url("/api/code/yude/settings/align.css");
/* カスタムフォント */
@import url("/api/code/yude/settings/font.css");
/* サイドバー */
/* @import url("/api/code/yude/settings/sidebar.css"); */
/* nicothumb2img を Firefox, Safari で正しく機能させるために必要な CSS */
@import url("/api/code/yude/settings/force-dpi-style.css");
/* ポップアップメニューをテキストからアイコンへ */
@import url("/api/code/yude/settings/popup-icon.css");
/* 見える文字数カウンター from /scrasobox/見える文字数カウンター */
@import "/api/code/scrasobox/見える文字数カウンター/style.css";
/* 画像に影を付ける */
@import url("/api/code/yude/settings/img-shadow.css");
/* ネストされたコードブロックのマージンの色を統一する */
@import url("/api/code/yude/settings/nested-code-color.css");
/* ピン留めされたページを独立した段に表示する */
@import url("/api/code/yude/settings/pin-separate.css");
/* ヘッダーアイコン */
@import url("/api/code/yude/settings/header-icon.css");
/* 横幅を広くする */
@import url("/api/code/yude/settings/width.css");
/* 箇条書きを控えめにする */
@import url("/api/code/yude/settings/item-style.css");
/* Stream にアクセスできるボタンを追加 from /customize */
@import url("/api/code/customize/Stream%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3/style.css");
/* モーダルから画像がはみ出さないようにする */
@import url("/api/code/yude/settings/modal-img-fix.css");
/* 短冊記法 */
@import url("/api/code/yude/settings/strip-img.css");
/* のびのびドロップダウン from /scrasobox */
@import url("/api/code/scrasobox/のびのびドロップダウン/style.css");
/* 外部リンクにアイコンを付ける */
@import url("/api/code/yude/settings/icon-ext-link.css");
/* ハッシュタグをラベル風にする */
@import url("/api/code/yude/settings/hashtag-label.css");
/* ヘッダーを固定する */
/* @import url("/api/code/yude/settings/sticky-header.css"); */
/* カードの横長の画像を上下中央揃えにする */
@import url("/api/code/yude/settings/centerize-wide-img.css");
/* ピンしたページのスタイルを明瞭に */
/* @import url("/api/code/yude/settings/pinned-page.css"); */
/* 行番号を表示 */
@import url("/api/code/yude/settings/line-number.css");
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
a#Templates.tool-btn img { opacity: 0 }
行番号を表示
from /scrasobox/行番号を表示する
code:line-number.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -110px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.line:not(.line-title)::before { opacity: .5 }
.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }
ピンしたページのスタイルを明瞭に
from /nwtgck/settings
code:pinned-page.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-size: 20px;
color: #996633;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
/* (base: https://ferret-plus.com/8961) */
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
}
ヘッダーを固定する
from /MISONLN41/settings
code:sticky-header.css
.navbar {
position: fixed;
top: 0px;
height: 44px;
z-index: 51010;
background-color: rgba(53,59,72,0.8);
backdrop-filter: unset;
}
.navbar .row, .navbar .navbar-menu > li > a, .navbar-brand {
height: 44px;
}
.brand-icon {
width: 44px;
}
.search-form .form-group input, .search-form .form-group button {
height: 38px;
}
.expandable-menu {
z-index: 51011;
}
.page-menu {
top: 70px;
}
.global-menu.dropdown-menu {
overflow-y: scroll;
max-height: calc(100vh - 58px);
}
.modal {
z-index: 501013;
}
.modal-backdrop {
z-index: 501012;
}
カードの横長の画像を上下中央揃えにする
from /MISONLN41/settings
code:centerize-wide-img.css
.content .icon {
margin: auto 0 auto 0;
}
ハッシュタグをラベル風にする
from /nwtgck/settings#5d2ad51bd08a040000bb8a69
code:hashtag-label.css
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
外部リンクにアイコンを付ける
from /MISONLN41/settings
code:icon-ext-link.css
.line a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
display: inline-block;
}
短冊記法
from /scrasobox/画像を並べて表示_のバリエーション
code:strip-img.css
.line:not(.cursor-line) class="deco-| deco-&" { display: inline-flex; flex-wrap: wrap }
.line class="deco-| deco-&" > span { width: calc(100%/5); overflow: hidden }
.line class="deco-| deco-&" img.image { object-fit: cover !important; margin: .2em; height: 30vh }
モーダルから画像がはみ出さないようにする
from /ci7lus/settings
code:modal-img-fix.css
.full-content-modal .modal-dialog .modal-content .modal-body .full-content {
max-height: -webkit-fill-available;
max-height: 85vh;
}
箇条書きを控えめにする
from /scrasobox/箇条書きを控えめにする
code:item-style.css
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
ヘッダーアイコン
from /sno2wman/settings
code:header-icon.css
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-image: url("https://i.gyazo.com/2caa79cdb79a3d815db629fc91184bae.jpg");
background-size: cover;
border-radius: 9999px;
}
横幅を広くする
from /sno2wman/settings
code:width.css
.container {
max-width: initial;
}
ピン留めされたページを独立した段に表示する
from /customize/ピン留めされたページを独立した段に表示する
code:pin-separate.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
ネストされたコードブロックのマージンの色を統一する
from /MISONLN41/settings
code:nested-code-color.css
.line span.code-block .code-block-margin {
background-color: transparent;
}
画像に影を付ける
from /MISONLN41/settings
code:img-shadow.css
.line .image, .line .strong-image {
box-shadow: 0 0 10px rgba(0,0,0,.6);
margin-top: 10px;
margin-bottom: 10px;
}
/rinsuki/nicothumb2img を Firefox, Safari で正しく機能させるために必要な CSS
from /rinsuki/nicothumb2img
code:force-dpi-style.css
#editor img[src^="https://nicothumb2img.vercel.app/image/"] {
width: 314px;
box-sizing: content-box;
}
文字の Align
from progfay: Scrapboxで遊ぶ - Qiita
code:align.css
/* 中央寄せ */
.deco-\| {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
/* 左寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: left;
}
カスタムフォント
from Brain Hackers: /brain-hackers/settings
code:font.css
/* 共通: JetBrains Mono があれば使用、無ければ標準のフォールバックを行う */
/* macOS: 英文 Menlo, 和文 ヒラギノ（Menlo を欠いた環境は実質ないので必ずこうなる） */
/* Windows: 英文 Cascadia Code -> Consolas -> Courier New, 和文 BIZ UDゴシック -> MSゴシック */
code, kbd, pre, samp {
font-family: "JetBrains Mono", Menlo, Monaco, "Cascadia Code", Consolas, "Courier New", "Hiragino Sans", "BIZ UDゴシック", monospace !important;
}
色付きメニュー
from Brain Hackers: /brain-hackers/settings
code:color-menu.css
.deco-\! {
color: #fff;
background-color: #e66;
}
.deco-\% {
color: #fff;
background-color: #ea2;
}
.deco-\# {
color: #fff;
background-color: #6a6;
}
.deco-\~ {
color: #6ae;
}
ポップアップメニューをテキストからアイコンへ
from /customize/PopupMenuを徹底的にアイコンにする
code:popup-icon.css
/* 標準のtextをすべて消す */
.selections .popup-menu .button-container .button.strong-button > strong,
.selections .popup-menu .button-container .button.italic-button > i,
.selections .popup-menu .button-container .button.strike-button > strike {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.selections .popup-menu .button-container .button.link-button,
.selections .popup-menu .button-container .button.new-page-button,
.selections .popup-menu .button-container .button.copy-plain-button {
font-size: 0;
}
/* buttonにFontAwesomeを使う */
.selections .popup-menu .button-container .button {
font-family: "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-size: 11px;
font-weight: 600;
display: inline-block;
text-align: center;
}
/* iconを設定する */
.selections .popup-menu .button-container .button.link-button::after {
font-size: 11px;
content: '\f0c1'
}
.selections .popup-menu .button-container .button.strong-button::after {
content: '\f032'
}
.selections .popup-menu .button-container .button.italic-button::after {
content: '\f033'
}
.selections .popup-menu .button-container .button.strike-button::after {
content: '\f0cc'
}
.selections .popup-menu .button-container .button.copy-plain-button::after {
font-size: 11px;
content: '\f0c5'
}
.selections .popup-menu .button-container .button.new-page-button::after {
font-size: 11px;
content: '\f0c4'
}
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
サイドバーを表示する
from rinsuki: /rinsuki/scrapbox_sidebar
code:sidebar.css
.container {
max-width: 960px;
}
@media screen and (min-width: calc(960px + (64px * 2) + 18px)) {
.global-menu-for-user {
position: fixed;
top: 0;
left: 0;
bottom: 0;
display: block;
overflow-x: none;
overflow-y: scroll;
height: 100vh;
min-width: 0;
max-width: calc(((100vw - 960px) / 2) - 64px) !important;
margin: 0;
border-left: none;
border-top: none;
border-bottom: none;
border-radius: 0;
max-height:100vh !important;
}
.navbar-brand {
pointer-events: none;
}
.navbar-brand > .kamon-caret-down {
display: none;
}
}