settings
2025-11-24更新
2025-11-24cssのバックアップ
可読性の向上
リファクタリング
2022/10/07更新
Scrapboxのフォントを少しだけカスタマイズ
2022/9/25変更
ピン留めをわけるCSSを削除
ナビゲーションバーを透明にするCSSを削除
ピン留めで端を折ったスタイルを無効化を削除
ナビゲーションバーのScrapboxアイコンサイズを小さくするを削除
参照記事（Thanks!）
下記に記載されたソースのからほとんどそのまま使わせてもらっています。ありがとうございます。
/customize/Dark Theme CSS
/scrasobox/settings
/arpla/ピン留めを小さなパネルにするUserCSS
/tosiiu
code: style.css
/*
================================================================
リファクタリング済みカスタムCSSスタイルシート設定 (UserCSS)
- フォントをKosugi MaruからM PLUS 1pに変更。
- メインコンテンツの罫線・影除去を強化。
================================================================
*/
/* 1. フォントリソースのインポート (M PLUS 1pのWebフォントURL) */
@import url("https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap");
/* 以前のフォントをコメントアウト */
/* @import url("https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap"); */
/* 2. M PLUS 1pの適用 (可読性向上) */
html, body, .editor, .stream, .grid li.page-list-item {
font-family: "M PLUS 1p", helvetica, arial, sans-serif !important;
}
/* 3. 見出しと強調のスタイル */
strong.level.level-1, strong.level {
font-weight: bold;
}
strong.deco-\* {
font-weight: 900;
}
.line strong {
display: inline-block;
}
/* 見出しレベル2 (主要な区切り線) */
.line strong.level-2 {
width: 100%;
margin: 0.1em;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 2.5px #BFBFBF;
font-weight: 700;
}
.line.line-title .text {
width: 100%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.25em;
font-weight: bold;
font-size: 36px;
position: relative; left: -15px;
}
/* 4. 引用の調整 (カード型デザイン) */
.line .quote, span.quote {
padding: 10px;
width: 100%;
display: block;
background-color: #f9f9f9;
border-left: solid 4px #d9d9d9;
}
/* 5. 箇条書きの●を控えめにする (デザイン簡素化) */
.line .indent-mark .dot {
height: 3px;
top: 11px;
background-color: #AAA;
}
/* 6. Scrapboxアイコンをハンバーガーメニューに変更 */
.navbar-brand div, .navbar-brand span {
display: none !important;
}
.navbar-brand::before {
content: '\f0c9';
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: 24px;
color: #383838;
position: absolute;
top: 50%;
transform : translateY(-50%);
}
/* 7. 検索窓のサジェストを大きくする (のびのびドロップダウン) */
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
/* 8. ページとテロメア設定 (メインカラム罫線/影除去を強化) */
body {
background-color: #fff !important;
}
.page, .app, .page-container { /* セレクタを強化 */
box-shadow: none !important;
border: none !important;
outline: none !important;
}
.telomere-border {
border-color: #fff !important;
}
.telomere-border.unread {
border-color: #4286f4 !important;
}
/* 9. 外部リンクにアイコンをつける */
.line a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
font-weight: 600;
content: ' \f35d';
display: inline-block;
}
/* 10. アイコンのスタイル (サイズと形状) */
.line img.icon {
height: 2em;
border-radius: 50%;
overflow: hidden;
position: relative;
}
/* 11. 二重括弧による強調をマーカーっぽくする (蛍光ペン表現) */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%);
}
/* 12. #ハッシュタグ のスタイル (バッジ風) */
atype="hashTag" {
padding: 4px 6px;
border-radius: 4px;
font-size: 14px;
background-color: #616161;
color: #fff !important;
opacity: 0.8;
}
/* 13. 白背景と白画像の境界線をつけて見やすくする */
.image {
border: 1px solid #eee;
border-radius: 3px;
}
/* 14. グリッド/カード表示の調整 (罫線削除とドロップシャドウ適用) */
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
border: none;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
transition: box-shadow 0.3s ease-in-out;
}
.grid li.page-list-item a:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.grid li.page-list-item a .hover {
background: none;
opacity: 0;
}
.grid li.page-list-item a .header {
border-top: 0 ;
}
/* 15. ピン留めアイコンの強制的なスタイルクリア (デフォルトに戻すため) */
.grid li.page-list-item a .pin,
.grid li.page-list-item a .pin::after,
.grid li.page-list-item a .pin::before {
background: none !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
content: none !important;
display: none !important;
}
/* 16. ページメニューを固定 */
.col-page-side .page-menu {
position: fixed;
top: 100px;
}