画像

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

ページに画像を挿入し、サイズや左揃え・中央揃え・右揃えを選択できます。また、画像ブロックに代替テキストやキャプションを任意で含めることもできます。

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

画像ブロックの例

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

画像のアップロード

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

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

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

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

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

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

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

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

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

公開サイトのライトモードとダークモードそれぞれに異なる画像を設定できます。GitBookは訪問者のモードに応じて適切な画像を自動的に表示します。

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

をクリックします。 ドロップダウンメニューでダークモード用の画像を追加

注意： を選択します。これを設定すると、同じメニューからどちらの画像も置き換えることができます。 GitBookは現在、ページカバーや.

カード

上の画像カバーなど、一部のケースでライト/ダークモード用画像をサポートしていません。GitHub/GitLab同期を通したライト/ダークモード画像 および Markdown内でHTML構文（).

<picture> <source> ）を使ってライト/ダークモード画像を追加することもできます。 GitHub/GitLab同期を通したライト/ダークモード画像 および Markdown内でHTML構文（ ブロック画像の場合は、

<figure>

<source>
  GitHub/GitLab同期を通したライト/ダークモード画像
    要素を使用し、その中に
      を入れてください:
        前のテキスト
      "
      <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> GitHub/GitLab同期を通したライト/ダークモード画像 ）を使ってライト/ダークモード画像を追加することもできます。 Markdown内でHTML構文（ ブロック画像の場合は、

</figure>
後のテキスト
  インライン画像（テキストと同じ行に表示される画像）の場合は、
    を入れてください:
      前のテキスト
    "
    画像の前のテキスト
  srcset="
    https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
    <picture
><source
media="(prefers-color-scheme: dark)" />

注意： alt="The GitHub Logo" /></picture> と画像の後のテキストを使用してください まだサポートしていないのは、 または GitHub専用構文.

を

を通じて 編集メニュー #gh-dark-mode-only #gh-light-mode-only リサイズ

画像のサイズを変更するには、画像にカーソルを合わせて

• を開きます。 をクリックして、利用可能なオプションから画像のサイズを変更します。

• 中 画像のサイズを変更する

• 大 小

• – 画像サイズの25% – 画像サイズの50% 735 – 画像サイズの75% フィット

– すべてのサイズ指定を解除し、フルサイズで表示するか、より大きな画像の場合は最大幅を

注意： ピクセル

に制限して表示します。 ウィンドウの全幅に広げる には、ブロックの隣にある オプションメニュー をクリックして 全幅.

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

画像ギャラリー内で画像をリサイズすると、単独の画像をリサイズした場合とは異なる結果になることがあります。

画像ブロックを にすることができますGit Syncを通した画像のサイズ変更 画像のサイズをより細かく制御したい場合は、GitHubやGitLabでMarkdownを使い、正確なサイズを指定できます。 および 画像をエクスポートする際にはHTMLタグ <img/> % を使用します。仕様に従って、画像の寸法は width height 属性を使用して指定でき、これらはピクセル単位または数値と 記号の組み合わせのみを受け付けます。 画像の寸法を指定するための有効なバリエーションは:

<img width="100" />

画像を幅100ピクセルに設定します

<img width="100%" /> オプションメニュー 画像をフルサイズに設定します（ただしエディタによって制限されます） 画像の配置.

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

画像の配置を変更するには、ブロックの

を開き、希望する配置を選択します。これはエディタよりも狭い画像、またはあなたが

リサイズした オプションメニュー 画像にのみ影響します。 画像にフレームを付ける 画像ブロックにフレームを追加すると、画像に一貫した外観を与え、周囲のコンテンツから視覚的に区別できます。

フレーム付き画像はキャプションを持つことができ、キャプションの背景に控えめなグリッドを表示します。 画像にフレームを追加するには、画像にカーソルを合わせ、ブロックの

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

<source>
  GitHub/GitLab同期を通したライト/ダークモード画像
    <figure><img src="https://gitbook.com/images/gitbook.png" alt="The GitBook Logo"></figure>
    //Block with Caption and Alt text
  <img
  src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
alt="GitHub logo"