カード

画像の有無にかかわらず、カードセットで情報をより動的に表示します

カードを使うと、テキストと画像をグリッド状に組み合わせた、見た目に美しいページレイアウトを作成できます。ランディングページの作成や、その他のコンテンツを非線形に表示するのに最適です。

調整できます 中サイズまたは大サイズのカードに切り替える そして、それらを関連するリソースにリンクできます。

カードの例

カードにカーソルを合わせて、その オプションメニュー The Options menu icon in GitBookを開きます。ここでターゲットリンクを追加でき、ユーザーはカードをクリックするだけで直接目的の場所へ移動できます。

circle-check

画像の追加

カードにカーソルを合わせて、その オプションメニュー The Options menu icon in GitBook。ここでカードにカバー画像を追加できます。あるいは、カード自体の カバー画像を追加 オプションをクリックするだけでも構いません。

これにより ファイルを選択 モーダルが開きます。ここに新しい画像をドラッグ&ドロップするか、以前にスペースへアップロードした画像ファイルを使用できます。

ダークモード用の画像を追加する

ダークモードのときだけ表示されるカバー画像も追加できます。

これを行うには、カードの オプションメニュー を開いて カバー > カバーを編集 > ダークモード用のカバーを追加を選択します。これにより ファイルを選択 モーダルが開き、新しい画像をドラッグ&ドロップするか、以前にアップロードした画像を選択できます。

適切な画像サイズを選ぶ

GitBook は、横長画像をデスクトップとモバイルの両方で自動的に 16:9 比率に切り抜きます。アップロードした画像が縦長、または 1:1 比率の場合、デスクトップでは 16:9 に切り抜かれ、モバイルでは正方形または縦長として表示されます。

A GitBook screenshot showing card images on desktop
デスクトップでは、カード画像はサイズに関係なくすべて横長の 16:9 比率で表示されます。一貫性のため、同じサイズを使用することをおすすめします。
A GitBook screenshot showing card images on mobile
モバイルでは、正方形または縦長の画像は左側のように表示されます。横長の画像は右側のように表示されます。

デスクトップとモバイル全体で見た目を統一するため、カード用の画像はすべて 16:9 形式(例: 1920px × 1080px)でアップロードすることをおすすめします。

カードのレイアウトを画面サイズに応じて変えたい場合は、1:1 比率の画像をアップロードし、画像の内容が中央に来るようにすることをおすすめします。

カードサイズの変更

カードブロックの左側にある オプションメニュー The Options menu icon in GitBook を開くことで、カードのサイズを選択できます。 のオプションでは横一列に 3 枚のカードが作成され、 のオプションでは各行に 2 枚の大きめのカードが表示されます。

circle-info

カードブロックを ウィンドウ幅いっぱいに広げる には、ブロックの横にある オプションメニュー The Options menu icon in GitBook をクリックして 全幅.

Markdownでの表現

最終更新

役に立ちましたか?