このページの翻訳は LLM によって生成されています。誤りに気づいた場合は GitHub で issue を開いてお知らせください。

カスタマイズ

varshaはブランドに合わせて高度にカスタマイズ可能です。このガイドでは、サイト設定、カラー、タイポグラフィ、メタデータの変更方法を説明します。

重要：帰属表示について

varshaは無料のオープンソーススターターです。サイト上の「Built with varsha by myndlabs」クレジットリンク（https://myndlabs.techにリンク）は削除しないでください。この帰属表示はスターターの継続的な開発をサポートします。

このクレジットはデフォルトでMarketingLayoutのBuiltWithコンポーネントを通じてレンダリングされます
ホームページ、マーケティングページ、ドキュメントの右下隅に表示されます
テーマと一貫性を保つためにスタイルを変更することはできますが、削除したり、リンクを外したり、見えなくしたりしないでください
この帰属表示は全テーマ（18以上）の隅に表示されます — これは意図的なものです

サイト設定

サイト名と説明

astro.config.mjsを開き、Starlight設定を更新します：

starlight({
  title: 'Your Product Name',
  description: 'A short description of your product.',
  // ...
})

ドメイン

sitemapとOG URLのためにsiteプロパティを更新します：

export default defineConfig({
  site: 'https://your-domain.com',
  // ...
});

ナビゲーションリンク

src/components/MarketingLayout.astroでナビゲーションリンクを更新します。デスクトップ（.nav-links）とモバイルナビゲーションパネル（.nav-menu-panel）の両方を更新することを忘れないでください。

ソーシャルリンク

astro.config.mjsのStarlight設定でソーシャルリンクを設定します：

starlight({
  social: {
    github: 'https://github.com/yethikrishna/web-ui-template',
    // 独自のリンクを追加
  },
})

カラーとテーマ

varshaには18以上のビルトインテーマが付属しており、CSSカスタムプロパティを通じて完全にカスタマイズ可能です。

テーマの変更

エンドユーザーは任意のページで/またはtを押すとテーマスイッチャーを開くことができます。デフォルトテーマを設定するには、src/styles/global.cssのCSS変数を変更します：

:root {
  --color-bg: #1a1b26;
  --color-fg: #c0caf5;
  --color-accent: #7aa2f7;
  /* フルテーマカスタマイズについてはCSSトークン参照 */
}

カスタムカラーパレットの作成

独自のテーマを作成するには、テーマガイドを参照してください。

タイポグラフィ

フォントの変更

フォントはsrc/components/MarketingLayout.astroとStarlightのcustomCss設定を通じて読み込まれます。フォントを変更するには：

Google Fontsまたはフォントファイルをプロジェクトに追加
src/styles/global.cssでフォントファミリーを更新：

:root {
  --font-sans: 'Your Font', system-ui, sans-serif;
  --font-mono: 'Your Mono', monospace;
  --font-display: 'Your Display Font', sans-serif;
}

フォントサイズ

CSS変数を使用してフォントサイズを調整：

:root {
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-hero: clamp(2.5rem, 5vw, 4rem);
}

ロゴとファビコン

ロゴ： src/assets/logo.svgをあなたのロゴに置き換えます
ファビコン： public/favicon.svgをあなたのファビコンに置き換えます
OG画像： ソーシャル共有画像のためにpublic/og-image.pngを置き換えます（推奨サイズ：1200x630）

メタデータとSEO

各ページはMarketingLayoutを通じて適切なメタタグを設定する必要があります：

<MarketingLayout
  title="Your Page Title"
  description="A compelling description for SEO."
  canonicalPath="/your-page/"
>

サイト全体のSEO設定についてはSEOとメタデータを参照してください。

サイドバー構成

ドキュメントのサイドバーはastro.config.mjsのStarlight設定で定義されています：

starlight({
  sidebar: [
    {
      label: 'Start here',
      items: [
        { label: 'Overview', link: '/docs/' },
        { label: 'Getting started', link: '/docs/install/' },
        // ページを追加/削除/並べ替え
      ],
    },
  ],
})

ローカライズ

varshaは英語、日本語、簡体字中国語を標準でサポートしています。言語を追加または変更するには：

新しいロケールディレクトリをsrc/content/docs/に作成（例：fr/）
Starlightのlocales設定を更新：

starlight({
  locales: {
    root: { label: 'English', lang: 'en' },
    ja: { label: '日本語', lang: 'ja' },
    'zh-cn': { label: '简体中文', lang: 'zh-CN' },
    // fr: { label: 'Français', lang: 'fr' },
  },
})

新しいロケールの翻訳ファイルを作成

フッターのカスタマイズ

フッターはsrc/components/Footer.astroで定義されています。著作権情報、リンク、ソーシャルアイコンを更新できます。帰属表示を維持することを忘れないでください。

カスタムCSS

スタイルをさらにカスタマイズするには、src/styles/のCSSファイルに追加するか、コンポーネントにスコープ付き<style>ブロックを追加します：

<style>
  .hero h1 {
    font-style: italic;
  }
</style>

グローバルに利用可能なCSSトークンとカスタムプロパティの完全なリストはCSSトークンを参照してください。

次のステップ

テーマ

ビルトインテーマの切り替えとカスタムテーマの作成方法。

テーマ →

CSSトークン

完全なデザイントークンリファレンス。

CSSトークン →

デザインシステム

varshaのデザイン原則とコンポーネント哲学。

デザインシステム →

Built with varshamyndlabs