> ## 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 を使えば、デザインの専門知識がなくても視覚的に魅力的なドキュメントを簡単に作成できます。スタイル機能では背景、カバー画像、テキスト色、ドキュメント全体の色までカスタマイズできます。和紙テープのセパレーターはページにユニークな装飾的アクセントを与えます。

スタイルの仕組みをより深く理解するには、[ドキュメント、ページ、ブロック](/ja/introduction/documents) に関する記事から始めてください。

## スタイルメニュー

<Tabs>
  <Tab title="macOS">
    macOS アプリでは、左サイドバーにある **スタイル** タブを見つけてください：

    <img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png?s=eeec64a237c912f088c787445755e7e1" alt="スタイルメニュー（左サイドバー）" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png" />
  </Tab>

  <Tab title="Web">
    Web アプリでは、左サイドバーにある **スタイル** タブを見つけてください：

    <img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png?s=eeec64a237c912f088c787445755e7e1" alt="スタイルメニュー（左サイドバー）" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png" />
  </Tab>
</Tabs>

## スタイルプレビューとスタイルギャラリー

スタイルメニューには現在のフォント、カバー、背景設定のミニマルなプレビューが表示されます - ドキュメントのスタイル要素がどのように組み合わさるかを素早く確認できます。

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/style-preview-1.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=0129a124f65d801c8869a4fe08b3c0ce" alt="スタイルプレビュー例 1" width="289" height="223" data-path="images/write-and-edit/styling/quick-guide/en/content/style-preview-1.png" />

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/style-preview-2.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=8b9989c9e3feb864e536ec6dd41721be" alt="スタイルプレビュー例 2" width="283" height="217" data-path="images/write-and-edit/styling/quick-guide/en/content/style-preview-2.png" />

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/style-preview-3.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=bae07e2a5e816779ece33c4a81a7f647" alt="スタイルプレビュー例 3" width="277" height="216" data-path="images/write-and-edit/styling/quick-guide/en/content/style-preview-3.png" />

スタイルプレビューをClickすると、スタイルギャラリーにアクセスでき、ドキュメント用に厳選されたプリセットスタイルを閲覧できます。

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/styles-gallery.gif?s=62ec4bc1e0ad9fa6ddc9845ef44b59b7" alt="スタイルギャラリーを開く" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/styles-gallery.gif" />

## カスタムスタイル

プリセットスタイルに加えて、背景、テキスト、ドキュメント自体のカスタムカラーを作成できます。

背景には次のような幅広いオプションがあります：

* **単色** - カラーパレットから選ぶか、カスタムカラーを作成
* **グラデーション** - 2色以上をブレンド
* **画像** - 自分の画像をアップロードするか、Unsplash から選択

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/custom-styling.gif?s=83ee42ce92078710e3acca683ec82ec0" alt="カスタムスタイルの作成" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/custom-styling.gif" />

## カスタム画像のアップロード

デバイスから任意の画像を背景やカバー画像としてアップロードできます。

**背景の場合：**

<Steps>
  <Step>
    背景設定で **画像** オプションを選択
  </Step>

  <Step>
    **Upload** を選択して画像を指定
  </Step>
</Steps>

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/upload-backdrop.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=37096d20142bf302b8b642af18df45ee" alt="背景画像アップロードオプション" width="346" height="450" data-path="images/write-and-edit/styling/quick-guide/en/content/upload-backdrop.png" />

**カバー画像の場合：**

<Steps>
  <Step>
    カバー画像の領域をClickします
  </Step>

  <Step>
    「Insert File」を選択して画像を選びます
  </Step>
</Steps>

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/upload-cover.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=10c428878bdb58edca741dd229e34965" alt="カバー画像アップロードオプション" width="352" height="360" data-path="images/write-and-edit/styling/quick-guide/en/content/upload-cover.png" />

## Unsplash 連携

完璧なカバー画像や背景を探す時間がないですか？Craft の Unsplash 連携を使えば、数クリックでプロ品質の写真を簡単に見つけられます。

背景やカバー画像を設定するときに **Unsplash** ボタンを選択すると、Unsplash のデータベースにアクセスできます。キーワードで検索してテーマに合う画像を見つけてください。

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/unsplash-integration.gif?s=82de269fe5f0f12217c14201f88994a3" alt="Unsplash で画像を検索" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/unsplash-integration.gif" />

## セパレーターと和紙テープ

セパレーターはドキュメント内のコンテンツ構造化に役立ちます。Craft ではさらに進んで、和紙テープ - ページに視覚的な区切りを与える装飾的なストリップ - を提供します。

選べる種類：

* **標準ライン** - クラシックなセパレータースタイル
* **和紙テープ** - 装飾的なパターンのセパレーター
* **落書き（Doodles）** - 手描き風のセパレーター

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/separators.gif?s=72c338272195774355f463276a46264c" alt="異なるセパレータースタイル" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/separators.gif" />

<Info title="クイックヒント">
  ハイフンを3つ入力 (`---`) すると、設定しているスタイルのセパレーターが瞬時に追加されます。
</Info>

### 和紙テープのスタイル

背景やカバー画像のオプションと同様に、和紙テープのセパレーターも単色やパターンでカスタマイズできます。

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/washi-styling.gif?s=cc832858117b1aa2e4407cd3d0433971" alt="和紙テープのスタイリング" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/washi-styling.gif" />

美しいプリセットパターンを探すには和紙テープギャラリーにアクセスしてください：

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/washi-gallery.gif?s=8435350d7507d46cde5b5097bca4fb62" alt="和紙テープギャラリーを閲覧" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/washi-gallery.gif" />

和紙テープの色は細かく指定できます。色を手動で作成するか、カラーピッカーに RGB コードを入力してください。

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/custom-color.gif?s=4a5d3a415f66b08b37a96623c5b50cb0" alt="カスタム和紙テープ色の作成" width="800" height="673" data-path="images/write-and-edit/styling/quick-guide/en/content/custom-color.gif" />

## テキストとドキュメントの色

Craft のドキュメントはデフォルトで **システムデフォルト** の色を使用します - ダークモードでは黒、ライトモードでは白です。カラーピッカーでは白黒のアイコンで示されています。

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/system-color.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=b277771553b8fd81b717eae717ff09e3" alt="システムデフォルト色アイコン" width="281" height="166" data-path="images/write-and-edit/styling/quick-guide/en/content/system-color.png" />

ただし、ドキュメントとテキストの色は完全にカスタマイズできます。好みの色を手動で選ぶか、カラーピッカーに RGB コードを入力して正確な色を指定してください。

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/custom-doc-color.gif?s=7c3927c0a80033062ad48fab51b026b1" alt="ドキュメント色のカスタマイズ" width="800" height="673" data-path="images/write-and-edit/styling/quick-guide/en/content/custom-doc-color.gif" />

<Info title="色のリセット">
  リセットボタンを使うと、ドキュメントを即座にシステムのデフォルト色に戻せます。
</Info>

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/reset-color.gif?s=52d971ac666bddfd6773f2afaf74d1a9" alt="ドキュメント色のリセット" width="426" height="390" data-path="images/write-and-edit/styling/quick-guide/en/content/reset-color.gif" />

## フォント

ドキュメント全体のフォントスタイルをワンクリックで変更できます。選べるフォント：

* **System** - デバイスのデフォルトフォントを使用します
* **Serif** - 伝統的で読みやすいセリフ体
* **Mono** - コードや技術的な内容に適した等幅フォント
* **Rounded** - 親しみやすくモダンな丸みのあるフォント

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/fonts.gif?s=11732e87e5fcc8c62ace8900cbb879bf" alt="ドキュメントフォントの変更" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/fonts.gif" />

<Warning title="カスタムフォント">
  現在、Craft にカスタムフォントをアップロードすることはできません。
</Warning>

## スタイル付きドキュメントの PDF 書き出し

スタイル機能は、編集時に表現を助け、好みの視覚環境を作るために設計されています。コンテンツを PDF に書き出す際にスタイルを無効にしたい場合は、エクスポートオプションで簡単にオフにできます。

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/export-styles.gif?s=0b04cf70df6513a5d9144629f0400399" alt="PDF 書き出し時にスタイルを無効にする" width="800" height="638" data-path="images/write-and-edit/styling/quick-guide/en/content/export-styles.gif" />

## 関連記事

<CardGroup cols={2}>
  <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>
</CardGroup>
