💻 astro-notion-blogを自分好みにカスタマイズした内容まとめ

このブログは、otoyo様が公開している「astro-notion-blog」をGitHubで複製させてもらい、そこから自分好みにカスタマイズして作っています。

この記事では、どんなカスタマイズをしたのかをまとめます。WordPressから移行した理由は、こちらの記事に書いています。

WordPressをやめてAstro Notion Blogに移行してみた - まなてぃのぽよーんろぐ

WordPressのセキュリティ通知や更新作業、ブロックエディターの書きにくさに疲れて、いつも使っているNotionで書ける「AstroNotionBlog」に移行しました。移行した理由と、やってみてわかったメリット・デメリットをまとめます。

https://manateedon-blog.com

テンプレートのトップページは記事がリスト形式で並ぶシンプルなデザインでした。WordPress時代の雰囲気に近づけるために、こんなふうに変えました。

• 記事をアイキャッチ画像つきのカードで並べる
• カードにマウスを乗せると、ふわっと浮き上がる
• 右側にサイドバーを置いて、プロフィールとカテゴリーを表示
• トップページ（2ページ目以降も）は3列、カテゴリーページは2列のカード表示（スマホでは1列）
• 1ページに12記事を表示

デモサイト

本ブログのトップページ

• 見出しと引用に、ブログのメインカラーで装飾をつけた
  • デザインの参考としてはサルワカ様のデザインをお借りした
  • CSS等の反映はClaude Codeにやってもらった
• 行間や余白を調整して、スマホでも読みやすくした
• タイトルの下にカテゴリー、公開日、更新日、アイキャッチ画像等を表示
• サイドバーに目次を表示
  • スマートフォンだと最下部に出てしまうため、あまり意味ないかも笑

デモサイト

本ブログの記事ページ

• サイトタイトルのヘッダーを画面の横幅いっぱいに
• ヘッダーの中央にメニュー（ホーム・カテゴリー・プロフィール）を表示
• フッターのコピーライト表記を変更

ここはこだわったところです。Notionで書いたものが、そのままきれいにブログに表示されるようにしました。

Notionの画像のキャプションの先頭に「小」や「中」と書くと、ブログ上で画像が小さく表示されるようにしました。説明文も入れたいときは「小 猫の写真」のように、後ろにスペースをあけて続けます。

スクリーンショットが大きすぎるときに便利です。

Notionでは上記のようにキャプションを入れている

以下の記事で、設定が反映されていることを確認できます。

Notionで「目次」ブロックを入れると、ブログでも目次として表示されます（テンプレートでも対応済み）。見やすいようにデザインを整えました。

Notionのコールアウト（アイコンつきの囲みブロック）で、カスタム絵文字をアイコンにしても表示されるようにしました。

吹き出し風に使っています

GoogleフォームなどをHTMLで埋め込んだときに、スマホで横にはみ出さず、画面幅に合わせて表示されるようにしました。

本ブログに公開するためのデータベースとは別に、「広告管理用データベース」を作成し、同期ブロックを使って広告タグを作成しています。

同期ブロックを各ブログ記事に埋め込むことで、もし広告の内容が変わっても同期ブロックの内容を編集すればいいようにしています。

Notionの「広告管理用データベース」のイメージ

細かいところでは、ほかにもこんなカスタマイズをしています。

• 記事ページのサイドバーに、目次だけでなくプロフィールとカテゴリーも表示
• 記事の最後に、WordPressのような「前の記事・次の記事」のリンクを表示
• フッターにプロフィール、お問い合わせ、プライバシーポリシーのリンクを表示
• 「固定ページ」タグをつけたページ（プロフィールなど）は、記事一覧・カテゴリー・RSSに出ないようにした
• 存在しないページにアクセスされたときの「404ページ」を作った
• 記事の横幅に上限をつけて、1行が長くなりすぎないようにした
• 区切り線・箇条書き・段落の余白を調整
• 検索ボタンのデザインを変更
• アイキャッチ画像がない記事には「No Image」の画像を表示
• 記事の画像を自動でWebP形式に変換して、ページを軽くした
• ファイル名が日本語の画像が表示されない不具合を直した
• Notionのコードブロックのキャプションに目印を書くと、中身のHTMLをそのまま表示できるようにした（広告タグやGoogleフォームの埋め込みに使っています）
• 「javascript:」などで始まる危険なリンクを無効にするセキュリティ対策

WordPressにあった53記事は、1つずつコピーするのではなく、WordPressのREST APIという仕組みを使って、まとめてNotionに移しました。

Claude Codeに頼んだらブワーーーっとやってくれた感じです

移行したあとで、見出しのレベルがブログのデザインと合っていなかったので、全記事の見出しを1段階ずつ調整しています。

WordPressの「見出し2（H2）」は、Notionに移すと「見出し2」になりました。でもこのブログでは、Notionの「見出し1」がH2として表示される仕組みなので、Claude Codeに頼んで全記事の見出しを1段階ずつ上げてもらいました。

画像の多くはCloudinary（一部はGyazo）という画像サービスに置いていたので、そのまま使えました。WordPressのサーバーに残っていた画像82枚は、Notionに移しました。

いちばん気をつけたのがここです。URLが変わると、検索結果やほかのサイトからのリンクが切れてしまいます。

SEOの成果を引き継ぐために、記事のURLは変わらないようにClaude Codeに相談しました。

• 記事のURLは、WordPress時代と同じ「ドメイン/スラッグ(%postname%)」の形にした
  • Astro-Notion-Blog のデフォルトの設定では
    https://sample-domain/posts/%postname%
    になる
  • WordPressの設定は
    https://sample-domain/%postname%
    だった
• 古いカテゴリーページのURLは、新しいカテゴリーページに転送する
  • Astro-Notion-Blog では「カテゴリー」という概念がなく、Tagで管理されている
• WordPressの管理画面などのURLにアクセスされたら、トップページに転送する

WordPressのテーマ（SWELL）で作っていた、比較表などは、テキスト化されてしまって崩れてしまいました。ここもClaude Codeに頼んで、テキストや元の表の画像を参考に直してもらいました。

またNotionではWordPressよりもシンプルな表になりました。内容は残っていますが、見た目は少し変わっています。

GitHubと連携しておくと、デザインなどのコードを変更したときに自動でサイトを作り直してくれます。Notionの記事を更新したときは、前の記事で紹介したデプロイフックで再ビルドしています。

• ドメインのネームサーバーをCloudflareに移した（ドメインの契約自体は以前のまま：スタードメインを継続）
• 「www」ありのURLは、wwwなしのURLに転送
• Cloudflareが最初に用意してくれるURL（pages.dev）にアクセスされたら、本番のドメインに転送

作っている途中のサイトが検索結果に出ないように、試験公開の間は「検索エンジンに載せない」設定にしていました。本番公開のタイミングで解除しています。

テンプレートやClaude Codeのおかげで、ゼロから作るよりずっと早く、自分好みのブログを作ることができました。

astro-notion-blog（GitHub）：https://github.com/otoyo/astro-notion-blog