settings
https://gyazo.com/17f8c0b33ec90945c8e481131b54372a
拡張記法
code: style.css
/* 拡張装飾記法 見出しっぽい太字テキスト */
.level .deco-\# { border-left: .6em solid #ffcfc6; padding-left: .7rem }
UI
code:style.css
.project-home > .title {
/* Make title line-height more narrow */
line-height: 1.2em;
font-size: 0.7em;
}
/* Project description */
.project-home > .title:after {
content: "\A ブログは真面目・ココは雑メモ";
white-space: pre;
}
code:style.css
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
content: 'By @YuigaWada (和田唯我; YuWd) \A' url(https://i.gyazo.com/9c0e0f9e40a2b1687c352eecfeb4737b.png);
white-space: pre-wrap;
display: block;
margin-top: 5rem;
padding: 1rem 0;
text-align: center;
border: solid #0003;
border-width: 1px 0;
font: 500 normal 1.8rem/1 sans-serif;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: auto; }
/customize/左上のScrapboxアイコンを好きな画像に変える
code:style.css
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-image: url(https://i.gyazo.com/9c0e0f9e40a2b1687c352eecfeb4737b.png);
background-size: cover;
border-radius: 50%;
}
settingsページを非表示にする
/villagepump/特定のページを非表示にするUserCSS
code:style.css
.page-list-itemdata-page-title="settings" {
display: none !important;
}
.page-list-itemdata-page-title="問題を如何に見つけるか" {
display: none !important;
}
.page-list-itemdata-page-title="上位存在を持ち出し意見を正当化する姑息者にはなるな" {
display: none !important;
}
.page-list-itemdata-page-title="日記" {
display: none !important;
}
.page-list-itemdata-page-title="惹起されぬ報酬系: 私はなぜメンタルを病むのか" {
display: none !important;
}
.page-list-itemdata-page-title="2024年を振り返る: 人間に戻れた素晴らしき一年" {
display: none !important;
}
.page-list-itemdata-page-title="hr" {
display: none !important;
}
.page-list-itemdata-page-title="paper" {
display: none !important;
}
.page-list-itemdata-page-title="LeetCode" {
display: none !important;
}
.page-list-itemdata-page-title="Attention" {
display: none !important;
}
ハッシュ記法のリンクをラベル風にする
/yuta0801/settings
code:style.css
/* #で始まるタグをラベル風にする */
/* atype="hashTag" {
display: inline-block;
padding: 0 6px;
margin-left: 4px;
background: #fff;
color: #363c49 !important;
font-size: 0.9em;
border: 1px solid #8f9899;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
} */
/* .line-title + .line atype="hashTag" {
display: inline-block;
margin: 4px;
font-size: 14px;
height: 32px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 2px;
border-style: none;
color: #0c0c0d !important;
background-color: rgba(12, 12, 13, 0.1);
}
.line-title + .line atype="hashTag":hover {
background-color: rgba(12, 12, 13, 0.2);
}
.line-title + .line atype="hashTag":active {
background-color: rgba(12, 12, 13, 0.3);
}
.line-title + .line atype="hashTag":focus {
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3)
} */
.lines .line:nth-child(2) atype='hashTag',
.lines .line:last-child atype='hashTag',
.lines .line:nth-last-child(2) atype='hashTag' {
display: inline-block;
margin: 4px;
font-size: 14px;
height: 32px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 2px;
border-style: none;
color: #0c0c0d !important;
background-color: rgba(12, 12, 13, 0.1);
}
.lines .line:nth-child(2) atype='hashTag':hover,
.lines .line:last-child atype='hashTag':hover,
.lines .line:nth-last-child(2) atype='hashTag':hover {
background-color: rgba(12, 12, 13, 0.2);
}
.lines .line:nth-child(2) atype='hashTag':active,
.lines .line:last-child atype='hashTag':active,
.lines .line:nth-last-child(2) atype='hashTag':active {
background-color: rgba(12, 12, 13, 0.3);
}
.lines .line:nth-child(2) atype='hashTag':focus,
.lines .line:last-child atype='hashTag':focus,
.lines .line:nth-last-child(2) atype='hashTag':focus {
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
}
画像のサイズを指定できるように
/scrapboxlab/画像のサイズを変えるUserCSS
code:style.css
.level-1 img { width: 16.7%; height:auto; max-height:10000000000px !important; }
.level-2 img { width: 33.3%; height:auto; max-height:10000000000px !important; }
.level-3 img { width: 50%; height:auto; max-height:10000000000px !important; }
.level-4 img { width: 66.7%; height:auto; max-height:10000000000px !important; }
.level-5 img { width: 83.3%; height:auto; max-height:10000000000px !important; }
.level-6 img { width: 100%; height:auto; max-height:10000000000px !important; }
faviconを変えないように
/rashitamemo/Scrapboxのfaviconを変更する
code:script.js
$('head > linkrel=icon').attr('href','/api/pages/masui/増井俊之/icon');
code: style.css
/* テロメアの存在感を薄くする */
.line .telomere .telomere-border:not(:hover) { opacity: .4 }
.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }
/mtane0412/しずかなScrapbox
とりあえず白くする
code:style.css
body {
background-color: #fff;
}
テロメアが気になる
テロメア関係のcss変数の部分
code:css
--telomere-border: #e2e2e2;
--telomere-unread: #89a3ff;
--telomere-updated: #6b8cff;
少し薄くした
code:style.css
body {
--telomere-border: #f8f8f8;
--telomere-unread: #c0d1ff;
--telomere-updated: #b0c7ff;
}
ピン止めの色が濃い
ピン度目の色
code:css
--card-backside: #979797;
少し薄くした
code:style.css
body {
--card-backside: #cccccc;
}
トップページのカードのボックスシャドウを本文やページリストにも出したい
カードのボックスシャドウ
code:css
.page-list .grid li{box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}
code:style.css
main.page {box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}
li.page-list-item {box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}
フォントを静かにする
Noto Sansにして色を薄く
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
html, body, #editor, .grid li{
font-family: 'Noto Sans JP', sans-serif;
color: rgb(100, 100, 100)
}
.deco-\* {
color: #222;
font-weight: bold;
}
/work4ai/settingsからサムネ設定を拝借
code:style.css
body{
/*カードの下部影*/
--card-box-shadow:none;
--card-box-hover-shadow:none;
}
.page-list .grid li{box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}
.grid li.page-list-item a{border-radius: 5px;}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img{
width: auto;
max-height: 90px;
max-width: 90%;
border-radius: 5px;
}
.grid li.page-list-item a .header{
padding: 13px 10px 8px;
border-top: none;
}
.grid li.page-list-item a .title{
font-size: 0.9em;
text-align: center;
}
.grid li.page-list-item:not(.pin) a{outline: 3px solid #efefef;}
.grid li.page-list-item:not(.pin) a:hover{outline: 3px solid #f4af7f;}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img{
width: auto;
max-height: 90px;
max-width: 90%;
border-radius: 5px;
}
.grid li.page-list-item a .header{
padding: 13px 10px 8px;
border-top: none;
}
.grid li.page-list-item a .title{
font-size: 0.9em;
text-align: center;
}
.grid li.page-list-item a .hover{background: transparent;}
data-hover-visible .grid li.page-list-item.pin a:hover .hover {
opacity: 0;}
謝辞
/villagepump/UserCSSを使ったScrapboxの大改造例を大変参考にしております