編集マニュアル

ファイル: 編集マニュアル.md / 更新日: 2026/6/8

このファイルは、PersonalHomepage の文言、リンク、メニュー、記事を手動で修正するためのメモです。

基本の流れ

1. ローカルファイルを編集する。

2. 必要に応じて npm run build で確認する。

3. GitHub Desktop の Changes で差分を見る。

4. 問題なければ Commit to main を押す。

5. Push origin を押す。

6. Cloudflare Pages の自動デプロイ後、公開 URL を確認する。

公開 URL:

https://personalhomepage-1w7.pages.dev

ローカルで見た目を確認する

commit や push をしなくても、ローカルで見た目を確認できます。

cd C:\Users\harub\Desktop\PersonalHomepage
npm run dev

起動後、ブラウザで次を開きます。

http://127.0.0.1:4321/

確認が終わったら、npm run dev を実行している PowerShell で Ctrl + C を押して停止します。

ページ遷移図

現在の主なページ遷移は次の通りです。

/
├─ /special-programs/
│  └─ 特番情報
├─ /listed-companies/
│  └─ 上場企業情報
├─ /restaurants/
│  └─ 注目の飲食店
└─ /learning/
   ├─ 学習記録の入口
   ├─ /learning/current-plan/
   ├─ /notes/
   ├─ /tech/
   └─ /projects/

画面とファイルの対応表

変更したい場所	編集するファイル	主に触る場所
全ページ共通のヘッダー	`src/layouts/BaseLayout.astro`	`brand`、`brand-mark`、`navItems`
左上の `PH` 表示	`src/layouts/BaseLayout.astro`	`<span class="brand-mark">PH</span>`
左上の `Personal Homepage` 表示	`src/layouts/BaseLayout.astro`	`<span>Personal Homepage</span>`
ヘッダーのメニュー項目	`src/layouts/BaseLayout.astro`	`navItems`
ヘッダーの見た目	`src/styles/global.css`	`.site-header`、`.brand`、`.brand-mark`、`.nav`、`.nav a.is-active`
メニューごとの背景色	`src/styles/global.css`	`body.theme-restaurants`、`body.theme-special`、`body.theme-listed`、`body.theme-learning`
トップページだけの背景	`src/styles/global.css`	`body.home-page`
トップページの大きな見出し	`src/pages/index.astro`	`.home-hero` 内の `<h1>`
トップページの説明文	`src/pages/index.astro`	`.home-hero` 内の `<p>`
トップページのボタン	`src/pages/index.astro`	`.hero-actions`
トップページのカードメニュー	`src/pages/index.astro`	`menuItems`
トップページ右側の丸いビジュアル	`src/pages/index.astro`	`.home-orbit` 内の `TV`、`IPO`、`Food`、`Log`
トップページ全体の見た目	`src/styles/global.css`	`.home-hero`、`.home-orbit`、`.menu-grid`、`.menu-card`
特番情報ページ	`src/pages/special-programs/index.astro`	見出し、説明文、`status-panel`
上場企業情報ページ	`src/pages/listed-companies/index.astro`	見出し、説明文、`status-panel`
注目の飲食店ページ	`src/pages/restaurants/index.astro`	見出し、説明文、`status-panel`
注目の飲食店リスト	`src/pages/restaurants/index.astro`	`restaurants` 配列
飲食店のお気に入り機能	`src/pages/restaurants/index.astro`	ページ下部の `<script>`
各ページのジャンル絞り込み	各メニューページの `.astro`	`genres` 配列、`data-filter-button`、`data-filter-card`
学習記録ページ	`src/pages/learning/index.astro`	ヒーロー、カードリンク
学習記録内の情報ファイル一覧	`src/pages/learning/[...slug].astro`	`/learning/current-plan/` の `docs` 一覧表示
情報ファイルの詳細表示	`src/pages/learning/docs/[slug].astro`	Markdown 表示ページ
情報ファイル読み込み処理	`src/lib/projectDocs.ts`	`getProjectDocs`、`renderMarkdown`
学習記録の記事本文	`src/content/learning/current-plan.md`	Markdown 本文
サイト全体の背景色や基本色	`src/styles/global.css`	`:root`、`body`
フッター	`src/layouts/BaseLayout.astro`	`.site-footer` 内の `<span>`

よくある修正例

左上のサイト名を変えたい

編集ファイル:

src/layouts/BaseLayout.astro

変更箇所:

<span class="brand-mark" aria-hidden="true">PH</span>
<span>Personal Homepage</span>

ヘッダーにメニューを追加したい

編集ファイル:

src/layouts/BaseLayout.astro

ヘッダーは position: sticky で上部固定にしています。

固定表示の見た目を変えたい場合は src/styles/global.css の .site-header を編集します。

変更箇所:

const navItems = [
  { href: "/special-programs/", label: "特番情報" },
  { href: "/listed-companies/", label: "上場企業情報" },
  { href: "/restaurants/", label: "注目の飲食店" },
  { href: "/learning/", label: "学習記録" },
];

トップページのカードを追加したい

編集ファイル:

src/pages/index.astro

