Skip to content

Noto フォント導入と GitHub 風スタイルへの調整#31

Merged
daruyanagi merged 3 commits into
mainfrom
feature/github-style
Jun 11, 2026
Merged

Noto フォント導入と GitHub 風スタイルへの調整#31
daruyanagi merged 3 commits into
mainfrom
feature/github-style

Conversation

@daruyanagi

Copy link
Copy Markdown
Owner

変更内容

フォント(layouts/partials/head/extensions.html)

  • Google Fonts から Noto Sans JP(本文・見出し)、Noto Sans Mono(コード)、Noto Color Emoji を読み込み
  • フォントスタックに Noto Color Emoji を組み込み、OS を問わず絵文字をカラー表示

GitHub 風スタイル(assets/css/custom.css)※ページ背景色はテーマのまま

  • : 1px の細ボーダー(外周あり)、偶数行ストライプ、長い表は横スクロール
  • 見出し: h1/h2 に GitHub 風の下線
  • インラインコード: 角丸+半透明グレー背景
  • 引用: 斜体をやめてグレー文字+太めの左ボーダー
  • ライト・ダーク両モード対応(GitHub の配色 #d0d7de / #444c56

バグ修正

  • callout スタイルが本番で未適用だった問題: スタイルが static/css/custom.css にあったが、テーマの customCSSassets/ 側しか読まないため本番 CSS に含まれていなかった。assets/css/custom.css に統合して解消(feat: GitHub スタイルの Markdown アラート(callout)を実装 #30 のフォローアップ)
  • callout のボーダー色がダークモードでテーマに負ける問題: テーマの body.colorscheme-dark blockquote (0,1,2) に specificity で負けていたため、セレクタを調整
  • callout の上下余白の偏り: 先頭要素にテーマの p 上マージンが残り上 28px・下 8px だったのを、先頭マージンを打ち消してパディング 1.8rem で上下対称に

レビューポイント

  • テーマ(hugo-coder、submodule)は body.colorscheme-* 配下で table / code / blockquote を再定義しているため、競合する宣言は body:is(.colorscheme-light, .colorscheme-dark, .colorscheme-auto) で specificity を揃えて上書きしています
  • ライト・ダーク両モードでの表・callout・コード表示、および本番ビルド(minify 後の CSS に全スタイルが含まれること)は確認済み

🤖 Generated with Claude Code

daruyanagi and others added 3 commits June 11, 2026 21:46
- Google Fonts から Noto Sans JP / Noto Sans Mono / Noto Color Emoji を読み込み、
  本文・見出し・コードに適用。絵文字はどの環境でもカラー表示に
- 表を GitHub 風に(1px ボーダー+外周復元、偶数行ストライプ、横スクロール対応)
- h1/h2 の下線、インラインコードの角丸背景、引用のグレー文字化など GitHub 寄せ
  (ページ背景色はテーマのまま)
- static/css/custom.css を assets/css/custom.css に統合。テーマの customCSS は
  assets 側しか読み込まないため、callout スタイルが本番で適用されていなかった
  問題の修正を兼ねる
- ダークモード対応: テーマが body.colorscheme-* 配下で table/code/blockquote を
  再定義しているため、specificity を揃えて上書き。callout のボーダー色が
  ダークモードでテーマに負ける問題も修正

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
テーマの p { margin: 2rem 0 } が callout 先頭のタイトルに残り、
上 28px・下 8px と偏っていた。GitHub と同様に先頭要素の上マージンを
打ち消し、パディング(0.8rem)で上下対称にした。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@daruyanagi daruyanagi merged commit eb4a1b3 into main Jun 11, 2026
1 check passed
@daruyanagi daruyanagi deleted the feature/github-style branch June 11, 2026 12:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant