> ## 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/write-and-edit/styling)をご覧ください。

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

スタイルメニューには、現在のフォント、カバー、バックドロップの設定がシンプルにプレビュー表示されます。ドキュメントのスタイル要素がどのように組み合わさっているかを手軽に確認できます。

<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="Style preview example 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="Style preview example 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="Style preview example 3" width="277" height="216" data-path="images/write-and-edit/styling/quick-guide/en/content/style-preview-3.png" />

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

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/styles-gallery.gif?s=62ec4bc1e0ad9fa6ddc9845ef44b59b7" alt="Opening the styles gallery" 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="Creating custom styles" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/custom-styling.gif" />

バックドロップ画像をアップロードするには、バックドロップ設定で**画像**オプションを選択し、**アップロード**を選んでデバイスから画像を選択します。または、**Unsplash**ボタンを選択してキーワードを検索し、テーマに合ったプロフェッショナルな写真を見つけることもできます。

<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="Upload backdrop image option" width="346" height="450" data-path="images/write-and-edit/styling/quick-guide/en/content/upload-backdrop.png" />

<Info title="カバー画像">
  ドキュメントにビジュアルヘッダーを追加したいですか？アップロード、トリミング、Unsplashのオプションについては、専用の[カバー画像](/ja/write-and-edit/styling/cover-images)の記事をご覧ください。
</Info>

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

セパレーターは、ドキュメント内のコンテンツを整理するのに役立ちます。Craftではさらに一歩進んで、視覚的なセパレーターとして機能する装飾的な帯「和紙テープ」を提供しています。

以下から選択できます：

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

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/separators.gif?s=72c338272195774355f463276a46264c" alt="Different separator styles" 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="Styling Washi tapes" 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="Browsing Washi tape gallery" 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="Creating custom Washi tape colors" 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="System default color icon" 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="Customizing document colors" 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="Resetting document colors" width="426" height="390" data-path="images/write-and-edit/styling/quick-guide/en/content/reset-color.gif" />

## フォント

ワンクリックでドキュメント全体のフォントスタイルを変更できます。以下から選択してください：

* **システム** – デバイスのデフォルトフォントを使用
* **セリフ** – 読みやすいトラディショナルなセリフフォント
* **モノ** – コードや技術的なコンテンツ向けの等幅フォント
* **丸み** – フレンドリーでモダンな丸みのあるフォント

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/fonts.gif?s=11732e87e5fcc8c62ace8900cbb879bf" alt="Changing document fonts" 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="Disabling styles during PDF export" 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>
