図 X-Y タイトル
* を付けてあるので、それを中央寄せ・小フォント・薄色でキャプション風に整える * - 画像自体も中央寄せにして、本文と差別化する * ============================================================================== */ /* ------------------------------------------------------------------------------ * ブランドカラー (アプリ環境設定の「スカイ」と統一) * * mkdocs.reference.yml で primary: custom / accent: custom を指定して * Material プリセットを無効化したうえで、Tailwind sky-600 (#0284c7) を * 主色として CSS 変数に上書きする。 * ------------------------------------------------------------------------------ */ :root { /* 主色: アプリのスカイと同じ #0284c7 (sky-600) */ --md-primary-fg-color: #0284c7; --md-primary-fg-color--light: #0ea5e9; /* sky-500 (ホバー等の少し明るい派生) */ --md-primary-fg-color--dark: #0369a1; /* sky-700 (押下等の濃い派生) */ /* ヘッダ上のテキスト・アイコン色は白 */ --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); /* アクセント色: リンクのホバーや選択ハイライト。primary と同系で揃える */ --md-accent-fg-color: #0ea5e9; --md-accent-fg-color--transparent: rgba(14, 165, 233, 0.1); --md-accent-bg-color: #ffffff; --md-accent-bg-color--light: rgba(255, 255, 255, 0.7); } /* ダークモード時はアクセントだけ明るめに振る (背景が暗いので) */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #0284c7; --md-primary-fg-color--light: #38bdf8; /* sky-400 */ --md-primary-fg-color--dark: #0369a1; --md-accent-fg-color: #38bdf8; --md-accent-fg-color--transparent: rgba(56, 189, 248, 0.15); } /* ------------------------------------------------------------------------------ * 本文フォントサイズ * * Material for MkDocs のデフォルト .md-typeset は 0.8rem 基準。 * 0.75rem に下げて情報密度を少し上げる (デフォルト比約 94%)。 * ------------------------------------------------------------------------------ */ .md-typeset { font-size: 0.75rem; } /* ------------------------------------------------------------------------------ * 見出しのメリハリ * * - H1: 太め + ロゴ系の sky 色のアンダーバー。章タイトルが視線で止まる * - H2: 上にしっかり余白 + 薄いグレー罫線。章内のブロック境界を作る * - H3: 左に sky の縦線アクセント。小見出しが流れの中で目立つ * - 段落間の余白を少し広げて、密度を抑える * * Material のデフォルトを em ベースで上書きするので、本文フォントサイズを * 変えても見出しは比例して追従する。 * ------------------------------------------------------------------------------ */ .md-typeset h1 { font-weight: 700; padding-bottom: 0.3em; border-bottom: 2px solid var(--md-primary-fg-color); margin-bottom: 1.2em; } .md-typeset h2 { font-weight: 700; margin-top: 2.2em; padding-bottom: 0.25em; border-bottom: 1px solid var(--md-default-fg-color--lightest, #e0e0e0); } .md-typeset h3 { margin-top: 1.8em; padding-left: 0.6em; border-left: 4px solid var(--md-primary-fg-color); line-height: 1.3; } /* 段落間の余白を少し広げる。読みやすさと密度のバランス調整 */ .md-typeset p { margin-bottom: 0.9em; } /* ------------------------------------------------------------------------------ * コード表現の主張を少し強める * * - インラインコード (`code`): 薄い sky 背景で本文と差別化 * - コードブロック: 左に sky の縦線で「ここはコード」と一目で分かるように * ------------------------------------------------------------------------------ */ .md-typeset code { background-color: rgba(2, 132, 199, 0.08); /* sky-600 を 8% で透過 */ border-radius: 3px; padding: 0.1em 0.35em; } .md-typeset pre > code { /* コードブロック内の code 要素は背景を付けず、pre 側の背景に任せる */ background-color: transparent; padding: 0; } .md-typeset pre { border-left: 3px solid var(--md-primary-fg-color); } /* ダークモード時のインラインコード背景は明度を上げて読みやすく */ [data-md-color-scheme="slate"] .md-typeset code { background-color: rgba(56, 189, 248, 0.15); /* sky-400 を 15% で透過 */ } /* ------------------------------------------------------------------------------ * ヘッダのサイト名テキストを「リファレンスマニュアル」に差し替え * * theme.logo にテキスト込みロゴ (caDIY3D V4 + CAD×DIY×3D) を設定したので、 * "caDIY3D V4 リファレンスマニュアル" のうち caDIY3D V4 はロゴと重複。 * 「リファレンスマニュアル」だけ残してロゴと並べる。 * * site_name 自体は SEO / OGP / ブラウザタブで使われるので変更しない。 * 表示テキストだけ CSS で差し替える (元の span を非表示にして ::before で代用)。 * ------------------------------------------------------------------------------ */ .md-header__title .md-header__topic .md-ellipsis { /* 元の "caDIY3D V4 リファレンスマニュアル" を隠す */ font-size: 0; line-height: 0; } .md-header__title .md-header__topic .md-ellipsis::before { content: "リファレンスマニュアル"; font-size: 0.85rem; line-height: 1.2; font-weight: 700; } /* ヘッダのテキストをヘッダ高さの中で上下中央に配置。 構造: __title > __ellipsis > __topic > .md-ellipsis なので、 全階層 flex + 中央寄せにしないと縦位置がズレる。 */ .md-header__title, .md-header__title .md-header__ellipsis, .md-header__title .md-header__topic { display: flex; align-items: center; } .md-header__title .md-header__topic .md-ellipsis::before { /* ::before も親 flex の中で中央に並ぶよう、自身の line 配置を整える */ display: inline-flex; align-items: center; } /* ヘッダのロゴサイズ調整 (テキスト込みロゴは横長なので高さを抑える) */ .md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.8rem; width: auto; } /* ------------------------------------------------------------------------------ * サイドバー先頭のサイトタイトル表示 * * site_name は「caDIY3D V4 リファレンスマニュアル」だが、ヘッダロゴ横に既に * caDIY3D V4 タイトル が出ているため、サイドバー先頭ではシンプルに * 「リファレンスマニュアル」だけ見せる (太字くらいの主張に留める)。 * * site_name 自体は SEO / ブラウザタブ / OGP で使われるのでそのまま維持し、 * CSS で表示テキストを差し替える (元テキストを非表示にして ::before で代用)。 * ------------------------------------------------------------------------------ */ .md-nav--primary > .md-nav__title { /* 元の "caDIY3D V4 リファレンスマニュアル" は隠す */ font-size: 0; line-height: 0; } .md-nav--primary > .md-nav__title::before { content: "リファレンスマニュアル"; font-size: 0.85rem; line-height: 1.4; font-weight: 700; display: block; } /* 右サイド「目次」も同じトーンに揃える。 --secondary のタイトルは元の "目次" テキストをそのまま表示するため、 font-size を 0 にせずサイズ・太さだけ調整する。 */ .md-nav--secondary > .md-nav__title { font-size: 0.85rem; line-height: 1.4; font-weight: 700; } /* アイコン (≡ ボタンや戻るボタン) は隠さない。font-size: 0 の影響を受けないよう復帰 */ .md-nav--primary > .md-nav__title > .md-nav__button, .md-nav--primary > .md-nav__title > .md-logo { font-size: 1rem; line-height: 1; } /* ------------------------------------------------------------------------------ * サイドバー目次全体を少し字下げ * * 「リファレンスマニュアル」の左端より目次項目を少し右にずらして、 * 「ここから先が中身」と視覚的に伝える。 * * Material は項目位置を .md-nav__link の左 padding で決めているため、 * .md-nav__list に padding を足しても見た目に響きにくい。 * .md-nav--primary 配下の項目 (= リンク) 自体に左 padding を加算する。 * ------------------------------------------------------------------------------ */ .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { padding-left: 1.2em; } /* ------------------------------------------------------------------------------ * サイドバーのメリハリ (アコーディオン形式) * * navigation.sections を外したことで、グループ見出しはクリック可能な * アコーディオン (▶ アイコン付き) になっている。 * * - グループ見出し (子を持つ nav 項目) を太字で「親」と分かるように * - グループ配下の子ページを 1 文字 (1em) 字下げして階層を見せる * - 現在表示中のページは sky 色 + 太字で目立たせる (デフォルトは色のみで弱い) * ------------------------------------------------------------------------------ */ /* グループ見出し (子要素 nav を持つ項目) を太字に */ .md-nav__item--nested > .md-nav__link { font-weight: 700; } /* グループ配下の子ページを 1em 字下げ。 .md-nav__item--nested 配下の .md-nav の中の項目に対して padding を足す。 */ .md-nav__item--nested > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link { padding-left: 1em; } /* 現在表示中のページは sky 色 + 太字でメリハリを強める */ .md-nav__link--active { font-weight: 700; color: var(--md-primary-fg-color) !important; } /* 図キャプション (本文中の画像の真下に置かれる) */
.figure-caption {
text-align: center;
font-size: 0.9em;
color: #666;
margin-top: 0.3em;
margin-bottom: 1.5em;
}
/* キャプション直上の画像は中央寄せ */
.md-typeset p:has(+ p.figure-caption) {
text-align: center;
}
.md-typeset p:has(+ p.figure-caption) img {
max-width: 100%;
height: auto;
/* 本文中の画像 (figure-caption の直上にあるもの) に控えめなドロップシャドウ。
透過 PNG の形に沿って影が出るよう、box-shadow ではなく filter: drop-shadow を使う。 */
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
/* 表のセル内に置かれた画像にも同じドロップシャドウを適用 (部品名ラベルの並べ表示など) */
.md-typeset table img {
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
/* 4 状態を横並びで見せる比較表 (部品名ラベルの 表示しない / 部品名 / ID / 部品名+ID など)。
列を等幅に固定し、画像をセル幅いっぱいに揃えることで、説明文の長短に左右されず
すべての画像が同じ大きさ・等間隔で並ぶようにする。 */
.label-compare table {
table-layout: fixed; /* セル内容量ではなく列数で均等割り */
width: 100%;
}
.label-compare table th,
.label-compare table td {
width: 25%; /* 4 列を等幅に */
text-align: center;
vertical-align: top;
}
.label-compare table img {
width: 100%; /* 各画像を列幅いっぱいに揃える (元画像は同一比率) */
height: auto;
}
/* 角丸はデフォルト OFF。{ .rounded } を付与した画像だけに適用する。
ダイアログ系スクリーンショットは元から角丸付きで撮ることが多く、二重に丸めると
角の黒ずみが出るため、矩形 PNG (ツールバー単体など) のみ指定する想定。 */
.md-typeset img.rounded {
border-radius: 6px;
}
/* ダークモード時のキャプション色 */
[data-md-color-scheme="slate"] .figure-caption {
color: #aaa;
}
/* ------------------------------------------------------------------------------
* フッターの "Made with Material for MkDocs" クレジット表記を非表示
*
* Material for MkDocs はテーマ無償版だと "Made with Material for MkDocs" が
* フッターに必ず出る (Insiders 版なら extra.generator: false で消せる有償機能)。
* テーマ自体は MIT ライセンスのため、CSS で隠すこと自体は許容されている。
* 自社ブランドのマニュアルとしてはノイズなので非表示にする。
*
* DOM 構造:
* .md-copyright
* .md-copyright__highlight ← 著作権表記 (これは残したい)
* "Made with" ← テキストノード
* Material for MkDocs
*
* "Made with" がテキストノードで埋め込まれているので a だけ消すと文言が残る。
* .md-copyright 自体を一旦透明にして、中の __highlight だけ可視に戻すアプローチを取る。
* ------------------------------------------------------------------------------ */
.md-copyright {
font-size: 0; /* "Made with" テキストノードと を一括で潰す */
}
.md-copyright__highlight {
font-size: 0.64rem; /* Material のデフォルト .md-copyright と同じサイズに戻す */
}
/* ------------------------------------------------------------------------------
* フッタ (前のページ / 次のページ ナビ) を画面下に固定
*
* 目的: スクロール中も「前 / 次」リンクを常に押せるようにする。
*
* 仕組み:
* - .md-footer を position: fixed で画面下端に貼り付ける。
* - 本文の末尾がフッタに隠れないよう、.md-main に padding-bottom を確保する。
* - コピーライト行 (.md-footer-meta) は丸ごと非表示にする。
* Material は MIT ライセンス、無償版でも extra.generator は CSS で隠して良い。
* - 前/次リンク帯のパディングだけ詰めて細い帯にする (文字サイズはデフォルト維持)。
* ------------------------------------------------------------------------------ */
/* コピーライト行は丸ごと非表示 */
.md-footer-meta {
display: none;
}
/* フッタを画面下に固定 */
.md-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 3; /* 本文より前、ヘッダ (z-index: 4 相当) より後ろ */
/* 既定の黒 87% (--md-footer-bg-color) より透かして、下の本文が薄く透ける
すりガラス調にする。透けた文字で帯が読みづらくならないよう blur を併せる。 */
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* フッタが本文を覆わないよう、body の下部にフッタ高さ分の余白を確保。
方向ラベルを消し帯をヘッダー並みに詰めたので、余白も 2.5rem で足りる。 */
body {
padding-bottom: 2.5rem;
}
/* 前/次リンク帯をヘッダーと同じくらいの細さに詰める。
帯の高さは inner / link の padding とページ名 (.md-ellipsis) の行高で決まる。
文字サイズは本文と同じまま、上下の余白と行高だけを詰めて低くする。 */
.md-footer__inner {
padding: 0.1rem 0.2rem;
}
/* Material 既定の .md-footer__link は margin-top:1rem / margin-bottom:.4rem を持ち、
これが帯の高さの主因。padding ではなくこの margin を打ち消す。
既定の align-items:end (下寄せ) だと帯を詰めたときテキストが下にずれるので、
center にして帯の上下中央にそろえる。 */
.md-footer__link {
margin-top: 0.1rem;
margin-bottom: 0.1rem;
align-items: center;
}
/* ページ名 (.md-footer__title) も既定で margin-bottom:.7rem + nowrap を持つ。
余白を消して帯を低くし、nowrap を解除して横幅を使って表示する
(横に余裕があるのに「…」で省略されるのを防ぐ。本当に長いときだけ折り返す)。
文字サイズは既定 (.9rem) のまま維持。 */
.md-footer__title {
margin-top: 0;
margin-bottom: 0;
padding: 0 0.6rem;
line-height: 1.3;
white-space: normal;
}
/* 「前へ / 次へ」の方向ラベルは消し、ページ名と矢印だけのコンパクトな帯にする。
リンク (前後ページへの遷移) 自体は残す。 */
.md-footer__direction {
display: none;
}
/* ------------------------------------------------------------------------------
* 番号列 (丸数字 ① 等) を持つテーブルの 1 列目を狭く
*
* 「| | エリア | 内容 |」のように先頭ヘッダが空のテーブルは、本文中で
* 図中の丸数字と対応させるためだけに使っている番号列。デフォルトでは番号 1 文字でも
* 幅が広めに取られて間延びするので、内容に合わせて 2.5em に詰める。
*
* Why :has() を使う:
* 全テーブルに対して 1 列目を狭めると番号列でないテーブルにも影響するため、
* 「ヘッダの 1 列目が空」のテーブルだけに限定して適用する。`:has()` は
* Chrome 105+ / Safari 15.4+ / Firefox 121+ で対応 (本サイトの対象環境では問題なし)。
* ------------------------------------------------------------------------------ */
.md-typeset table:has(thead th:first-child:empty) th:first-child,
.md-typeset table:has(thead th:first-child:empty) td:first-child {
width: 3em !important; /* 3 文字分 (丸数字 + 左右の少し余白) で安定 */
min-width: 0 !important; /* Material のデフォルト min-width:110px を解除 */
white-space: nowrap;
text-align: center;
padding-left: 0.4em !important; /* Material のデフォルト padding を上書き */
padding-right: 0.4em !important;
}
/* ------------------------------------------------------------------------------
* 挿絵動画 ( でくるんだ