settings
code:style.css
@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru|M+PLUS+Rounded+1c");
@import '/api/code/noratetsu/_CSS_Title2/style.css';
@import '/api/code/noratetsu/_CSS_Deco/style.css';
@import '/api/code/noratetsu/_CSS_Grid/style.css';
/*@import '/api/code/noratetsu/_CSS_Grid-md/style.css';*/
/*@import '/api/code/noratetsu/_CSS_Grid-lg/style.css';*/
@import '/api/code/noratetsu/_CSS_related-page-list_left/style.css';
@import '/api/code/noratetsu/_CSS_Code-block/style.css';
@import '/api/code/noratetsu/●背景をうっすら青海波柄にする/style.css';
インポートしているコード群→ #_import
フォントのインポートについて→/noratetsu/●（今更ながらフォント調整）
code:style.css
.quick-launch .flex-box .flex-item .right-box::after {
position: absolute;
display: block;
font-family: "UD デジタル 教科書体 NK-B";
color: rgb(195,32,2);
/* content: '現在CSSの修正作業中のため、タイミングによって表示の乱れが生じる可能性があります。'; */
content: '↑試しにうろちょろさせています。';
max-width: 70vw;
text-align: left;
left: var(--margin-side);
}
元のThemeはDefaultのLight
code:style.css
body{
background-color: #F4F4F0;
}
.new-button {
background-color: var(--new-button-bg, #CCC);
}
/noratetsu/●ページ一覧での左右余白を変数で整理する
code:style.css
@media screen and (min-width: 1261px) {
:root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
:root {--margin-side: 8px;}
}
元：Scrapbox でナビゲーションバーにホームに戻るボタンを埋め込む UserCSS - うにゃのすみか
code:stylex.css
span.kamon.kamon-caret-down {
display: none;
}
.quick-launch .flex-box .flex-item .left-box {
position: fixed;
top: 0;
left: calc(var(--margin-side) + 48px); /* 変数は上記で設定したもの */
color: white;
z-index: 1000;
}
.quick-launch .project-home, .quick-launch .project-home .title {
color: #fff;
}
.quick-launch .project-home .title {
max-width: 190px; /* プロジェクト名が長すぎる場合の応急処置 */
}
ナビゲーションバーのScrapboxアイコンサイズを小さくする
code:style.css
.brand-icon {
width: 25px;
height: 25px;
}
/noratetsu/●ナビゲーションバーに「更新履歴」を表示する
code:stylex.css
.navbar .navbar-menu>li.stream-btn {
display: block;
position: fixed;
}
.stream-btn .kamon::before { /* ボタンの代わりにテキストを表示する */
display: block;
position: fixed;
right: var(--margin-side); /* 変数は上記で設定したもの */
width: 80px;
content: '更新履歴';
text-align: center;
font-size: 14px; color: #fff;
}
.stream-btn .kamon:hover::before {
background-color: rgba(0,0,0,0.1);
}
.stream-btn .kamon:active::before {
background-color: unset;
}
@media screen and (max-width: 767px) {
.stream-btn .kamon::before { right: 114px;} /* 検索ボタンの位置の変化に対応 */
.quick-launch .flex-box .flex-item .left-box {
left: 40px; /* スマホ表示でプロジェクトタイトルを少し左に寄せる */
}
}
/noratetsu/●Streamボタンにマウスオーバーで説明を表示
code:style.css
.navbar .navbar-menu>li.stream-btn {
display: block;
}
.stream-btn .kamon:hover::after {
display: block;
position: absolute;
top: 44px;
content: '更新履歴';
font-size: 12px;
line-height: 16px;
width: 60px;
height: auto;
color: #444;
background-color: #fff;
border: 1px solid #444;
text-align: center;
}
/noratetsu/●アイコンをうろちょろさせる
code:style.css
@media screen and (min-width: 1261px) {
:root {--anim-nav: 45s;}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {--anim-nav: 40s;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {--anim-nav: 30s;}
}
@media screen and (max-width: 767px) {
:root {--anim-nav: 15s;}
}
.navbar:after {
content: '';
background-image: url("https://gyazo.com/e685ebfd0e38be6c1b2229a3bb7b4f4f/max_size/1000");
background-size: contain;
background-repeat: no-repeat;
display: block;
position: absolute;
width: 30px;
height: 30px;
animation: img_rotate ease-in-out 1s infinite alternate forwards, bound ease-in-out .5s infinite alternate forwards,img_motion linear var(--anim-nav) infinite alternate forwards ;
}
@keyframes img_motion {
0%{
margin-left: 0px;
}
100%{
margin-left: calc(100vw - 30px);
}
}
@keyframes img_rotate {
0% {
transform: rotate(-20deg);
}
100% {
transform: rotate(20deg);
}
}
@keyframes bound {
0%{
top: 0px;
}
100%{
top: 10px;
}
}
ページに影をつける
code:style.css
.page {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
ページタイトル
code:style.css
.line.line-title .text {
border-bottom: solid 3px #ddd ;
padding-bottom: 0;
margin-bottom: 28px; /* 枠下 */
text-align: center; /* 中央寄せ */
}
参考　/suto3/UserCSS:禅モード
code:style.css
.line .telomere:not(:hover) {
opacity: 0.3;
transition: opacity 2s;
}
.line .telomere:hover {
/*opacity: 0.4;*/
opacity: 1;
transition: opacity 1s;
}
.line .telomere .telomere-border {
border-color: #d4dcd6;
}
.line .telomere .telomere-border.unread {
border-color: #f5b1aa;
}
蕎麦切色 そばきりいろ #d4dcd6の色見本とカラーコード - 和色大辞典
珊瑚色 さんごいろ #f5b1aaの色見本とカラーコード - 和色大辞典
箇条書き調整
/scrapboxlab/行頭のドット（バレット | ビュレット）を少し薄くするUserCSS
c-0
c-1
c-2
c-3
c-4
c-5
c-6
c-7
code:style.css
/* バレットを少し薄くする */
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
/* background-color: #c9c9c9; */
}
/* バレットの色をだんだん薄くする */
.line .indent-mark .c-0 + .dot {
background-color: rgba(0,0,0,.6)
}
.line .indent-mark .c-1 + .dot {
background-color: rgba(0,0,0,.5)
}
.line .indent-mark .c-2 + .dot {
background-color: rgba(0,0,0,.4)
}
.line .indent-mark .c-3 + .dot {
background-color: rgba(0,0,0,.3)
}
.line .indent-mark .c-4 + .dot {
background-color: rgba(0,0,0,.2)
}
.line .indent-mark .c-5 + .dot {
background-color: rgba(0,0,0,.1)
}
.line .indent-mark .c-6 + .dot {
background-color: rgba(0,0,0,.05)
}
.line .indent-mark .c-7 + .dot {
background-color: rgba(0,0,0,.05)
}
/noratetsu/●マウスオーバーでインデントレベルを表示する
code:style.css
.line .indent-mark .dot:hover::before {
position: relative;
top: -11px;
right: 22px;
border-radius: 6px;
padding: 1px 3px;
font-size: 0.8em;
font-weight: 600;
color: #fff;
background-color: blue;
}
.line .indent-mark .c-0 + .dot:hover::before {
content: '1';
}
.line .indent-mark .c-1 + .dot:hover::before {
content: '2';
}
.line .indent-mark .c-2 + .dot:hover::before {
content: '3';
}
.line .indent-mark .c-3 + .dot:hover::before {
content: '4';
}
.line .indent-mark .c-4 + .dot:hover::before {
content: '5';
}
.line .indent-mark .c-5 + .dot:hover::before {
content: '6';
}
.line .indent-mark .c-6 + .dot:hover::before {
content: '7';
}
.line .indent-mark .c-7 + .dot:hover::before {
content: '8';
}
/customize/テーブルを派手めに表示するUserCSS
※テーブルの上を空行にすること
table:test
あ い う え お
か き く け こ
さ し
共通部
code:style.css
.table-block .cell {
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
border-top: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
12色で一周する版
code:style.css
.table-block .cell:nth-child(12n){
background-color: hsla(0,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+1){
background-color: hsla(30,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+2){
background-color: hsla(60,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+3){
background-color: hsla(90,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+4){
background-color: hsla(120,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+5){
background-color: hsla(150,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+6){
background-color: hsla(180,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+7){
background-color: hsla(210,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+8){
background-color: hsla(240,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+9){
background-color: hsla(270,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+10){
background-color: hsla(300,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+11){
background-color: hsla(330,100%,90%,0.4);
}
.section-title + .line .table-block .cell:nth-child(12n) {
background-color: hsla(0,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+1) {
background-color: hsla(30,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+2) {
background-color: hsla(60,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+3) {
background-color: hsla(90,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+4) {
background-color: hsla(120,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+5) {
background-color: hsla(150,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+6) {
background-color: hsla(180,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+7) {
background-color: hsla(210,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+8) {
background-color: hsla(240,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+9) {
background-color: hsla(270,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+10) {
background-color: hsla(300,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+11) {
background-color: hsla(330,100%,80%,0.6);
}
/noratetsu/●横幅の長くなった表をスクロールできるようにする（仮）
code:style.css
.indent.table-block-row {
overflow-x: auto;
}
引用の斜体を解除
code:style.css
.line .quote {
font-style: normal ;
}
/scrapboxlab/画像のサイズを変えるUserCSS
code:style.css
.level-1 img { width: 16.7% }
.level-2 img { width: 33.3% }
.level-3 img { width: 50% }
.level-4 img { width: 66.7% }
.level-5 img { width: 83.3% }
.level-6 img { width: 100% }
画像に影をつける
code:style.css
.line .image, .line .strong-image {
filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.3));
}
/noratetsu/●別タブで開くリンクにアイコンを添える
code:style.css
.editor .line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
.editor .line span > a.page-linktarget="_blank"::after {
font-family: 'Font Awesome 5 Free';
content: ' \f360';
font-weight: 900;
font-size: 0.9rem;
padding-right: 0.5rem;
display: inline-block;
}
/noratetsu/●特定のリンクにfaviconをつける
code:style.css
.line a.link:is(
[href^="https://twilog.org/Foam_Crab/"],
[href^="https://noratetsu.blogspot.com/"],
[href^="https://note.com/"],
[href^="https://tunnellingchannel.substack.com/"],
[href="https://twitter.com/Foam_Crab"]
)::before {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: -3px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 2px;
}
.line a.link[href^="https://twilog.org/Foam_Crab/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://twilog.org);
}
.line a.link[href^="https://noratetsu.blogspot.com/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://www.blogger.com/);
}
.line a.link[href^="https://note.com/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://note.com/);
}
.line a.link[href^="https://tunnellingchannel.substack.com/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://tunnellingchannel.substack.com/);
}
.line a.link[href="https://twitter.com/Foam_Crab"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://twitter.com/);
}
/noratetsu/●ツイートへのリンクに鳥のアイコンを添える
code:stylex.css
.line span > a.linkhref*="twitter.com"href*="/status/"::after {
display: none !important;
}
.line span > a.linkhref*="twitter.com"href*="/status/" {
font-size: 12px;
word-break: break-all;
}
.line span > a.linkhref*="twitter.com"href*="/status/"::before {
font-family: 'Font Awesome 5 Free';
content: ' \f4ba';
font-weight: 900;
font-size: 12px;
color: #1d9bf0;
padding-right: 1px;
display: inline-block;
}
自分のツイートを示すアイコンの前に鳥アイコンを添えるなど
code:style.css
.line .quote a.link.iconhref="/noratetsu/nora"::before {
font-family: 'Font Awesome 5 Free';
content: ' \f4ba';
font-weight: 900;
font-size: 12px;
color: #1d9bf0;
padding-right: 1px;
margin-left: -4px;
display: inline-block;
}
.line:not(.cursor-line) .quote>.tag {
display: none;
}
.line:not(.cursor-line) .quote {
padding-left: 10px;
}
/noratetsu/●iconのページにクリックでジャンプできないようにする
水平線アイコンをタップ不可に
/icons/水平線.icon
うっかりタップorクリックして無駄に飛ばないように
ついでに自分のアイコンもnora.icon
code:style.css
a.link.iconhref="/icons/%E6%B0%B4%E5%B9%B3%E7%B7%9A",
a.link.iconhref="/noratetsu/nora" {
pointer-events: none;
}
アイコンの縦位置を調整
code:style.css
.line img.icon {
vertical-align: -8.5px; /* -9% */
}
2022/01/02修正
/noratetsu/●特定のiconだけCSSを適用する
自分のアイコンの後ろだけpadding
code:style.css
.line img.iconsrc="/api/pages/noratetsu/nora/icon" {
padding-right: 4px;
}
nora.iconテスト
のらてつ.iconテスト（適用前）
/noratetsu/●「行番号を表示する」改良版
元は/scrasobox/行番号を表示する
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.editor .lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.editor .line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .editor .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 }
/* カーソル行の行番号を濃く表示する */
.editor .line:not(.line-title)::before { opacity: .5 }
.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }
フォント変更/noratetsu/●（今更ながらフォント調整）
code:style.css
.grid li ,.quick-launch .project-home .title {
font-family: "UD デジタル 教科書体 NK-B", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
.editor, .stream {
font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono", "Kosugi Maru", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
冒頭でwebフォントインポート
/noratetsu/●検索結果をわかりやすくする
code:style.css
/* 検索ワードを強調 */
.list li.page-list-item a .description strong {
background-color: yellow;
}
/* 検索結果にスクロールバーをつけたり */
.page-list.clearfix > .list:not(.create-searched-page) li.page-list-item a .description {
max-height: 70px;
margin: 10px 0;
overflow-y: auto;
border: #ddd thin ;
border-style: solid hidden;
}
/* 検索結果を改行させる */
.page-list.clearfix > .list:not(.create-searched-page) li.page-list-item a .description span {
display: block;
}
code:style.css
.quick-launch .search-result-count small {
display: none;
}
/noratetsu/●スクロールバーの見た目を調整する
code:style.css
::-webkit-scrollbar{
width: 10px;
height: 5px;
}
::-webkit-scrollbar-track{
background: rgba(255, 255, 255,0.4);
border: none;
border-radius: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.2);
border-radius: 10px;
box-shadow: none;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.4);
}
関連リンクを左列へ＋エディタ部分をスクロール
→/noratetsu/●関連リンクを左列に持ってくる