settings
他の人のsettingページを見て参考にしたり、Geminiを利用して制作したのであんまり参考にならないかも
---
メイン
code: style.css
/*
* ==========================================================
* Scrapbox Custom CSS
* ==========================================================
*/
:root {
/* 古いインターネットとWindows UIをベースにした配色 */
/* 冷たいインクブルー（選択色） */
}
/* =========================================
1. カルテ線とデータストリーム/AI
========================================= */
body, .app {
background-color: var(--win-gray) !important;
color: var(--text-main) !important;
font-family: "MS PGothic", "ＭＳ Ｐゴシック", Tahoma, Arial, sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
letter-spacing: 0.03em !important;
z-index: 0;
}
/* ごく薄い罫線（静止状態） */
body::before {
content: "";
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
background-size: 100% 24px;
z-index: -3;
pointer-events: none;
}
/* -----------------------------------------
レイヤー3（画面下部で微かに動くデータストリーム）
----------------------------------------- */
.app::before {
content: "ପ₍ᐢ๑• ֊ •๑ᐢ₎ଓ";
position: fixed;
bottom: 2px;
left: 0;
width: 200vw;
font-family: "Courier New", monospace;
font-size: 10px;
color: rgba(0, 0, 0, 0.04);
white-space: nowrap;
pointer-events: none;
z-index: -1;
animation: dataStream 60s linear infinite;
}
@keyframes dataStream {
0% { transform: translateX(0); }
100% { transform: translateX(-50vw); }
}
/* -----------------------------------------
右下の無機質なAI（ASCII）
----------------------------------------- */
.app::after {
content: "ପ₍ᐢ๑• ֊ •๑ᐢ₎ଓ" ;
position: fixed;
bottom: 20px;
right: 20px;
font-family: "MS PGothic", "ＭＳ Ｐゴシック", monospace;
font-size: 11px;
line-height: 1.2;
color: var(--win-dark);
white-space: pre;
pointer-events: none;
z-index: 1000;
opacity: 0.3;
transition: all 0.5s ease;
}
/* 画面ホバーで変化 */
.app:hover::after {
content: "ପ₍ᐢ๑• ֊ •๑ᐢ₎ଓ";
color: var(--clinic-blue);
opacity: 0.7;
text-shadow: 0 0 5px rgba(51, 102, 153, 0.4);
}
/* =========================================
2. ヘッダー（旧式タイトルバー）
========================================= */
.navbar {
border-bottom: 2px outset var(--win-light) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.navbar .navbar-brand span,
.navbar a,
.navbar .title,
.navbar i {
font-weight: bold !important;
text-shadow: 1px 1px 0px #000000 !important; letter-spacing: 0.05em;
}
/* 検索窓（古典的テキストボックス） */
background-color: var(--win-lighter) !important;
color: var(--text-main) !important;
border: 2px solid !important;
border-top-color: var(--win-dark) !important;
border-left-color: var(--win-dark) !important;
border-bottom-color: var(--win-light) !important;
border-right-color: var(--win-light) !important;
border-radius: 0 !important;
font-family: inherit !important;
padding: 4px 8px !important;
text-shadow: none !important;
}
background-color: var(--color-hover-bg) !important;
outline: none !important;
}
/* =========================================
3. Windows風ウィンドウUI構造（ページ本体）
========================================= */
.page {
background-color: var(--bg-page) !important;
border: 2px solid;
border-top-color: var(--win-dark) !important;
border-left-color: var(--win-dark) !important;
border-bottom-color: var(--win-lighter) !important;
border-right-color: var(--win-lighter) !important;
box-shadow:
-1px -1px 0 var(--win-darker),
1px 1px 0 var(--win-lighter),
-2px -2px 0 var(--win-gray),
2px 2px 0 var(--win-gray),
-3px -3px 0 var(--win-light),
3px 3px 0 var(--win-darker) !important;
border-radius: 0 !important;
padding: 36px 30px !important;
margin-top: 20px !important;
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 本文を区切るテキストサイト風の極薄の点線 */
.line {
border-bottom: 1px dotted rgba(0, 0, 0, 0.08) !important;
}
/* -----------------------------------------
枠線は敷かず、背景色だけを微かに濃くして識別可能に
----------------------------------------- */
code, .code-block {
background-color: rgba(0, 0, 0, 0.04) !important; /* メイン背景より微かに濃いグレー */
border: none !important;
border-radius: 0 !important;
color: var(--text-main) !important;
font-family: "MS Gothic", "ＭＳ ゴシック", Courier, monospace !important;
padding: 2px 4px !important; /* インラインでの余白 */
}
/* 複数行コード(pre)のスタイル */
pre {
background-color: rgba(0, 0, 0, 0.04) !important;
border: none !important;
/* 視認性のために左端にだけ控えめな線を残す */
border-left: 2px solid var(--win-dark) !important;
border-radius: 0 !important;
color: var(--text-main) !important;
font-family: "MS Gothic", "ＭＳ ゴシック", Courier, monospace !important;
padding: 8px 12px !important;
margin: 8px 0 !important;
display: block !important;
}
/* =========================================
4. タイポグラフィと見出し（日記風の静けさ）
========================================= */
.line.line-title {
margin-bottom: 24px !important;
border-bottom: 1px solid var(--win-dark) !important;
padding-bottom: 8px !important;
}
.line.line-title .text {
font-size: 1.3rem !important;
font-weight: normal !important;
color: var(--clinic-blue) !important;
font-family: "MS PMincho", "ＭＳ Ｐ明朝", serif !important;
}
/* 明滅するカーソル */
.line.line-title .text::after {
content: " _";
color: var(--win-dark);
animation: blinkDiary 1.2s steps(2, start) infinite;
}
@keyframes blinkDiary {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* =========================================
5. リンクとインタラクション（選択風ハイライト）
========================================= */
a, .page-link, .link {
color: var(--color-link) !important;
text-decoration: underline !important;
display: inline-block;
padding: 0 2px;
transition: background-color 0s;
}
a:visited, .page-link.visited {
color: var(--color-visited) !important;
}
/* ホバー：旧Windowsの選択範囲のように白抜き＋青背景にパッと切り替わる */
a:hover, .page-link:hover, .link:hover {
background-color: var(--color-link) !important;
text-decoration: none !important;
outline: 1px dotted rgba(255,255,255,0.5) !important;
outline-offset: -1px;
}
/* =========================================
6. カード一覧画面（Windowsフォルダ的挙動）
========================================= */
.grid-style-item {
background-color: var(--bg-page) !important;
border: 1px dotted var(--win-dark) !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: none !important;
}
/* カードHover: 青く反転して文字が白になる */
.grid-style-item:hover {
background-color: var(--color-link) !important;
border: 1px solid var(--color-link) !important;
outline: 1px dotted rgba(255,255,255,0.5) !important;
outline-offset: -1px;
}
.grid-style-item:hover .title,
.grid-style-item:hover .description {
}
/*
* ==========================================================
* 1行の折り返しで入る真ん中の線を消し、
* 改行でつなげた場合も1つの大きな箱に結合します。
* （空行などを挟むと別々の箱になります）
* ==========================================================
*/
/* 1. 引用の基本スタイル（ブロック化して箇条書き・折り返し時の分断を防ぐ） */
.line .quote {
background-color: var(--clinic-pale) !important;
border: 1px solid var(--win-gray) !important;
border-left: 3px solid var(--clinic-blue) !important;
color: var(--text-main) !important;
padding: 8px 12px !important;
font-size: 0.95em !important;
font-style: normal !important;
display: block !important; /* ★インライン要素の枠線分断を修正 */
margin-top: 4px;
margin-bottom: 4px;
}
/* 2. 引用符の前に「＞」を自動挿入 */
.line .quote::before {
content: "＞ ";
color: var(--win-dark);
font-family: inherit;
}
/* --------------------------------------------------
3. 複数行の引用を改行（Enter）でつなげた場合の処理
-------------------------------------------------- */
/* 直後にまた引用が続く行（上の行：下枠線と下余白を消す） */
.line:has(+ .line .quote) .quote {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 2px !important;
}
/* 直前が引用だった行（下の行：上枠線と上余白を消す） */
.line:has(.quote) + .line .quote {
border-top: none !important;
margin-top: 0 !important;
padding-top: 2px !important;
}
/* 本文を区切る極薄の点線が、引用箱の間に入り込むのを防ぐ */
.line:has(.quote) {
border-bottom: none !important;
}
/* おまけ機能：2行目以降の「＞」を透明にしてスッキリさせる */
.line:has(.quote) + .line .quote::before {
color: transparent !important; /* 完全に消さず透明化することで左の開始位置を揃える */
}
/* =========================================
一時無効化中 引用のデザインをコメントアウト、有効化の際は上記と入れ替えて ========================================= */
/*
.line .quote {
background-color: var(--clinic-pale) !important;
border: 1px solid var(--win-gray) !important;
border-left: 3px solid var(--clinic-blue) !important;
color: var(--text-main) !important;
padding: 8px 12px !important;
font-size: 0.95em !important;
font-style: normal !important;
margin-top: 4px;
}
.line .quote::before {
content: "＞ ";
color: var(--win-dark);
font-family: inherit;
}
*/
/* 箇条書きドット（小さい無機質な四角） */
.line .indent-mark .dot {
background-color: var(--win-dark) !important;
border-radius: 0 !important;
width: 3px !important; height: 3px !important;
}
/* Web1.0時代の立体的な水平線を再現 */
.line hr {
border: 0 !important;
height: 2px !important;
background: var(--win-dark) !important;
border-bottom: 1px solid var(--win-lighter) !important;
margin: 16px 0 !important;
}
/* サイドバーボタン */
.page-menu .tool-btn {
background-color: var(--win-gray) !important;
border: 2px solid !important;
border-top-color: var(--win-light) !important;
border-left-color: var(--win-light) !important;
border-bottom-color: var(--win-dark) !important;
border-right-color: var(--win-dark) !important;
border-radius: 0 !important;
margin-bottom: 4px !important;
color: var(--text-main) !important;
}
.page-menu .tool-btn:active {
border-top-color: var(--win-dark) !important;
border-left-color: var(--win-dark) !important;
border-bottom-color: var(--win-light) !important;
border-right-color: var(--win-light) !important;
background-color: var(--win-light) !important;
}
/* Windows9x風カスタムスクロールバー */
::-webkit-scrollbar {
width: 16px;
background: var(--win-gray);
border-left: 1px solid var(--win-dark);
}
::-webkit-scrollbar-thumb {
background: var(--win-gray);
border-top: 2px solid var(--win-light);
border-left: 2px solid var(--win-light);
border-right: 2px solid var(--win-darker);
border-bottom: 2px solid var(--win-darker);
}
/* 選択反転色（Windowsのクラシックブルー） */
画面
---
上部アイコン
code:style(無効化中).css`
.brand-icon {
width: 40px;
height: 40px;
background-color: none;
background-image: var(--logo-url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 100vh;
svg { display: none; }
}
非表示
code:style.css
/* 追加したいときは###を任意の言葉に置換してください */
display: none !important;
}
code:style.css
background: var(--quote-bg);
border: 1px solid;
border-radius: 4px;
font-size: 0.9em;
margin: 0 0.2em;
padding: 4px 6px;
}
日報っぽいタイトルの記事だけ色を変える
code:style.css
/*
* ==========================================================
* Concept: デイリー監視ログ / バイタル記録データの際立ち
* 適用対象: 「202」から始まるタイトルのページ (2020〜2029年全てに対応)
* ==========================================================
*/
:root {
/* ターミナル/ハッカー風のインターネットグリーンを追加 */
--terminal-green-dim: rgba(0, 255, 0, 0.1);
}
/* 1. トップページ等のカード一覧での日報デザイン */
border: 1px solid var(--clinic-cyan) !important;
border-left: 6px solid var(--clinic-cyan) !important;
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(0, 170, 255, 0.03) 10px,
rgba(0, 170, 255, 0.03) 20px
) !important;
transition: all 0.2s ease !important;
}
/* 日報カードのタイトルフォントを無機質な等幅フォントに */
font-family: "Courier New", Courier, monospace !important;
color: var(--clinic-cyan) !important;
font-weight: bold !important;
letter-spacing: 0.1em;
transition: all 0.2s ease !important;
}
/* ★ホバー時はインターネット感のある「ターミナルグリーン」に変貌 */
background-color: var(--terminal-green-dim) !important; /* 背景は薄い緑に */
border-color: var(--terminal-green) !important;
border-left-color: var(--terminal-green) !important;
filter: none !important; /* 隔離ブラーを即座に解除 */
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2), inset 0 0 8px rgba(0, 255, 0, 0.1) !important;
}
/* ★ホバー時のタイトルもグリーンに発光 */
color: var(--terminal-green) !important;
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7) !important;
}
/* 2. 日報ページのタイトル（ページを開いた時） */
border-left: 6px solid var(--clinic-cyan) !important;
padding-left: 12px !important;
transition: all 0.3s ease;
}
font-family: "Courier New", Courier, monospace !important;
color: var(--clinic-cyan) !important;
font-weight: bold !important;
letter-spacing: 0.2em !important;
transition: all 0.3s ease;
}
/* タイトルエリアにホバーした時も緑に光るギミック（おまけ） */
border-left-color: var(--terminal-green) !important;
}
color: var(--terminal-green) !important;
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
}
/* 3. 日報へのリンク（本文中の青リンク） */
font-family: "Courier New", Courier, monospace !important;
color: var(--clinic-cyan) !important;
border-bottom: 1px dashed var(--clinic-cyan) !important;
background-color: rgba(0, 170, 255, 0.05) !important;
padding: 0 4px !important;
border-radius: 2px;
transition: all 0.15s ease !important;
}
/* ★リンクホバー時もターミナルグリーンに反転 */
background-color: var(--terminal-green) !important;
color: #000000 !important; /* 黒文字でバシッと目立たせる */ border-bottom: 1px solid var(--terminal-green) !important;
text-shadow: none !important;
box-shadow: 0 0 5px var(--terminal-green) !important;
}
インデント一番左に縦線を挿入
code:style.css
/* インデントの縦線（黒） */
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {
position: relative;
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
content: " ";
position: absolute;
left: 50%;
/* 下の行のドットまで届くように調整 */
margin: -4px 0;
height: calc(100% + 8px);
/* 白背景で見えるように不透明度を上げた黒 */
border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
}
ピン留めを段分け
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {grid-column-start: 1}
テーブル
---
テーブル内の強調表示[* ]
code:style.css
/* テーブル内の強調記法を太字にする */
.table-block .table-block-cell span.deco-\* {
font-weight: bold;
}
記法
---
水平線：---
code:style.css
/* 行が「---」のみで構成されている場合のみ、レイアウトを横線用に変更 */
/* 条件：1文字目, 2文字目, 3文字目が「-」であり、かつ4文字目(c-3)が存在しない */
display: flex !important;
align-items: center !important;
height: 1.5em !important;
}
/* 記号の「---」自体を隠す */
display: none !important;
}
/* 実際に表示される黒い横線 */
content: "" !important;
flex-grow: 1 !important;
height: 0 !important;
/* 背景白に合わせて少し濃いめの黒 */
border-top: 1px solid rgba(0, 0, 0, 0.4) !important;
margin-left: 10px;
margin-right: 10px;
}
二重括弧による強調をマーカーっぽくする
code:style.css
.line strong:not(class) { color: var(--text-color);
background: linear-gradient(transparent 75%, rgb(255 255 102 / 0.6) 25%);
}
アイコン
---
[特定リンクにアイコン
code:style.css
/* pdf */
:is(.line, .line .deco) a.link:is(
)::before {
font-family:"Font Awesome 5 Free", "Font Awesome 5 Brands";
content:"\f1c1";
font-weight:400;
margin-right:1px;
}
/* wikipedia */
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f266';
font-weight:400;
margin-right:0px;
}
/* favicon */
:is(.line, .line .deco) a.link:is(
):not(
)::before {
content: '';
border-bottom: 2px;
width: 16px;
height: 16px;
margin-right: 2px;
vertical-align: -3px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
}
content: '';
border-bottom: 2px;
width: 16px;
height: 16px;
margin-right: 2px;
vertical-align: -3px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
}
content: '';
border-bottom: 2px;
width: 16px;
height: 16px;
margin-right: 2px;
vertical-align: -3px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
:is(.line, .line .deco) a.link:is(
)::before{
}
画像
---
画像を並べる[**| ]
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.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: .2em } ![https://pbs.twimg.com/profile_images/1973707934355116032/m-N23xXR_400x400.jpg");](https://pbs.twimg.com/profile_images/1973707934355116032/m-N23xXR_400x400.jpg");){kind=link}