この記事はAIと一緒に書いています。
概要
ブログの読みやすさ・共有しやすさを向上させるアップデートを行いました。 目次サイドバー、SNS共有ボタン、外部公開リンクの表示など、Qiitaのような読みやすいブログ体験を目指しています。
変更内容
目次サイドバー
- 記事内の見出し（h2・h3）を自動抽出し、右サイドバーに目次として表示
- 現在読んでいるセクションがハイライトされるスクロール連動表示
- 目次のリンクをクリックすると該当セクションにスムーズスクロール
- モバイルでは非表示にし、コンテンツ領域を最大化
SNS共有・URL コピーボタン
- デスクトップでは記事の左側にフローティング表示（Qiitaライクな配置）
- URL コピー、X（Twitter）共有、Facebook共有の3ボタンを配置
- モバイルでは画面下部に固定ツールバーとして表示
- URL コピー後は「Copied!」フィードバックを2秒間表示
外部公開リンク
- Qiitaなど外部プラットフォームでも公開している記事に、リンクバナーを表示
- 記事のfrontmatterに
externalUrlを追加するだけで自動表示
記事タイプ・タグの表示改善
- 記事タイプ（更新履歴・技術記事）にタイプごとの色を設定（更新履歴は青、技術記事は緑）
- タグ（ポートフォリオ、Claude Codeなど）を
#ハッシュタグスタイルに変更し、タイプとタグの役割を視覚的に区別
モバイル表示の最適化
- 記事ページのパディング・フォントサイズを調整し、小さい画面でも読みやすく
- 記事一覧ページのカードをコンパクト化し、タグを非表示に
- 「記事一覧に戻る」リンクをモバイルでは非表示に（ブラウザの戻るボタンで代替）
- 記事コンテンツエリアにカード風の背景を追加し、視認性を向上
技術的な話
- 目次の現在位置ハイライトは
IntersectionObserverを使用。スクロールイベントのリスナーと比べてパフォーマンスに優れ、ブラウザが最適なタイミングでコールバックを実行する - 目次（TableOfContents）はClient Componentとして実装し、見出しデータはServer Componentでビルド時に抽出。SSGとクライアント側のインタラクションを適切に分離している
- 共有ボタンのデスクトップ配置は
left: max(1rem, calc((100vw - 1100px) / 2 - 80px))で、コンテンツ幅に対して相対的に位置を計算。画面幅が狭い場合も左端に収まる - モバイルの固定ツールバーは
env(safe-area-inset-bottom)でiPhoneのホームインジケーター領域を考慮 - 記事タイプの色分けは
data-type属性とCSS属性セレクタで実装。新しいタイプの追加はCSSにセレクタを1つ追加するだけで対応可能