カード

画像の有無にかかわらず、一連のカードで情報をより動的に表示する

カードを使うと、テキストと画像をグリッド状に組み合わせて視覚的に魅力的なページレイアウトを作成できます。ランディングページの作成や、非線形な方法でコンテンツを表示するのに最適です。

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

カードの例

カードにカーソルを合わせて、その オプションメニュー 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 x 1080px)でアップロードすることをおすすめします。

カードが画面サイズに応じてレイアウトを適応させることを望む場合は、1:1比率の画像をアップロードし、画像の内容を中央に配置することをおすすめします。

カードのサイズ変更

カードブロックの左側にある オプションメニュー The Options menu icon in GitBook を開いてカードサイズを選択できます。 オプションは横一列に3つのカードを作成し、 オプションは各行により大きなカードを2つ表示します。

circle-info

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

Markdownでの表現

最終更新

役に立ちましたか?