📝 Fix Unnatural part

This commit is contained in:
yuubinnkyoku 2024-12-22 07:38:24 +00:00
parent fad3b9cdfb
commit d9626017c8

View file

@ -18,7 +18,7 @@ Blowfish には高度な変更を加えるための多くの方法がありま
始める前に、 [Hugo プロジェクトの構造](https://gohugo.io/getting-started/directory-structure/)と、コンテンツとテーマのカスタマイズを管理するためのベストプラクティスについて簡単に説明します。 始める前に、 [Hugo プロジェクトの構造](https://gohugo.io/getting-started/directory-structure/)と、コンテンツとテーマのカスタマイズを管理するためのベストプラクティスについて簡単に説明します。
{{< alert >}} {{< alert >}}
**簡単に言うと:** テーマファイルを直接編集してはいけません。 カスタマイズは、テーマディレクトリ自体ではなく、Hugoプロジェクトのサブディレクトリ内でのみ行います。 **簡単に言うと:** テーマファイルを直接編集してはいけません。カスタマイズは、テーマディレクトリ自体ではなく、Hugoプロジェクトのサブディレクトリ内でのみ行います。
{{< /alert >}} {{< /alert >}}
@ -52,16 +52,16 @@ Hugo には、画像のサイズ変更、トリミング、最適化を行うた
## カラーテーマ ## カラーテーマ
Blowfish には、すぐに使用できる多数のカラーテーマが付属しています。基本的なカラーテーマを変更するには、`colorScheme` テーマパラメータを設定します。 組み込みのスキームの詳細については、[はじめに]({{< ref "getting-started#colour-schemes" >}}) セクションを参照してください。 Blowfish には、すぐに使用できる多数のカラーテーマが付属しています。基本的なカラーテーマを変更するには、`colorScheme` テーマパラメータを設定します。 組み込みのスキームの詳細については、[はじめに]({{< ref "getting-started#colour-schemes" >}})セクションを参照してください。
デフォルトのスキームに加えて、独自のスキームを作成し、Web サイト全体を好みに合わせて再スタイルすることもできます。 スキームは、 `assets/css/schemes/` フォルダに `<scheme-name>.css` ファイルを配置することで作成されます。 ファイルが作成されたら、テーマ設定で名前で参照するだけです。 デフォルトのスキームに加えて、独自のスキームを作成し、Web サイト全体を好みに合わせて再スタイルすることもできます。 スキームは、`assets/css/schemes/` フォルダに `<scheme-name>.css` ファイルを配置することで作成されます。ファイルが作成されたら、テーマ設定で名前で参照するだけです。
{{< alert "github">}} {{< alert "github">}}
**注:** これらのファイルを手動で生成するのは難しい場合があるため、それを支援する `nodejs` ターミナルツール [Fugu](https://github.com/nunocoracao/fugu) を作成しました。要するに、カラーパレットの主要な3つの `hex` 値を渡すと、プログラムは Blowfish に直接インポートできる css ファイルを出力します。 **注:** これらのファイルを手動で生成するのは難しい場合があるため、それを支援する `nodejs` ターミナルツール [Fugu](https://github.com/nunocoracao/fugu) を作成しました。これは、カラーパレットの主要な3つの `hex` 値を渡すと、プログラムは Blowfish に直接インポートできる css ファイルを出力します。
{{< /alert >}} {{< /alert >}}
Blowfish は、テーマ全体で使用される3色のパレットを定義します。3色は `neutral``primary``secondary` のバリエーションとして定義され、それぞれに 10 の色合いが含まれています。 Blowfish は、テーマ全体で使用される3色のパレットを定義します。3色は `neutral``primary``secondary` のバリエーションとして定義され、それぞれに10の色合いが含まれています。
Tailwind CSS 3.0 が不透明度で色の値を計算する方式のため、スキームで指定された色は、赤、緑、青の色の値を提供することにより、[特定の形式に準拠](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo)する必要があります。 Tailwind CSS 3.0 が不透明度で色の値を計算する方式のため、スキームで指定された色は、赤、緑、青の色の値を提供することにより、[特定の形式に準拠](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo)する必要があります。
@ -77,7 +77,7 @@ Tailwind CSS 3.0 が不透明度で色の値を計算する方式のため、ス
## スタイルシートのオーバーライド ## スタイルシートのオーバーライド
独自の HTML 要素をスタイルするために、カスタムスタイルを追加する必要がある場合があります。 Blowfish は、独自の CSS スタイルシートでデフォルトのスタイルをオーバーライドできるようにすることで、このシナリオに対応します。 プロジェクトの `assets/css/` フォルダに `custom.css` ファイルを作成するだけです。 独自の HTML 要素をスタイルするために、カスタムスタイルを追加する必要がある場合があります。Blowfish は、独自の CSS スタイルシートでデフォルトのスタイルをオーバーライドできるようにすることで、このシナリオに対応します。プロジェクトの `assets/css/` フォルダに `custom.css` ファイルを作成するだけです。
`custom.css` ファイルは Hugo によって縮小され、他のすべてのテーマスタイルの後に自動的にロードされます。つまり、カスタムファイルの内容はデフォルトよりも優先されます。 `custom.css` ファイルは Hugo によって縮小され、他のすべてのテーマスタイルの後に自動的にロードされます。つまり、カスタムファイルの内容はデフォルトよりも優先されます。
@ -231,6 +231,6 @@ cd ../..
} }
``` ```
これで、サイトの設計に取り組むときは、 `npm run dev` を呼び出すと、コンパイラがウォッチモードで実行されます。 デプロイの準備ができたら、 `npm run build` を実行すると、クリーンな Tailwind CSS ビルドが得られます。 これで、サイトの設計に取り組むときは、 `npm run dev` を呼び出すと、コンパイラがウォッチモードで実行されます。デプロイの準備ができたら、`npm run build` を実行すると、クリーンな Tailwind CSS ビルドが得られます。
🙋‍♀️ 困ったことがあれば、[GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions) で気軽に質問してください。 🙋‍♀️ 困ったことがあれば、[GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions) で気軽に質問してください。