モバイルでソースコードの行数部分の横幅を最適化

[Copilot]

モバイルデバイスでコードブロックの行数表示部分が横幅を取りすぎて、実際のコード内容の表示領域が狭くなっていた問題を修正しました。

変更内容

• デスクトップ: padding: 0rem .5rem .5rem .5rem (左右0.5rem)
• モバイル (≤768px): padding: 0rem .25rem .5rem .25rem (左右0.25rem)

行の高さ (line-height: 1.5) は要求通り変更せず、横幅のみ最適化しています。

修正ファイル

1. assets/template.html - 各記事HTMLファイルに埋め込まれるインラインCSSにモバイル向けメディアクエリを追加
2. assets/modern-light.css - メインCSSファイルにも一貫性のためのモバイル最適化を追加

テスト結果

デスクトップとモバイルの両方で正常に動作することを確認済み：

デスクトップ vs モバイル比較

モバイルビュー (375px幅)

実際の記事でのモバイル表示

モバイルデバイスでのコード可読性が大幅に向上し、行数表示は適度にコンパクトになりながらも十分に視認可能です。

Fixes #[issue_number]

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• dog.ceo
  • Triggering command: python3 blog_builder/generate.py --help (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>モバイルでソースコードの行数部分について横幅をあまり取らないようにする</issue_title>
<issue_description>ブログのスタイル: modern-light.css を更新してほしい

• 複数行ソースコードの左側に表示される行数について、横幅をもう少し狭くすることでモバイルでも見やすくする

縦幅は変更してはいけないことに注意</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #24

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
my-site	Ready	Preview	Comment	Sep 29, 2025 6:22pm