# WYSIWYGエディタの使い方

# ✏️ BookStack WYSIWYGエディタの使い方

BookStack では、直感的に操作できる **WYSIWYG（What You See Is What You Get）エディタ** を使って、ページを視覚的に編集できます。ここではその基本的な使い方を説明します。

---

## 🧭 エディタの基本構成

WYSIWYGエディタは、以下のようなツールバーと編集領域で構成されています：

- **ツールバー**：フォーマット、リンク、表などの挿入ツール
- **本文領域**：ページ内容を直接編集（見たまま編集）

//後でこの辺に画像を挿入

---

## 🛠️ 主な機能と使い方

### 1. 文字の装飾
文字装飾は、入力領域に文字を入力した後に、マウスで装飾したい部分をドラッグで選択し、ツールバーのアイコンをクリックすることで実行できます。

| 機能       | 説明                        |
|------------|-----------------------------|
| 太字       | 「**B**」アイコン（Ctrl + B）|
| 斜体       | 「*I*」アイコン（Ctrl + I） |
| 打ち消し線 | 「S̶」アイコン              |
| 見出し     | 見出しレベルをドロップダウンで選択（H1〜H4） |

---

### 2. リストの作成
リストの作成は、通常の改行入りの複数行を選択し、ツールバーのアイコンをクリックすると選択部分がまとめてリストに変換される

- **番号なしリスト**（●）：箇条書きアイコン
- **番号付きリスト**（1. 2. 3.）：番号付きアイコン

---

### 3. リンクと画像の挿入

- **リンク挿入**：🔗 アイコンをクリック → URLと表示テキストを入力
- **画像挿入**：
  - ツールバーの画像アイコンをクリック
  - 画像をアップロードまたは既存画像を選択

---

### 4. 表の挿入

- 表アイコンをクリックし、行数・列数を選択
- セル内は直接編集可能

---

### 5. コードブロック・引用

- **引用**：引用アイコン（「"」マーク）をクリック
- **コードブロック**：`</>` アイコンでコード挿入（インライン/複数行選択可）

---

## 🔄 編集履歴とプレビュー

- **履歴の確認**：「履歴」ボタンから過去のバージョンにアクセス可能
- **プレビュー**：ページ保存前に見た目を確認できます

---

## 🧽 よくある操作

| 操作内容         | 方法                                      |
|------------------|-------------------------------------------|
| ページの保存     | 「保存」ボタンをクリック                  |
| ページのキャンセル | 「キャンセル」で編集を破棄                |
| 全画面モード     | ツールバー右端の拡大アイコンをクリック     |

---

## 🧩 補足

- Markdown モードに切り替えるには、管理者設定でエディタタイプを「Markdown」に変更する必要があります。
- WYSIWYGエディタは非技術者でも扱いやすく、書式崩れの心配が少ないのが特徴です。

---

## 📚 参考リンク

- [BookStack公式ドキュメント](https://www.bookstackapp.com/docs/)
- [よくある質問（FAQ）](https://www.bookstackapp.com/docs/admin/common-questions/)