New: Find what your docs are missing with Content gaps.
Read the docs
Ctrlk
ProductPricingBook a demoLog inSign up
For the complete documentation index, see llms.txt. This page is also available as Markdown.

画像

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

ページに画像を挿入し、サイズを選び、左・中央・右のいずれかに配置できます。必要に応じて、画像ブロックに代替テキストやキャプションも追加できます。

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

画像ブロックの例

A photograph taken from space looking back towards Earth. A satellite is in the foreground, and in the background is an ocean-covered part of our planet with patchy clouds.
キャプション付きの画像ブロックの例

画像をアップロードする

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

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

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

2つ目の手順に従うと、ファイルのアップロード、以前にアップロードしたファイルの選択、画像 URL の貼り付け、または Unsplash の内蔵検索を使用して画像を追加できます。

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

セクション内のアセット総数に上限はありませんが、GitBook は濫用があった場合にアカウントをブロックする権利を留保します。アップロード上限を超えるファイルは、Google Drive や Dropbox などのサービスに保存し、ページからリンクしてください。

アニメーション GIF は 1 ファイルあたり 200 フレームまでです。GIF を含む大きなファイルはページの読み込み時間を遅くするため、可能な限り大きなファイルを直接アップロードするのは避けてください。

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

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

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

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

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

ダークモード用の画像を追加するには、画像にカーソルを合わせ、 編集メニュー に戻って 画像を置換 The Replace image icon in GitBook.

ドロップダウンメニューで、 ダークモード用の画像を追加. これを設定すると、この同じメニューからどちらの画像も置き換えられます。

注： GitBook では現在、ページのカバーや画像カバーなど、特定の場合のライト/ダークモード画像をサポートしていません： カード.

GitHub/GitLab Sync を通じたライト/ダークモード画像

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

ブロック画像の場合は、 <figure> HTML 要素を使い、 <picture> 、 <source> その中に

インライン画像（テキストと同じ行に配置される画像）の場合は、 <picture> HTML 要素を使い、 <source> その中に

注： まだサポートしていません GitHub 専用の構文 を通じて #gh-dark-mode-only または #gh-light-mode-only.

サイズ変更

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

A GitBook screenshot showing how to resize an image
画像のサイズを変更する

  • 小 – 画像サイズの 25%

  • 中 – 画像サイズの 50%

  • 大 – 画像サイズの 75%

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

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

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

Git Sync を通じた画像のサイズ変更

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

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

画像の配置

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

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

画像に枠を付ける

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

A black and white photograph of a lone figure walking across a stark white landscape
枠付き画像にはキャプションを付けることができ、キャプションの背後に控えめなグリッドが表示されます。

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

知っておくとよいこと： ブロック内で枠を付けられるのは単一画像のみです。複数画像を含む画像ブロックやインライン画像には枠を付けられません。

Markdownでの表記

画像が読み込まれないのはなぜですか？

「画像を読み込めません」というエラーは、画像が元の場所で変更または削除されたことを意味します。URL で画像を埋め込んだ場合、GitBook はその URL に依存します。画像が元の場所で移動または消失すると、ページ上に表示されなくなります。

対処するには、画像を GitBook に直接アップロードするか、画像の場所が変わった場合は URL を更新してください。また、あるセクションから別のセクションへ画像をコピーした場合にもこのエラーが表示されることがあります。各セクションには独自のファイルディレクトリがあるためです。新しいセクションに画像を再アップロードしてください。

セクションにアップロードされたすべてのファイルは、 ライブラリ タブで ページ 目次の上部にある

最終更新

役に立ちましたか？