技術ブログ・アーキテクチャガイドラインと CSS を揃える #158

体系もサイトの作りも違うので全部は揃えられませんが、CSS レベルで統制が取れるところは取ってよいと @shibukawa さんに承認をいただきました。この issue を台帳にして、上から1項目ずつ潰していきます。

• 値の根拠は技術ブログ側（future-architect.github.io の CLAUDE.md と スタイルガイド）が持ちます。こちらは引き写すだけで、別の決まりを作りません
• 上書きは 上書き用の _static/custom.css を置く #157 で置いた _static/custom.css の、役ごとの節に足します

本文の中

• インラインコード（本文に 1,632 箇所。ここがいちばん影響が大きい）インラインコードを技術ブログの札にそろえる #159
  いま: 白地 + 枠 #e1e4e5 + 赤い文字 #e74c3c + font-size: 75% + white-space: nowrap
  寄せ先: 地 surface-mute #eee・文字 ink-strong #424242・枠なし・.875em
• コードブロック（393 箇所）→ コードブロックを技術ブログのライト配色にそろえる #160。Pygments のスタイルで役ごとの8色を持ち、地は #f5f5f5。枠は残して色を #ddd にした
• コードブロックの角丸 → コードブロックの角を丸める #164。card-radius（8px）。外側の枠と内側の地が同じ半径で丸まる
• 本文の組 → 本文の行間をブログの読み下す文章の段にする #166。読み下す文章の行間を 1.75 へ。サイズは 16px のまま（ブログとの差 0.4px は見分けが付かない）
• リンク（108 箇所）→ 地の文のリンクをブログにそろえる #167。#0072E5・訪問済み #590fc7・常時下線。章立ての一覧と脚注は下線なし
• note・warning（37 個）→ note をブログの note にそろえる #161。4色に分け、自動で付くタイトルは出さず絵柄だけを置く。中の文字・コード・リンクもその種別の色へ
• 表（18 個）→ 表の縞を落とし、ブログの表にそろえる #163。奇数行の縞を落とし、罫線 #ccc・見出しの行の地 #f5f5f5・セル 13px へ
• 見出し → 見出しの階層を空きと罫線で作る #168。直前の空き（h2 56 / h3 32 / h4以下 24）・行間 1.3・h2 に罫線。サイズは据え置き

ページ全体

• フォーカスの輪郭とスキップリンク → フォーカスの輪郭を1つにそろえ、スキップリンクを置く #170。2px のネイビー（暗い地は白）にそろえ、_templates/layout.html でスキップリンクと着地点を足した
• フッターの copyright → フッターの copyright をブログにそろえる #165。© 2019 - <ビルドの年> Future Corporation・12px・#616161（既定の #808080 は白地で 3.10 と AA 割れ）
• 末尾の Previous / Next → 末尾の Previous / Next をブログの前後ナビにそろえる #162。枠を2つに割り、‹ 前のページ / 次のページ › の下に行き先の名前を出す

寄せないもの

• ダークモード — RTD テーマが持たない。ブログは :root のトークン差し替えで作っているので、土台ごと要る
• 左の固定サイドバー・検索・パンくず — RTD の体系そのもので、ブログ側に対応する相手がいない（末尾の Previous / Next は上へ移した。あれはブログの前後ナビと役が同じ）
• 本文の幅（.wy-nav-content の max-width: 800px）— ブログでは本文だけを狭める案を却下している（列の作りが違う）
• 選択の帯（::selection） — ブラウザ既定のままにする（2026-09-17 の判断。選択の帯をブランドのネイビーにする #169 は閉じた）。技術ブログとアーキテクチャガイドラインの側も、逆にネイビーの選択色をやめる
• 引用 — 寄せ先が無い。blockquote は 10 件あるが、本物の引用は0件（表を包むもの2・コードを包むもの1・原稿の字下げが1段深いための箱7）。RST は字下げただけの塊も blockquote にするので、左に罫線を引くと引用でないものを引用に見せることになる
• Web フォント（Lato / Roboto Slab） — 外すと見た目の印象が変わるので、そのままにする（2026-09-17 の判断）。1ページあたり 630KB を読んでいて、効いているのは欧文の字面だけだが、見出しのスラブセリフを含めていまの顔になっている
• 原稿側の決まり（日本語だけをインラインコードで囲まない、など）— CSS では寄せられない

🤖 Generated with Claude Code