settings
settings
プロジェクト全体のスタイル変更用
参考リンク
Scrapboxで遊ぶ - Qiita：https://qiita.com/progfay/items/5a81e130fc36291990d4
CSS filter - 橋本商会：https://scrapbox.io/shokai/CSS_filter
settings - memooooo：https://scrapbox.io/memooooo/settings
ーーーー
style.css/* イタリックによる強調をマーカーっぽくする */
.line .deco-\/{ background: linear-gradient(#ffe0c1 80%, transparent 90%)}
style.css/* 中点を薄く、少し横長にする */
.line .indent-mark .dot {
top: 8.5px; /*12→9 2022/06/23 https://scrapbox.io/ise117taisei-86059928/settings#62b3c8fe6295d50000a4099d 行間を狭くするのに対応して変更*/
width: 5px;
height: 4px;
background-color: #909090;
}
style.css .line .image{border:solid 1px #ddd} /* 1pxの直線で、色を#dddにする場合 */
Scrapboxのスタイルシート変更例 - 小技チョコレート：http://ich.hatenadiary.com/entry/scrapbox-usercss#%E6%9C%AC%E6%96%87%E4%B8%AD%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%AB%E6%9E%A0%E7%B7%9A%E3%82%92%E4%BB%98%E3%81%91%E3%82%8B
図関連
style.css.line img.image {
max-height: none !important;
max-width: 85% !important;
}図を大きく表示する。けっこう便利
UserCSS - Scrapbox ヘルプ：https://scrapbox.io/help-jp/UserCSS
style.css.level-1 img { width: 30.0%; max-height: none !important; }
[* [画像url]]] の表記で画像を小さくできるーーーー
デイリーページの日付テンプレ
1. このCSSをsettingsページかユーザーページにコピペ
style.cssa#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f067'; font: 21px/46px 'FontAwesome' }
a#Templates.tool-btn img { opacity: 0 }
参考
scrapbox を１年間使ってみて/カスタムcss｜けむっそー｜note：https://note.mu/shoma1219/n/nebd08a61be19
＃で始まるタグをラベル風にする
style.css a[type="hashTag"]{
display: inline-block;
padding: 3px 3px 3px 3px;
margin: 0 5px 5px 0;
background: #f9f9f9;
color: #a1a1a1;
font-size: 0.8em;
border: 1px solid #d1d1d1;
border-radius: 3px;
/* transition: .3s; */
-webkit-transform: scale(1);
transform: scale(1);
}
a[type="hashTag"]:hover{
color: #FFFFFF;
background: #212121;
border: 1px solid #212121;
} リンク書式、少し太目に
220623_行間の調整のため通常の太さに戻す
style.cssa,
.page-list-item .description .link {
color: #2068f6;
/* font-weight: 550; */
}
a:hover, a:active {
color: #3068ff ;
}
.line a.empty-page-link {
color: #e01010 ;
/* font-weight: 550; */
}
.line a.empty-page-link:hover {
color: #3068ff ;
}張り付くメニューバー関連
200510_
検索アイコンは以下の設定で消える
style.css.navbar.kamon {
display: none;
}新規作成ボタンを消す
style.css.new-button { /* 新規ボタンを消す */
visibility: hidden;
}style.css/* 1. Scrapboxアイコンをバーガーアイコンに置き換え 2021/03/25停止.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; }
*/
.brand-icon { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; }
/* 3-a. ヘッダー内のプロジェクトのページへのリンク ※要UserScript */
.col-brand .project-home {
color: #dddddd; /* リンクの色 */
margin: 16px 0 0 28px; font-size: 18px;
display: inline-block; max-width: calc(100% - 80px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.col-brand .project-home:hover, .col-brand .project-home:focus,
.col-brand .project-home:active { text-decoration: none; opacity: .6 }
.col-brand .project-home .icon { margin-right: 10px; font-size:.9em }
191009_追加、210207_無効化（標準の機能になった） 210325_projectタイトルをメニューバーに追加
settings - shiology.org🌹：https://scrapbox.io/shiology/settings
style.css/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */
/* ※次のnavbar固定と同時に使う必要がある */
@media screen and (min-width: 800px) {
.quick-launch .project-home {
position: fixed; top: 0px; left: calc((100% - 1080px)/2); z-index: 990 }
/*.page { padding-top: 0 }*/
.quick-launch .title { color: #ffffff; font-size: 22px; }}
@media screen and (min-width: 800px) {
.quick-launch .project-home { left: 100px } /*初期 { left: 25px } */
.quick-launch .title { color: #FFF; font-size: 20px; }}style.css/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 0px; padding-right: 0 !important }/*初期 { padding-top: 60px; padding-right: 0 !important } */
body:not(.presentation)
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } } Scrapboxアイコン削除、サイズバー削除、ブログタイトル文字拡大
style.css.brand-icon { display: none !important; }
.grid-size-range { display: none !important; }
.project-home { font-size: 1.5em !important; color: #595959 !important; }
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-form .kamon { display: none !important; }
.dropdown-toggle { color: #BBBBBB !important; }
.random-jump-button { color: #BBBBBB !important; }
.new-button { background-color: rgba(255, 111, 175, 0) !important; }
.horizontal-line { background-color: rgba(255, 111, 175, 0.3) !important; }
.vertical-line { background-color: rgba(255, 111, 175, 0.3) !important; }style.css.navbar-form .dropdown.open .dropdown-menu {
min-width: 50%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
style.css.page-list .grid li {
/* margin: 0 80px 80px 0; */
}関連ページリスト
2021/11/04
style.css .related-page-list:not(:hover)
{
opacity: 0.1;
transition: opacity 1s;
}
.related-page-list:hover
{
/* opacity: 0.4; /* */
opacity: 0.6; /* */
transition: opacity 1s;
}hover時は半透明、それ以外は不透明（ここだけ逆）
style.css.page-list:not(:hover)
{
opacity: 0.4;
transition: opacity 0.6s;
}
.page-list:hover
{
opacity: 0.8;
transition: opacity 0.7s;
}
2022/09/15
style.css .page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}2022/03/18
脳が拡張される感じが減った気がする．本文の一部が見えないからか？
style.css.col-page {
max-width: 1500px !important;
}
@media (min-width: 768px) {
.related-page-list {
flex-basis: 140px !important;
}
.related-page-list-search input {
width: 120px !important;
}
}
@media (min-width: 1240px) {
.related-page-list {
flex-basis: 295px !important;
}
.toolbar {
width: 288px !important;
}
}
@media (min-width: 768px) {
.page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 20px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 2;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.links-container {
gap: 10px !important;
}
.related-page-list .grid {
gap: 0px !important;
}
.related-page-list .grid li {
margin-bottom: 5px !important;
margin-right: 0px !important;
width: 140px;
height: 50px !important;
}
.related-page-list .grid .splitter {
height: 15px !important;
}
.related-page-list .relation-label .arrow {
display: none !important;
}
.related-page-list .relation-label a {
/* 関連リンク ラベル */
padding: 4px !important;
/* border-bottom: 2px solid var(--relation-label-bg); */
}
.related-page-list .relation-label .title{
font-size: 12px;
}
.related-page-list .relation-label .icon-lg{
display: none !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 5px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
z-index: 1;
/* background-color: var(--translucent-card-bg)*/
}
.related-page-list .page-list-item .header .title {
font-size: 12px !important;
filter: drop-shadow(0px 0px 6px var(--card-bg, #fff)) drop-shadow(0px 0px 8px var(--card-bg, #fff)) drop-shadow(0px 0px 10px var(--card-bg, #fff)) drop-shadow(0px 0px 14px var(--card-bg, #fff))
}
.related-page-list .page-list-item .description {
padding-top: 0px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
z-index: 1;
}
.related-page-list .page-list-item .description .line {
font-size: 11px !important;
}
.related-page-list .page-list-item .description .line .inline-icon {
font-size: 9px !important;
}
.related-page-list .page-list-item .icon {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
padding: 5px !important;
}
.related-page-list .page-list-item .icon img {
width: 100% !important;
height: 150% !important;
width: auto !important;
margin-right: 0 !important;
object-fit: contain;
}
.related-page-list .ellipsis {
height: 30px !important;
}
.related-page-list .ellipsis a {
padding: 2px !important;
}
.related-page-list .ellipsis .circle {
width: 30px !important;
height: 30px !important;
}
2022/05/19
style.css/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line [class^="level"] .deco-\| { flex-wrap: wrap }
.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) }
.line [class^="level"] .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line [class^="level"] .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line [class^="level"] .deco-\| img.image { margin: .1em }2022/06/23
行間を狭くする
style.css .line {
line-height: 22px;
}2022/07/01
文字を小さくする
style.css.line {
font-size:14px;
}コードブロックの行間を狭める
2022/07/01
style.css .line span.code-block {
line-height: 1.2;
}インデント関連
style.css/* 中点を薄く、少し横長にする */
.line .indent-mark .dot {
top: 8px; /*220623_行間の変更に合わせて調整 12→8 */
width: 5px;
height: 4px;
background-color: #909090;
} style.css.line .indent-mark .dot{
background-color: #007bbb;
/*margin-top: 2px;*/
}
.line .indent-mark .c-1 + .dot {
background-color: #3eb370;
}
.line .indent-mark .c-2 + .dot {
background-color: #f08300
}
.line .indent-mark .c-3 + .dot {
background-color: #e2041b
}style.css.line strong {
margin: 0.2em 0;
}
/* 見出しのリンクの下線を非表示にする */
.line strong a:link {
text-decoration: none;
}
.line strong:not(.level-1) .deco-\* {
padding: 0.3em 0;
line-height: 170%;
}
/* Level3以降は左にボーダー */
.line strong:not(.level-1):not(.level-2) .deco-\* {
border-left: solid 5px #29a972;
padding-left: 0.5em;
padding-right: 0.5em;
}
/* Leve13以降は下にもボーダー */
.line strong:not(.level-1):not(.level-2) .deco-\*::after {
display: block;
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: #D7D7D7;
}
.line strong.level-4 .deco-\* {
border-width: 7px !important;
}
.line strong.level-5 .deco-\* {
border-width: 9px !important;
}>参考
2021/11/26
style.cssa[type="link"].page-link, .line a.link {
color: #4040ac !important;
}
a[type="link"].empty-page-link, a[type="hashTag"].empty-page-link {
color: #b45332 !important;
}ーーーー