画像

ページに画像または画像ギャラリーを追加し、ダークモード用の画像バリアントを追加し、必要に応じて画像のサイズ変更や配置を行う

ページに画像を挿入して、そのサイズや左・中央・右のどこに配置するかを選べます。また、画像ブロックに代替テキストやキャプションを任意で追加することもできます。

ヒント: アクセシビリティの観点から、画像には代替テキストを設定することをおすすめします。

画像ブロックの例

キャプション付き画像ブロックの例

画像をアップロードする

コンテンツに画像を追加する方法は 2 つあります。

1. ファイル管理システムから画像をドラッグ＆ドロップして、ページ上の空のブロックに直接入れます。

2. 画像ブロックを追加する をページに追加し、 画像を選択 右側に表示されるサイドパネルを使います。

2 つ目の方法では、ファイルをアップロードする、以前にアップロードしたファイルを選択する、画像 URL を貼り付ける、または Unsplash から組み込み検索を使って画像を追加することができます。

GitBook では、1 ファイルあたり最大 100MB の画像をアップロードできます。

画像ギャラリーを作成する

画像ブロックに 1 枚以上の画像を追加すると、ギャラリーが作成されます。これを行うには、ブロックの オプションメニュー を選択し、 画像を追加… を開いて、再び 画像を選択 サイドパネルを開きます。

ギャラリーから画像を削除するには、削除したい画像の 編集メニュー を開き、 Delete ⌫ キーを押します。

ライトモードとダークモード用の画像を追加する

公開サイトのライトモード版とダークモード版で、異なる画像を設定できます。GitBook は、訪問者がどちらのモードを使用しているかに応じて、適切な画像を自動的に表示します。

ダークモード用の画像を追加するには、画像にカーソルを合わせて 編集メニュー をクリックし、 画像を置換 .

ドロップダウンメニューで ダークモード用の画像を追加を選択します。設定後は、同じメニューからどちらの画像も置換できます。

注： GitBook では現在、ページカバーや次の上の画像カバーなど、一部のケースではライトモードとダークモードの画像をサポートしていません。 カード.

GitHub/GitLab Sync を使ったライトモードとダークモードの画像

Markdown でも HTML 構文（<picture> 、 <source>).

）を使って、ライトモードとダークモードの画像を追加できます。ブロック画像の場合は、 <figure> HTML 要素の中に <picture> 、 <source> を入れて使います。

前のテキスト

<figure>
  <picture>
    <source
      srcset="
        https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
      "
      media="(prefers-color-scheme: dark)"
    />
    <img
      src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
      alt="GitHub logo"
    />
  </picture>
  <figcaption>キャプションのテキスト</figcaption>
</figure>

後のテキスト

インライン画像（テキストと同じ行に表示される画像）の場合は、 <picture> HTML 要素の中に <source> を入れて使います。

画像の前のテキスト
<picture
  ><source
    srcset="
      https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
    "
    media="(prefers-color-scheme: dark)" />
  <img
    src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
    alt="GitHub のロゴ"
/></picture>
と画像の後のテキストを使います。

注： 現時点では、 GitHub 専用の構文 を #gh-dark-mode-only または #gh-light-mode-only.

リサイズ

画像のサイズを変更するには、画像にカーソルを合わせて 編集メニュー を開きます。 サイズ ボタンをクリックして、利用可能なオプションから画像サイズを変更します。

画像のサイズを変更する

• 小 – 画像サイズの 25%

• 中 – 画像サイズの 50%

• 大 – 画像サイズの 75%

• フィット – すべてのサイズ指定を削除し、フルサイズで表示するか、より大きな画像では最大幅 735 ピクセル に制限して表示します。

画像の幅がエディタより広い場合、GitBook は代わりにエディタの幅に画像の幅を制限し、サイズ変更はこの制限に基づいて行われます。

注： 画像ギャラリー内の画像をサイズ変更すると、個別の画像をサイズ変更した場合とは結果が異なることがあります。

Git Sync を使った画像のサイズ変更

画像サイズをより細かく制御したい場合は、GitHub または GitLab で Markdown を使って正確なサイズを指定できます。

画像を書き出す際には、HTML タグ <img/>を使用します。仕様に従い、画像の寸法は width 、 height 属性で指定できます。これらはピクセル単位の値、または数値と % 記号の組み合わせのみを受け付けます。 画像の寸法を指定する有効な形式は次のとおりです。 <img width="100" /> 画像の幅を 100 ピクセルに設定します <img width="100%" /> 画像をフルサイズに設定します（ただし、これはエディタによって制限されます）

画像の配置

デフォルトでは、画像ブロックは画像をフルサイズで中央揃えに表示します。

画像の配置を変更するには、ブロックの オプションメニュー を開いて、希望する配置を選択します。これは、エディタより狭い画像、または サイズ変更した.

画像の枠線

画像ブロックに枠線を追加して、画像の見た目を統一し、周囲のコンテンツと視覚的に分けることができます。

枠線付きの画像にはキャプションを付けることができ、キャプションの背後にうっすらとしたグリッドが表示されます。

画像に枠線を追加するには、画像にカーソルを合わせてブロックの オプションメニュー を開き、 枠線あり トグルを有効にします。

補足: ブロック内で枠線を付けられるのは 1 枚の画像だけです。複数の画像を含む画像ブロックやインライン画像には枠線を付けられません。

Markdown での表現

//Simple Block
![](https://gitbook.com/images/gitbook.png)

//Block with Caption
![The GitBook Logo](https://gitbook.com/images/gitbook.png)

//Block with Alt text

<figure><img src="https://gitbook.com/images/gitbook.png" alt="The GitBook Logo"></figure>

//Block with Caption and Alt text

<figure><img src="https://gitbook.com/images/gitbook.png" alt="The GitBook Logo"><figcaption><p>GitBook Logo</p></figcaption></figure>

// Frame付き画像を含むブロック

<div data-with-frame="true"><img src="https://gitbook.com/images/gitbook.png" alt="The GitBook Logo"></div>

// ダークモードとライトモードで別の画像を使う、キャプション付きブロック

<figure>
  <picture>
    <source srcset="https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png" media="(prefers-color-scheme: dark)">
    <img src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png" alt="GitHub logo">
  </picture>
  <figcaption>キャプションのテキスト</figcaption>
</figure>