# インラインコンテンツ

<figure><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQcBDNerKxNvi1X3Jnk2R%2F26_01_22_inline-palette%402x.png?alt=media&#x26;token=08b0298b-627f-4394-addf-dd5b49cf3501" alt="A GitBook screenshot showing inline content options"><figcaption><p>コンテンツにインライン要素を追加します。</p></figcaption></figure>

インラインパレットを使うと、キーボードから手を離さずにテキストブロックに素早く追加コンテンツを挿入できます。単に `/` 任意のテキストブロックで押すとインラインパレットが開きます。スラッシュは、挿入するコンテンツで置き換えられます。

### 注釈

注釈を使うと、読者の思考の流れを断ち切らずに言葉に追加の文脈を付け加えられます。単語の意味を説明したり、追加情報を挿入したりといった用途に使えます。読者は注釈されたテキストにホバーすると、テキストの上に注釈が表示されます。

#### 注釈を作成する

注釈を作成するには、注釈したいテキストを選択してから **注釈** コンテキストメニューのオプションをクリックします。注釈を書き終えたら、その外側をクリックしてテキストブロックでの執筆を続けます。

#### Markdown 表現

コンテンツを [Markdown の脚注](https://www.markdownguide.org/extended-syntax/#footnotes) として書き、GitBook に注釈として追加することができます。脚注の指標は注釈したい語の直後に表示されるべきであり、句読点やその他の記号の後に置くべきではありません。

```markdown
これは簡単な脚注[^1]です、そしてこちらはより長い脚注[^bignote]です。

[^1]: これは最初の脚注です。

[^bignote]: これは複数段落とコードを含む脚注です。

    脚注に含めるには段落をインデントしてください。

    `{ my code }`

    好きなだけ段落を追加できます。
```

### 画像

インライン画像はページ上でテキストと並んで表示されます。

デフォルトでは、画像は元のサイズで設定され、最大幅は300pxです。画像をクリックしてフォーマットパレットを開き、次の3つのオプションのいずれかを選ぶことでサイズを変更できます：

1. **インラインサイズ：** 画像はフォントに比例してサイズ調整されます — アイコンやバッジに最適です。
2. **元のサイズ：** 画像は最大幅300ピクセルの元のサイズでインラインのまま表示されます。
3. **ブロックに変換：** これによりインライン画像が [画像ブロック](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/insert-images)に変わり、コンテンツと同じ幅になります。

{% hint style="info" %}
[イメージブロック](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/insert-images) はより多くのサイズやキャプションを追加する機能など、さらに多くのオプションを提供します — ただしテキストとインラインで表示されることはありません。
{% endhint %}

#### Markdownでの表現

{% code overflow="wrap" %}

```markdown
こちらはインライン画像です: <img src=".gitbook/assets/GitBook - Dark.jpg" alt="Dark version of GitBook logo" data-size="line">
```

{% endcode %}

### 絵文字

絵文字はを押してインラインパレットを開くことで追加できます。 `/` または、タイプすると絵文字の一覧がインラインで直接表示されます — 絵文字の名前を入力して絞り込むこともできます。 `:` と入力すると、絵文字の一覧が直接インラインで表示されます — 絵文字の名前を入力して候補を絞り込めます。

#### Markdownでの表現

{% code overflow="wrap" %}

```markdown
:house:
:car:
:dog:
```

{% endcode %}

### リンク

挿入できるリンクは3種類あります：

* [相対リンク](#relative-links)
* [絶対リンク](#absolute-links)
* [メールアドレス `mailto` リンク](#email-address-mailto-links)

#### 相対リンク

相対リンクは、スペース内に既に存在する [ページ](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/content-structure/page) へリンクすることで作成されるリンクです。相対リンクを使う利点は、ページのURL、名前、または場所が変更された場合でも参照が最新のまま保たれるため、壊れたリンクが少なくて済むことです。

相対リンクを挿入する方法は次のとおりです：

1. リンクを挿入したい段落のどこかをクリックするか、テキストを選択します。
2. &#x20;/ を押してインラインパレットを開き Link を選択するか、コンテキストメニューの **リンク** ボタンをクリックするか、または **⌘ + K**.
3. リンクしたいページのタイトルの入力を開始します。
4. ドロップダウンの検索結果からページを選択します。
5. を押します。 `Enter`.

#### 絶対リンク

絶対リンクはコンテンツにコピー＆ペーストできる外部リンクです。ドキュメント外のものにリンクしたいときに便利です。

絶対リンクを挿入するには：

1. リンクを挿入したい段落のどこかをクリックするか、テキストを選択します。
2. &#x20;/ を押してインラインパレットを開き Link を選択するか、コンテキストメニューの **リンク** ボタンをクリックするか、または **⌘ + K**.
3. リンクしたいURLを貼り付けます。
4. を押します。 `Enter`.

{% hint style="info" %}
**なぜ外部リンクは新しいタブで開かないのですか？**

ドキュメントに外部サイトへのリンクを追加すると、そのリンクは同じタブで開きます。

GitBook はこの [W3C 推奨の挙動](https://www.w3.org/TR/WCAG20-TECHS/G200.html) に従い、 [アクセシビリティ](https://it.wisc.edu/learn/make-it-accessible/websites-and-web-applications/when-to-open-links-in-a-new-tab/) をサポートして読者にとって一貫した包括的な体験を確保します。
{% endhint %}

#### メールアドレス mailto リンク

メールアドレス `mailto` リンクは、訪問者がクリックすると既定のメールクライアントが開き、 `フィールドにリンクのメールアドレスを入力してメールを書けるようにしたいときに便利です。` フィールドにリンクのメールアドレスを入力してメールを書けるようにしたいときに便利です。

メールアドレスリンクを挿入する方法は次のとおりです `mailto` ：

1. リンクを挿入したい段落のどこかをクリックするか、テキストを選択します。
2. &#x20;/ を押してインラインパレットを開き Link を選択するか、コンテキストメニューの **リンク** ボタンをクリックするか、または **⌘ + K**.
3. 次を貼り付けるか入力します `mailto:something@address.com`、そして `something@address.com` を使用したいメールアドレスに置き換えます。
4. を押します。 `Enter`.

#### Markdownでの表現

```markdown
[これはこのスペース内の別のページへの相対リンクです](../content-structure/page.md)
[これは絶対リンクです](https://www.gitbook.com/blog)
[これはサポートのメールアドレスへのリンクです](mailto:support@gitbook.com)
```

### 数式と TeX

このオプションを使用すると、コンテンツ内に次のようなインラインの数学式を作成できます： $$f(x) = x \* e^{2 pi i \xi x}$$。我々は式のレンダリングに [KaTeX](https://katex.org/docs/supported.html) ライブラリを使用しています。

{% hint style="info" %}
また、次を挿入することもできます [ブロックレベルの数式](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/math-and-tex) 空のブロックでコマンドパレットを開き、2番目の Math & TeX オプションを選択することで挿入できます。
{% endhint %}

#### Markdownでの表現

```markdown
# Math and TeX ブロック

$$f(x) = x * e^{2 pi i \xi x}$$
```

### ボタン

ボタンはコールトゥアクションを説明するのに最適です。ユーザーを GitBook 内の他のページや外部のURLへ誘導するために使用できます。

ボタンにはプライマリとセカンダリのスタイルがあります。いくつかの例を示します：

<a href="https://app.gitbook.com/join" class="button primary">GitBook に登録</a> <a href="#annotations" class="button secondary">トップへ移動</a>

#### Markdownでの表現

```markdown
<a href="https://app.gitbook.com" class="button primary">GitBook</a>
```

### アイコン

アイコンを使うとサイトに視覚的な目印を追加できます。段落にインラインで追加したり、カード内に入れたり、装飾が必要な場所ならどこにでも配置できます。これらはあなたの [カスタマイズ設定](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/customization/icons-colors-and-themes).

<i class="fa-facebook">:facebook:</i> <i class="fa-github">:github:</i> <i class="fa-x-twitter">:x-twitter:</i> <i class="fa-instagram">:instagram:</i>

で定義された視覚スタイルを使用します。 [を訪れて利用可能なさまざまなアイコンを確認してください。](https://fontawesome.com/) Font Awesome

#### Markdownでの表現

```markdown
<i class="fa-github">:github:</i>
```

### 式（Expressions）

式を使うと、で定義されたコンテンツを動的に表示できます [変数](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/variables-and-expressions)。式は `/` メニューから挿入できます。挿入後、式をダブルクリックすると式エディタが表示され、参照や [条件付き書式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) を変数に適用できます。
