画像

ページに画像や画像ギャラリーを追加し、ダークモード用の画像バリエーションを追加したり、必要に応じてサイズ変更や配置を行えます

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

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

画像ブロックの例

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

画像のアップロード

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

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

2. 画像ブロックをページに追加し、 にある 画像を選択 サイドパネルを使用します。

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

GitBook では、ファイルごとに最大 100MB までの画像をアップロードできます。

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

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

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

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

公開サイトのライトモード版とダークモード版で、異なる画像を設定できます。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での表現

//シンプルなブロック
![](https://gitbook.com/images/gitbook.png)

//キャプション付きブロック
![GitBook のロゴ](https://gitbook.com/images/gitbook.png)

//代替テキスト付きブロック

<figure><img src="https://gitbook.com/images/gitbook.png" alt="GitBook のロゴ"></figure>

//キャプションと代替テキスト付きブロック

<figure><img src="https://gitbook.com/images/gitbook.png" alt="GitBook のロゴ"><figcaption><p>GitBook ロゴ</p></figcaption></figure>

// フレーム付き画像のブロック

<div data-with-frame="true"><img src="https://gitbook.com/images/gitbook.png" alt="GitBook のロゴ"></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 のロゴ">
  </picture>
  <figcaption>キャプションのテキスト</figcaption>
</figure>