記事一覧

EmDash のブログテンプレートを日本語サイトにするときに直した所

EmDash 1.3.1 の blog テンプレートは、サイト側の文言が英語です。このサイトを作るときに、日本語のサイトとして使うために直した所を、ファイル名つきでまとめました。

EmDash の管理画面はほぼ日本語で表示されますが、blog テンプレートの「サイト側」(訪問者が見るページ)の文言は英語です。「Latest posts」「Read article」「min read」などが英語のまま表示されます。

このサイトを blog テンプレート(EmDash 1.3.1、Cloudflare 用)で作るときに、日本語のサイトとして使うために直した所をまとめます。

1. 日付と言語の設定

日付の表示とページの言語(html の lang)は、src/utils/locale.ts で決まっています。EmDash の多言語機能(i18n)を設定していないと、英語(en-US)の書式になります。

このサイトは日本語だけなので、多言語機能は使わず、言語が決まっていないときは「ja」を使うように1行だけ変えました。

const locale = getI18nConfig()?.defaultLocale ?? "ja";

これで、日付が「2026年10月21日」の形になり、ページの言語も ja になります。

2. 画面の文言

英語の文言は、主に次のファイルにありました。

  • src/layouts/Base.astro:ヘッダー、検索欄、フッター、カラーテーマの切り替え
  • src/pages/index.astro:トップの「Latest posts」「View all」など
  • src/pages/posts/[slug].astro:記事ページの「On this page」(目次)、「Published」、「Continue reading」など
  • src/pages/search.astro:検索ページと検索結果の件数
  • src/pages/category/[slug].astro と tag/[slug].astro:カテゴリー・タグの一覧
  • src/pages/404.astro:ページが見つからないときの表示
  • src/components/:記事カード、ページ送り、執筆者の表示

文言は、画面に表示される文字のほか、読み上げ用の aria-label や、変数を組み合わせた文(「12 results」など)にも入っています。見た目だけ確認すると、読み上げ用の英語が残りやすいので注意が必要です。

3. 読了時間は日本語に対応済み

記事の「何分で読めるか」の計算(src/utils/reading-time.ts)は、最初から日本語に対応していました。漢字・ひらがな・カタカナは1分あたり500文字、英語は1分あたり200語として計算します。直したのは「min read」という表示だけです。

4. フォントと文字の間隔

blog テンプレートの本文フォントは Inter(英語のフォント)で、日本語の文字はパソコンやスマホに入っているフォントで表示されます。このサイトでは、日本語用のフォントを読み込むと表示が重くなるため、読み込まずに、使うフォントの順番だけを astro.config.mjs で指定しました(ヒラギノ角ゴ、Noto Sans JP、游ゴシック、メイリオの順)。

また、見出しの文字の間隔が英語向けに詰めてあり、日本語では窮屈に見えたため、src/styles/tokens.css の見出し用の値をゆるめました。

5. サンプルの内容の差し替え

blog テンプレートには、英語のサンプル記事・メニュー・フッターの説明文などが「シード」(初期データ)として入っています。シードは seed/seed.json にあり、初期設定のときに読み込まれます。このサイトでは、シードを日本語の内容に作り直してから公開しました。

まとめ

日本語のサイトにするための手直しは、言語の設定1行、画面の文言、フォントの指定、シードの差し替えの4つでした。テンプレートの作りはシンプルで、Astro を触ったことがあれば迷わず直せる量です。