変更箇所:

const menuItems = [
  {
    href: "/special-programs/",
    label: "特番情報",
    kicker: "19:00 - 24:00",
    description: "今夜の特別番組を確認する入口です。",
    accent: "coral",
  },
];

トップページの色やカードの見た目を変えたい

編集ファイル:

src/styles/global.css

変更箇所:

.home-hero
.home-orbit
.menu-card
.menu-card.coral::before
.menu-card.sky::before
.menu-card.lime::before
.menu-card.violet::before

トップページ背景の手書き風ブタ柄は、src/styles/global.css の body.home-page にあります。

SVGをCSS内に埋め込んだ自作背景なので、外部画像ファイルは使っていません。

注目の飲食店のサンプルを変えたい

編集ファイル:

src/pages/restaurants/index.astro

変更箇所:

const restaurants = [
  {
    id: "kokura-grill-terrace",
    title: "小倉グリルテラスが魚町にリニューアル",
    area: "魚町",
    category: "洋食",
    summary: "記事の概要です。",
    source: "サンプル情報",
    date: "今日",
    imageTone: "tomato",
  },
];

id はお気に入り保存の識別に使うため、同じページ内で重複しない名前にします。

imageTone は現在 tomato、cream、blue、green を使っています。

特番情報や上場企業情報のサンプルを変えたい

編集ファイル:

src/pages/special-programs/index.astro
src/pages/listed-companies/index.astro

特番情報は programs 配列、上場企業情報は companies 配列を編集します。

どちらも「画像風サムネイル、タイトル、メタ情報、概要」のリスト表示です。

ジャンルボタンを増減したい場合は、それぞれの genres 配列を編集します。

const genres = ["ニュース", "バラエティ", "アニメ"];

表示対象との対応は、各リスト項目の category と genres の文字を一致させます。

トップページを編集する

トップページの本文やカードメニューは、次のファイルを編集します。

src/pages/index.astro

主に触る場所:

menuItems

- トップページのメニューカードを管理する配列。

- メニューを増やす場合は、この配列に項目を追加する。

href

- クリックしたときの遷移先。

label

- カードの見出し。

kicker

- カード上部の短い補足。

description

- カード本文。

accent

- カードの色。現在は coral、sky、lime、violet を使用。

例:

{
  href: "/learning/",
  label: "学習記録",
  kicker: "Build Notes",
  description: "このサイトをどう作ったかを見返します。",
  accent: "violet",
}

ヘッダーのメニューを編集する

全ページ上部に出るヘッダーのメニューは、次のファイルを編集します。

src/layouts/BaseLayout.astro

主に触る場所:

const navItems = [
  { href: "/special-programs/", label: "特番情報" },
  { href: "/listed-companies/", label: "上場企業情報" },
  { href: "/restaurants/", label: "注目の飲食店" },
  { href: "/learning/", label: "学習記録" },
];

メニューを増やす場合は、同じ形式で1行追加します。

デザインを編集する

サイト全体の色、余白、カード、トップページの見た目は、次のファイルを編集します。

src/styles/global.css

主に触る場所:

:root

- サイト全体の基本色。

.home-hero

- トップページ上部のレイアウト。

.home-orbit

- トップページ右側の丸いビジュアル。

.menu-grid

- トップページのメニューカード一覧。

.menu-card

- メニューカードの見た目。

.nav

- ヘッダーメニューの見た目。

各メニューページを編集する

現在の主要メニューページは次のファイルです。

src/pages/special-programs/index.astro
src/pages/listed-companies/index.astro
src/pages/restaurants/index.astro
src/pages/learning/index.astro

それぞれの役割:

special-programs

- 特番情報。

listed-companies

- 上場企業情報。

restaurants

- 注目の飲食店。

learning

- 学習記録。

学習記録の記事を編集する

学習記録の記事本文は、次のフォルダに Markdown で置きます。

src/content/learning/

既存記事:

src/content/learning/current-plan.md

記事を増やす場合は、このフォルダに .md ファイルを追加します。

情報系ファイルを学習記録に表示する

プロジェクトの説明書や作業履歴など、docs フォルダ直下にある Markdown ファイルは、

学習記録ページの「サイト制作メモ」に自動で一覧表示されます。

対象フォルダ:

docs/

対象ファイル:

*.md

表示ページ:

src/pages/learning/[...slug].astro
src/pages/learning/docs/[slug].astro

現在は、学習記録ページの「公開する内容」にある「学習記録」カードから

/learning/current-plan/ を開いたときに一覧表示します。

読み込み処理:

src/lib/projectDocs.ts

PowerPoint ファイルなどの .md 以外のファイルは、本文表示の対象外です。

自動更新を入れる前に決めること

特番情報、上場企業情報、注目の飲食店は、将来的に Codex のスケジュール機能で更新できます。

ただし、先に次を決める必要があります。

情報取得元
更新する時間
掲載する項目
古い情報を残すか消すか
自動 commit / push まで行うか、GitHub Desktop で手動 push するか

特に外部サイトから情報を取得する場合は、利用規約や取得頻度に注意します。