Site Template

01 / 余白 · YOHAKU

生成りと深緑、明朝体と細い罫線。静かな動きまで整えた、事業サイトのAstroテンプレート。

このテンプレートでリポジトリを作る(GitHub・新しいタブ) GitHubでソースを見る(新しいタブ)

「リポジトリを作る」はGitHubのテンプレート機能で、あなたのアカウントに新しいリポジトリを作成します。作成したリポジトリは独立したコピーとなり、このテンプレートの今後の更新は自動では反映されません。

公開デモのURLは確認中のため、まだ掲載していません。

特徴

  • ルーバーのローディング
  • スクロールで現れる見出し
  • 写真カルーセル
  • SEO・構造化データ
  • スマホ対応

導入と調整

余白の使い方

GitHubの「Use this template」から自分のリポジトリを作成できます。新しいリポジトリが元の更新を自動的に取り込むわけではありません。

Node.jsとpnpmを用意し、リポジトリ内で pnpm install、pnpm dev を実行します。必要なバージョンは取得した版のpackage.jsonを確認してください。

このカタログのソースは 8e6f8a39b15a95825c70e23abe2ca4a96ef5eb5f に固定しています。同じ状態を確認する場合はリポジトリをcloneして、そのcommitをcheckoutしてください。

サイト名・URL・案内文は src/content/site.ts、配色と書体は src/styles/global.css にまとめられています。公開前にテンプレートの初期文言を置き換えてください。

ここでは主要な構成ファイル14件を参照できます。全体の導入にはGitHubリポジトリ一式を使用してください。画像・フォント・そのほかの依存ファイルはコード本文の取得には含まれません。

フォントはZen Old MinchoとNoto Sans JP(Fontsource / SIL OFL)。サンプル画像も取得元リポジトリ内で確認し、案件用の画像へ置き換えてください。

ソースコードはMIT License。取得したリポジトリのLICENSE表記を保持してください。

外部の公開デモURLはまだ登録していません。掲載画像・動画は、この固定コミットをローカルで起動して撮影したものです。