Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(ja): Update customization.mdx #1208

Merged
merged 9 commits into from
Dec 2, 2023
49 changes: 25 additions & 24 deletions docs/src/content/docs/ja/guides/customization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Starlightには標準的なスタイルと機能がデフォルトで用意さ

2. `astro.config.mjs`で、Starlightの[`logo.src`](/ja/reference/configuration/#logo)オプションにロゴのパスを指定します。

```js
```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand All @@ -36,7 +36,7 @@ Starlightには標準的なスタイルと機能がデフォルトで用意さ
starlight({
title: 'ロゴを設定したドキュメント',
logo: {
src: './src/assets/my-logo.svg',
+ src: './src/assets/my-logo.svg',
},
}),
],
Expand All @@ -45,7 +45,7 @@ Starlightには標準的なスタイルと機能がデフォルトで用意さ

デフォルトでは、ロゴはサイトの`title`と一緒に表示されます。ロゴ画像にサイトタイトルが含まれている場合は、`replacesTitle`オプションを設定して、タイトルテキストを非表示にすることができます。`title`テキストはスクリーンリーダーのために残されるので、ヘッダーはアクセシブルなままです。

```js
```js {5}
starlight({
title: 'ロゴを設定したドキュメント',
logo: {
Expand Down Expand Up @@ -74,12 +74,12 @@ starlight({

2. `astro.config.mjs`で、`src`ではなく`light`と`dark`オプションにロゴのパスを指定します。

```js
```diff lang="js"
starlight({
title: 'ロゴを設定したドキュメント',
logo: {
light: './src/assets/light-logo.svg',
dark: './src/assets/dark-logo.svg',
+ light: './src/assets/light-logo.svg',
+ dark: './src/assets/dark-logo.svg',
},
}),
```
Expand All @@ -88,7 +88,7 @@ starlight({

Starlightにはサイトマップ生成機能が組み込まれています。`astro.config.mjs`の`site`にURLを設定すると、サイトマップの生成が有効になります。

```js
```js {4}
// astro.config.mjs

export default defineConfig({
Expand All @@ -103,7 +103,7 @@ Starlightのページはデフォルトで、グローバルなナビゲーシ

ページのフロントマターで[`template: splash`](/ja/reference/frontmatter/#template)を設定することで、サイドバーのない、より広いページレイアウトを適用できます。これはランディングページに特に適しており、[このサイトのホームページ](/ja/)で確認することができます。

```md
```md {5}
---
# src/content/docs/index.md

Expand All @@ -121,7 +121,7 @@ Starlightは、目当ての見出しに読者が簡単にジャンプできる
<Tabs>
<TabItem label="フロントマター">

```md
```md {4-6}
---
# src/content/docs/example.md
title: 目次にH2のみを表示するページ
Expand All @@ -134,13 +134,13 @@ tableOfContents:
</TabItem>
<TabItem label="グローバルな設定">

```js
```js {7}
// astro.config.mjs

defineConfig({
integrations: [
starlight({
title: '',
title: '目次の設定をカスタマイズしたドキュメント',
tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 2 },
}),
],
Expand All @@ -155,7 +155,7 @@ defineConfig({
<Tabs>
<TabItem label="フロントマター">

```md
```md {4}
---
# src/content/docs/example.md
title: 目次のないページ
Expand All @@ -166,7 +166,7 @@ tableOfContents: false
</TabItem>
<TabItem label="グローバルな設定">

```js
```js {7}
// astro.config.mjs

defineConfig({
Expand All @@ -186,9 +186,9 @@ defineConfig({

Starlightは、Starlightインテグレーションの[`social`](/ja/reference/configuration/#social)オプションを使用して、サイトヘッダーにソーシャルメディアアカウントへのリンクを追加する機能を備えています。

現在、Bitbucket、Codeberg、CodePen、Discord、GitHub、GitLab、Gitter、Instagram、LinkedIn、Mastodon、Microsoft Teams、Stack Overflow、Threads、Twitch、Twitter、YouTubeへのリンクがサポートされています。他のサービスのサポートが必要な場合は、GitHubまたはDiscordでお知らせください
[設定方法のリファレンス](/ja/reference/configuration/#social)で、サポートされているリンクアイコンの完全なリストを確認できます。他のサービスのサポートが必要な場合は、GitHubかDiscordでお知らせください

```js
```js {9-12}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand Down Expand Up @@ -221,7 +221,7 @@ Starlightプロジェクトがリポジトリのルートにない場合は、

以下の例では、GitHub上にある`withastro/starlight`リポジトリの`main`ブランチの`docs/`サブディレクトリに置かれている、Starlightドキュメントの編集リンクを設定しています。

```js
```js {9-11}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand Down Expand Up @@ -255,8 +255,9 @@ Starlightサイトは、デフォルトでシンプルな404ページを表示

404ページでは、Starlightのページレイアウトとカスタマイズ機能をすべて使用できます。たとえば、デフォルトの404ページは、フロントマターで[`splash`テンプレート](#ページレイアウト)と[`hero`](/ja/reference/frontmatter/#hero)コンポーネントを使用しています。

```md
```md {4,6-8}
---
# src/content/docs/404.md
title: '404'
template: splash
editUrl: false
Expand Down Expand Up @@ -308,7 +309,7 @@ Starlightサイトにカスタムフォントを追加する必要がある場

3. `astro.config.mjs`で、Starlightの`customCss`配列に`font-face.css`ファイルへのパスを追加します。

```js
```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand All @@ -318,8 +319,8 @@ Starlightサイトにカスタムフォントを追加する必要がある場
starlight({
title: 'カスタムフォントを設定したドキュメント',
customCss: [
// @font-face CSSファイルへの相対パス
'./src/fonts/font-face.css',
+ // @font-face CSSファイルへの相対パス
+ './src/fonts/font-face.css',
],
}),
],
Expand Down Expand Up @@ -364,7 +365,7 @@ Starlightサイトにカスタムフォントを追加する必要がある場

3. `astro.config.mjs`で、FontsourceのCSSファイルをStarlightの`customCss`配列に追加します。

```js
```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand All @@ -374,9 +375,9 @@ Starlightサイトにカスタムフォントを追加する必要がある場
starlight({
title: 'カスタムフォントを設定したドキュメント',
customCss: [
// 標準とセミボールドのフォントウェイト用のFontsourceファイル。
'@fontsource/ibm-plex-serif/400.css',
'@fontsource/ibm-plex-serif/600.css',
+ // 標準とセミボールドのフォントウェイト用のFontsourceファイル。
+ '@fontsource/ibm-plex-serif/400.css',
+ '@fontsource/ibm-plex-serif/600.css',
],
}),
],
Expand Down