# インラインコンテンツ
A GitBook screenshot showing inline content options

コンテンツにインライン要素を追加します。

インラインパレットを使うと、手をキーボードから離さずにテキストブロックへ追加のコンテンツをすばやく挿入できます。単に `/` を任意のテキストブロックで押して、インラインパレットを開きます。スラッシュは、挿入する内容に置き換えられます。 ## 注釈 注釈を使うと、読者の思考の流れを途切れさせずに、語に追加の文脈を加えられます。語の意味を説明したり、追加情報を挿入したりするのに使えます。読者は注釈付きのテキストにカーソルを合わせると、テキストの上に注釈を表示できます。 ### 注釈を作成する 注釈を作成するには、注釈を付けたいテキストを選択し、 **注釈を付ける** をコンテキストメニューでクリックします。注釈を書き終えたら、その外側をクリックしてテキストブロック内での作業を続けます。 ### 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 こちらはインライン画像です: Dark version of GitBook logo ``` {% 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. / を押してインラインパレットを開き、Link を選ぶか、コンテキストメニューの **Link** ボタンをクリックするか、 **⌘ + K**. 3. リンク先にしたいページのタイトルを入力し始めます。 4. ドロップダウンの検索結果からページを選択します。 5. を押します `Enter`. ### 絶対リンク 絶対リンクは、コンテンツにコピー＆ペーストできる外部リンクです。ドキュメント外の何かにリンクしたいときに最適です。 絶対リンクを挿入するには: 1. リンクを挿入したい段落内の任意の場所をクリックするか、テキストを選択します。 2. / を押してインラインパレットを開き、Link を選ぶか、コンテキストメニューの **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. / を押してインラインパレットを開き、Link を選ぶか、コンテキストメニューの **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 block $$f(x) = x * e^{2 pi i \xi x}$$ ``` ## ボタン ボタンは、行動喚起を強調したり、ドキュメントに検索バーやAsk AIバーを追加したりするのに最適です。読者をどこかに案内したり、答えを見つける手助けをしたりできます。 ### ボタンのアクション ボタンはURLにリンクするだけではありません。ページ上から、ボタンを検索バーやGitBook Assistantへの質問バーに変えることもできます。これらのアクションは公開ページでも機能します。下の例からわかるように、 次のアクションを設定できます: #### **リンクボタンを追加** 読者を別のページまたは外部URLに送ります:Assistantの詳細を見る #### **検索バーを追加** 任意の事前設定済みクエリで検索を開きます: #### **Ask AI/GitBook Assistant バーを追加** 開く [GitBook Assistant](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/gitbook-ai-assistant) 任意の事前設定済みプロンプトで: #### **無効化されたボタンを追加** 意図的に非アクティブなボタンを表示します:非アクティブなボタン ### ボタンを作成して設定する 1. 入力 `/` を開き、 **ボタン**. 2. ボタンをクリックして **ラベル** メニューを開きます。 3. アクションを選び、ラベルとスタイルを設定します。 4. 任意: 事前設定済みの検索クエリまたはAssistantプロンプトを追加します。 ### スタイル リンクボタンと無効化ボタンには、プライマリとセカンダリの両方のスタイルがあります。以下にいくつかの例を示します: GitBook にサインアップ トップへ戻る ### Markdownでの表現 ```markdown GitBook ``` ## アイコン アイコンを使うと、サイトに追加の視覚的な संकेतを加えられます。段落内、カード内、または他に装飾を加えたい場所ならどこでもインラインで追加できます。アイコンは、 [カスタマイズ設定](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/customization/icons-colors-and-themes). :facebook: :github: :x-twitter: :instagram: で定義された視覚スタイルを使用します。 [Font Awesome](https://fontawesome.com/) で利用可能なさまざまなアイコンを見てみましょう。 ### Markdownでの表現 ```markdown :github: ``` ## 式 式を使うと、 [変数](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) できます。