閲覧数 集計中...
ブログ開発ログ 01
Devlog Astro Tailwind
プロジェクト
個人ブログの制作・運営記録
- 期間: 2025.09 - 現在
- 役割: ブログ運営者
デプロイ先 / リポジトリ
ブログ運営者
- 主な業務: コンテンツ執筆、デザイン/レイアウト改善、パフォーマンス & アクセシビリティ改善、デプロイ自動化
- 使用技術: TypeScript, Astro, Tailwind CSS, MDX
ブログの構成 (プラットフォーム / ツール)
- フレームワーク: Astro v5.x (コンテンツ中心、Zero-JS志向、Islands Architecture)
- スタイル: Tailwind CSS + グローバル
global.cssトークン (カラー/フォント/間隔) - コンテンツ: Markdown/MDX + Astro Content Collections (型安全な Frontmatter 検証)
- 画像: Sharp ベースのビルド最適化 (WebP/AVIF) + 遅延読み込み
- SEO:
BaseHead.astroのメタタグ、sitemap.xml.ts、rss.xml.js
主要タスク
- Header 改善 (
src/components/Header.astro)
- フルブリード + 上部固定 (sticky)
- 左側タイトル、右側に Theme / GitHub / LinkedIn / Blog / RSS / Search / Menu アイコン
index.astroとblog/index.astroでは Header を.global-wrapperの外側に移し幅制限を解消
- Footer 調整 (
src/components/Footer.astro)
- 二重レンダリングを解消し、パディングを縮小 (
mt-20→mt-12,py-16→py-8) - 可読性向上 (テキストサイズやアイコンサイズを調整)
- ダークテーマ設計 (
src/styles/global.css)
- 背景:
rgb(40,40,40)/ 本文:rgb(248,249,250)でコントラストを確保 - リンク/フォーカスはオレンジ系に統一し、青系アクセントを排除
- 見出しに
scroll-margin-top: 5remを付与して sticky header との干渉を防止
- コンテンツ/レイアウトの一貫性
/,/blog,/aboutで統一感あるビジュアルを維持- BlogPost/TOC コンポーネントのダークパレットを整備し、不要な青いアクセントを除去
技術スタック
package.json: astro, @astrojs/tailwind, @astrojs/mdx, sharp, @fontsource* などtailwind.config.mjs:darkMode: 'class'、カラー/フォント拡張- フォント: Inter (英語), Noto Sans/Serif KR (韓国語), JetBrains Mono (コード)
- テーマ管理:
- サイト:
BaseHead.astroのインラインスクリプトで<html class="dark">をトグル (sessionStorage) - ビジュアル:
public/scripts/themeManager.jsが 3D ビジュアル用パレットを提供
- サイト:
パフォーマンス / アクセシビリティ
- Astro の Zero-JS デフォルトを維持し、必要箇所のみハイドレーション
- Sharp による画像最適化 + 遅延読み込み
- 本文の可読性 (フォント/行間/コントラスト) を改善し、キーボードフォーカススタイルも整理予定
今後の計画
- カラーパレットの仕上げと
/aboutなどの最終チェック - テーマロジック統合 (BaseHead のインライン vs ThemeManager の一元化)
- ビルド/プレビューの簡易スモークテスト自動化
- 簡易 CMS 導入検討 (Netlify/Decap, Supabase, もしくは Headless CMS)
- 検索/フィルター機能、画像アップロード効率化
- 追加の SEO 施策
作業タイムライン (概要)
- 2025-06-24 ~ 2025-10-14: ブログ開設を開始し、Three.js ベースからテキスト主体のレイアウトへ移行
- 2025-10-27: ダークテーマの色トークン確立、Header/Footer レイアウト改善、TOC/BlogPost のダークスタイル整備、開発ログ執筆
作成日: 2025-10-27
댓글