settings
code:style.css
/* =========================
0) 既存：インデント色
========================= */
@import "/api/code/shio/indentcolors/style.css";
@media screen {
.quick-launch .title { color: #fff; }
.grid-size-range { display: none !important; }
.project-home { font-size: 1.4em !important; }
.new-button { background-color: rgba(255,111,175,0) !important; }
.horizontal-line,
.vertical-line { background-color: rgba(255,111,175,0.3) !important; }
.random-jump-button, .dropdown-toggle { color: #DDDDDD !important; }
.kamon.kamon-caret-down { display: none !important; }
a.bidirectional-page-link { display: none; }
}
/* =========================
1) ベース
========================= */
body { background: #fff; }
:root{
--serif-stack:
"Adobe Garamond Pro", "Garamond", "Times New Roman",
"游教科書体 横用", "游教科書体", "游教科書体 横用 ミディアム", "YuKyo_Yoko-Medium",
"UD デジタル 教科書体", "UDデジタル教科書体",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
"YuMincho", "Yu Mincho",
serif;
--ui-stack:
system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
/* 本文（ページ）＝ 教科書体優先 + Garamond系 + 明朝fallback */
.page, .page .lines, .page .line,
.editor .page, .editor .lines, .editor .line{
color:#000;
font-family: var(--serif-stack);
}
/* =========================
2) ナビバー／カード周り
========================= */
.navbar-default {
background-color: rgba(255,111,175,0.8);
overflow: unset;
border-top: solid #ff1493 5px;
}
.grid li.page-list-item a { box-shadow: 0 1px 0 rgba(0,0,0,0); }
ul.grid li.page-list-item a .header,
ul.grid-md.grid li.page-list-item a .header { border-top: 0; }
ul.grid-lg.grid li.page-list-item a .header { border-top: 1px solid #555; }
.grid li.page-list-item a:hover { box-shadow: none; }
.page-list-item .description img.inline-icon { width: 100%; height: 100%; }
form { border: 0; }
/* =========================
3) ピンクの pin
========================= */
.grid li.page-list-item a .pin { background: transparent; background-image: none; }
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 10px;
color: #ff6faf;
bottom: 0;
display: inline-block;
transform: rotate(30deg);
}
/* =========================
4) 新着テロメア（薄/濃ピンク）
========================= */
.editor .lines .telomere .telomere-border.unread:not(.updated-after-load) { border-left-color: #ffcbe2 !important; }
.editor .lines .telomere .telomere-border.updated-after-load { border-left-color: #ff6faf !important; }
/* =========================
5) 角丸 & hover
========================= */
.page,
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a { border-radius: 15px; }
.grid li.page-list-item a .header {
position: absolute;
bottom: 0;
z-index: 1;
background: rgba(240,240,240,0.9);
border-top: 1px;
}
.grid li.page-list-item a .icon img { position: absolute; top: 0; left: 0; }
.grid li.page-list-item a:hover { border-radius: 10px; box-shadow: 0 0 0 4px #729FCF; }
.container { max-width: none; }
/* =========================
6) カーソル
========================= */
.cursor { width: 3px; background: #000; }
/* =========================
8) 吹き出し
========================= */
.deco-\{, .deco-\} {
font-size: 1em; color: #fff; background: #a2acaa;
padding: 0.1em 0.2em; border-radius: 0.4em; margin: auto 0.3em;
display: inline-block; max-width: calc(100% - 100px); vertical-align: top;
}
.deco-\{:before {
position: absolute; transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0; content: "";
border-width: 0 0 0.6em 0.6em; border-style: solid; border-color: #a2acaa transparent;
}
.deco-\}:after {
position: absolute; transform: translateY(calc(1em - 80%));
width: 0; content: "";
border-width: 0 0.6em 0.6em 0; border-style: solid; border-color: #a2acaa transparent;
}
.deco-\!:before, .deco-\!:after { border-color: #ee6666 transparent; }
.deco-\{ a, .deco-\} a { color: #66F; }
/* =========================
9) マーカー／強調／注記
========================= */
.line strong:not(class) { color: #0a0705; background: linear-gradient(#fff 30%, #00ff01 80%); }
.line strong { color: #ff6faf; }
.deco-\# { color: #0a0705; background: linear-gradient(#fff 60%, #ff0 99%); }
.deco-\! { color: #fff; background: #ee6666; padding: 0.1em 0.2em; }
/* 位置揃え */
.deco-\< { position: absolute; width: 100%; text-align: center; }
.deco-\> { position: absolute; width: 100%; text-align: right; }
/* ドット */
.line .indent-mark .dot { top: 11px; width: 6px; height: 3px; background: #8888aa; }
/* 丸で囲む */
.line class="deco-\( deco-\)" {
display: inline-block; border-radius: 50%; border: .05em solid #f40;
min-width: 1em; padding: .1em; vertical-align: text-bottom; line-height: 1;
color: #f40; font-weight: 600;
}
/* =========================
10) テーブル
========================= */
.table-block .cell { border-right: 1px solid #fff; border-bottom: 1px solid #ddd; }
.table-block .cell:first-child { border-left: 1px solid #fff; }
.section-title + .line .table-block .cell { border-top: 1px solid #fff; font-weight: bolder; text-align: center; }
/* =========================
11) レインボウ
========================= */
.deco-\' {
color: #fff;
background: linear-gradient(to right, deeppink, hotpink, orchid, violet, plum, darkmagenta, purple, deeppink) 0% center / 200% auto;
padding: 0.1em 0.2em;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow { to { background-position-x: 200%; } }
/* =========================
12) タイポグラフィ（タイトル1行目は触らない）
========================= */
.page .line { line-height: 1.85; letter-spacing: 0.00em; }
/* セクション見出しは“軽く”上品に（サイズは変えない） */
.page .line:has(.section-title) { font-weight: 500; letter-spacing: 0.015em; }
/* 引用は上品に（1回だけ定義） */
.line .quote {
font-style: normal;
padding: 0.25em 0.8em;
border-left: 3px solid #ff6faf30;
background: #fffafb;
margin: 0.4em 0;
}
/* 箇条書き */
.page .linedata-indent="1" { margin-left: 0.6em; }
.page .linedata-indent="2" { margin-left: 1.2em; }
/* =========================
ヘッダのプロジェクト名だけ serif（教科書体＋Garamond）
========================= */
.project-home, .project-home *,
.quick-launch .title, .quick-launch .title *{
font-family: var(--serif-stack) !important;
}
/* =========================================
A) トップページ（一覧）の文字を本文フォントにする
（UI全体はゴシックのまま）
========================================= */
/* 一覧の「ページタイトル」「説明文」だけ本文フォント */
.stream li.page-list-item a .title,
.stream li.page-list-item a .description,
.grid li.page-list-item a .title,
.grid li.page-list-item a .description,
li.page-list-item a .title,
li.page-list-item a .description{
font-family: var(--serif-stack) !important;
letter-spacing: 0.01em;
}
/* =========================================
縦長画像を中央に小さめに表示
========================================= */
/* 1) まず「画像URL」等で貼った画像が縦に伸びすぎるのを抑止（保険） */
img.image {
max-height: 80vh; /* 縦に伸びすぎない */
object-fit: contain;
}
/* 2) 画像URL（= level-3）を「幅50%＆中央寄せ」にする
※ 縦位置の写真を貼るときだけ、URLの前に *** を付ける運用 */
.level-3 img.image {
width: 50% !important;
max-height: none; /* 幅で制御したいので高さ制限を解除 */
display: block;
margin: 0.4em auto; /* 中央寄せ */
}
/* 3) ついでに「小さくした画像」全般は中央寄せになるように（任意） */
.level-1 img.image,
.level-2 img.image,
.level-4 img.image,
.level-5 img.image {
display: block;
margin-left: auto;
margin-right: auto;
}
/* =========================================
B) 未確定文字列（IME変換中）にも本文フォントを効かせる
========================================= */
/* エディタ領域そのもの + 入力系に直接指定 */
.editor,
.editor contenteditable="true",
.editor textarea,
.editor input{
color:#000;
font-family: var(--serif-stack) !important;
}
https://gyazo.com/602c342332ed7ac92be9be7fbdac607fhttps://gyazo.com/d3db3b111dbb57afbcc6b220c4f6d4f5