> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# スタイリング

> フォント、色、背景、カバー画像をカスタマイズしてドキュメントをビジュアルに魅力的にします。

Craft はデザインの専門知識がなくても美しいドキュメントを簡単に作成できます。カスタムの色、背景、フォント、カバー画像、そして和紙テープなどの装飾要素でコンテンツのスタイルを整えましょう。

## スタイルでできること

Craft のスタイリングシステムは **テキストレベル** と **ページレベル** の2段階で動作します。これにより、個々の要素に対する精密なコントロールと、ドキュメント全体での統一感の両方を実現できます。

### テキストレベルのスタイル設定

ドキュメント内の個別のブロックや選択範囲に適用できます：

* **フォント** – System（デフォルト）、Serif（読みやすさ重視）、Mono（コード向け）、Rounded（親しみやすくモダン）から選択します
* **テキスト色** – プリセットカラーから選ぶか、カスタムカラーを作成できます
* **ハイライト** – 特定のテキストに背景色を付けて強調できます
* **リスト** – 箇条書きスタイル、番号形式、インデントをカスタマイズできます

### ページレベルのスタイル設定

ドキュメント全体に適用して統一感を出します：

* **色** – ドキュメントの背景色や既定のテキスト色を設定します
* **カバー画像** – Unsplash のキュレーションされたライブラリから選ぶか、独自の写真をアップロードできます
* **背景** – 単色、グラデーション、またはブラー効果を伴う全ページ画像を選択できます
* **区切り線** – 和紙テープのパターン、シンプルな線、幾何学的な形状で横方向の仕切りをスタイル設定できます
* **カード** – カラーボーダーや画像背景を使ってページを視覚的に区別されたカードレイアウトに変換できます

## クイックスタート

スタイリングオプションにはプラットフォームごとに異なる場所からアクセスできます：

<Tabs>
  <Tab title="macOS">
    * **右サイドバー** - Click the **Style** tab（paintbrush アイコン）でページレベルのオプションをすべて表示します
    * **左サイドバー** - 新しいバージョンではライブプレビュー付きの **Styles** パネルを見つけられます
    * **Toolbar** - テキストを選択して、書式設定用のツールバーを使用します
    * **Keyboard** - Press `Cmd+Shift+S` でスタイルパネルを開きます
  </Tab>

  <Tab title="iOS">
    * **three-dot menu** (`···`) を画面右上で Tap して **Page Style** にアクセスします
    * **Letter icon**（Aa）– テキストを選択したときに表示され、クイックフォーマットに使えます
    * **Block menu** – ブロックを長押し（Long press）してからコンテキストメニューで **Style** を選択します
    * **Slash menu** – `/style` と入力してインラインでテキストスタイルを適用します
  </Tab>

  <Tab title="Windows">
    * **右サイドバー** - Click the **Style** tab でページレベルのスタイルオプションを表示します
    * **Toolbar** - テキストを選択すると書式コントロールが表示されます
    * **Slash menu** – `/style` と入力してテキスト書式に素早くアクセスします
  </Tab>

  <Tab title="Web">
    * **右サイドバー** - Click the **Style** tab でページレベルのオプションを表示します
    * **Toolbar** - テキストを選択して書式設定コントロールにアクセスします
    * **Slash menu** – `/style` と入力してキーボードから離れずにスタイルを適用します
  </Tab>
</Tabs>

<iframe src="https://www.youtube-nocookie.com/embed/b2UL6B2m9Hg" title="Document Styling in Craft" className="w-full aspect-video rounded-xl" allowFullScreen />

## よくある使用例

### ビジネス用ドキュメント

報告書、提案書、クライアント向けのドキュメントには：

* 伝統的で信頼感のある印象にするために **Serif** フォントを使用します
* 背景には **ニュートラルカラー**（グレー、白など）を適用します
* ブランドやトピックを表現する **カバー画像** を追加します
* **テキストのハイライト** は最小限に留め、重要な指標やCTAにのみ使用します

### 個人用ナレッジベース

ノート、ジャーナル、学習資料には：

* 読みやすさのために **Rounded** または **System** フォントを試してください
* トピックごとに識別しやすいよう **色付きの背景** を使い分けます（例：仕事は青、プライベートは緑）
* 重要箇所を素早く把握できるよう **ハイライト** を多用します
* 個性や視覚的な区切りとして **和紙テープの区切り** を試してみてください

### クリエイティブプロジェクト

ムードボード、ポートフォリオ、ストーリーテリングには：

* **カードレイアウト** と **画像背景** を組み合わせて視覚的なインパクトを出します
* 雰囲気作りに **グラデーション背景** を利用します
* 画像に合う **カスタムテキスト色** を適用します
* 深みを出すために **カバー画像** にブラー効果を重ねます

### コードドキュメント

技術メモや開発ログには：

* コードブロックや技術的な内容にはデフォルトで **Mono** フォントを使います
* 目の疲れを減らすために **コントラストの高い配色**（暗背景に明るいテキスト）を検討します
* セクションを明確に分けるために **シンプルな区切り線** を使用します
* ページ背景は最小限にして内容に集中させます

<Info title="スタイルの一貫性">
  気に入ったスタイルが見つかったら、**スペースの設定** で既定に保存してください。これにより新しいドキュメントはすべてそのスタイルで開始され、ワークスペース全体での一貫性と時間の節約になります。
</Info>

## カスタマイズのワークフロー

新しいドキュメントのスタイル設定における典型的なワークフローは次の通りです：

<Steps>
  <Step>
    **ページの基盤を決める** – 背景（色、グラデーション、または画像）と必要であればカバー画像を選択します。これが全体のムードを決めます。
  </Step>

  <Step>
    **フォントを選択する** – ドキュメントの目的に合う書体を選びます（フォーマルなものには Serif、技術的なものには Mono、カジュアルには Rounded）。
  </Step>

  <Step>
    **構造要素を追加する** – 主要セクションの間に区切りを挿入して視覚的な階層を作り、読みやすさを高めます。
  </Step>

  <Step>
    **テキストレベルのスタイルを適用する** – 執筆中にハイライト、色、フォーマットを使って重要点を強調し、視覚的な興味を持たせます。
  </Step>

  <Step>
    **調整と仕上げ** – 一歩引いて全体を確認します。色を調整したり、フォントを変えたり、区切り線のスタイルを切り替えたりして満足いくまで仕上げます。
  </Step>
</Steps>

## 関連記事

<CardGroup cols={2}>
  <Card title="スタイル クイックガイド" href="/ja/write-and-edit/styling/quick-guide">
    すべてのスタイリング機能を網羅したガイド
  </Card>

  <Card title="カバー画像" href="/ja/write-and-edit/styling/cover-images">
    ドキュメントのカバー画像をカスタマイズする方法
  </Card>

  <Card title="カード" href="/ja/write-and-edit/styling/cards">
    ページを視覚的なカードレイアウトに変換する
  </Card>

  <Card title="アプリスタイル" href="/ja/write-and-edit/styling/app-styles">
    ドキュメントのスタイルをアプリインターフェースに拡張する
  </Card>

  <Card title="デフォルトスタイル" href="/ja/write-and-edit/styling/default-styles">
    好みのスタイルを既定として設定する
  </Card>

  <Card title="ドキュメントの公開" href="/ja/share-and-publish/publish">
    ウェブ上で美しくスタイルされたドキュメントを共有する
  </Card>

  <Card title="AI アシスタント" href="/ja/ai-assistant">
    スタイリングやフォーマットの手助けに AI を使う
  </Card>
</CardGroup>