Wix プロギャラリー:ギャラリーのテキストボックスをカスタマイズする
読了時間:3分
ギャラリーアイテムの情報(テキストや詳細)をアイテム自体の上または下に表示する場合、異なるテキストボックススタイルから選択できます。テキストボックスの背景色、高さ、画像とテキストの間の間隔などをカスタマイズできます。
注意:
テキストボックスは、グリッド、スライダー、ストリップ、カラムのレイアウトでのみ使用できます。デザイン設定パネルの「テキスト」タブで情報の表示位置として「画像上」を選択した場合、テキストボックス機能は使用できません。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/03/24/5cf44e41-9290-43ff-874b-1827c70fccd4/ee9bb6c1-c31b-4580-90f5-1301f037b7f2.png)
この記事では、以下の項目について説明します:
テキストボックスのスタイルを選択する
デザイン設定パネルの「アイテムスタイル」タブで 3つのテキストボックススタイルから表示したいギャラリーテキスト選択します。
テキストボックスのスタイルを選択する方法:
- エディタでプロギャラリーをクリックします。
- 「設定」をクリックします。
- 「デザイン」タブをクリックします。
- 「アイテムスタイル」をクリックします。
- 3つのテキストボックのススタイルからスタイルを選択します:
- clean:テキストボックスに背景はありません。
- attached:テキストボックスは色付きの背景で画像に添付されます。情報を上に表示するように選択した場合、情報は画像の上部に表示され、情報を下に表示するように選択した場合、画像の下部に表示されます。
- Separated:テキストボックスの背景は色付きですが、画像には添付されていません。画像とテキストボックスの間に少しスペースがあります。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/22/e1e96a12-d1cd-403b-b3d1-7a6844d0b1b4/45aacb12-14e9-412f-958c-d6b85f6a2a86.png)
テキストボックスのデザインをカスタマイズする
テキストボックスの色、高さ、中のテキストなどをカスタマイズし、サイト内の他の部分と一致させます。これは、デザイン設定パネルの「テキスト」タブから行うことができます。
テキストボックスデザインをカスタマイズする
- エディタでプロギャラリーをクリックします。
- 「設定」をクリックします。
- 「デザイン」タブをクリックします。
- 「テキスト」をクリックします。
- 「テキストデザイン」セクション下のオプションを使用して、テキストとテキストボックスをカスタマイズします:
- タイトルのスタイル・色:タイトルテキストのフォントと色を選択します。
- 詳細のフォントのスタイル・色:詳細テキストのフォントと色を選択します。
- 横方向の配列:横方向のテキストを左、中央、または右に揃えます。
- 色・不透明度:カラーボックスをクリックし、テキストボックスの背景色を選択します。スライダーをドラッグして、背景色の不透明度を調整します。
注意:「clean(背景なし)」のテキストボックススタイルを選択した場合、このオプションは使用できません。 - テキストボックスの高さを調整:テキストボックスの高さは、タイトルと詳細のフォントサイズによって異なります。 該当するチェックボックスを選択して、テキストボックスを自動または手動で調整します。
- 自動:テキストボックスの高さは、テキストのフォントサイズに基づいて自動的に決定されます。
- 手動:スライダーをドラッグして、テキストボックスの高さを調整します。
ヒント:画像に長い詳細を使用する場合は、フォントを小さくするか、テキストボックスの高さを手動で調整してください。
- 画像とテキストボックスの間隔:スライダーをドラッグして、画像とテキストボックスの間隔を変更します。(0〜100ピクセル)
- テキストの縦方向の余白: スライダーをドラッグして、縦方向のテキストと枠線の間隔を変更します。
- テキストの横方向の余白: スライダーをドラッグして、横方向のテキストと境界線の間隔を変更します。
- タイトルと詳細欄の間隔:スライダーをドラッグして、タイトルと詳細の間隔を変更します。(0〜50ピクセル)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/22/3f7f5500-e5b3-4c54-9aaf-e27647ddbc39/7a08df55-a371-4d6e-ba9b-11a2c32d1e23.png)
ヒント:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/22/bfb4a9ef-18c6-41e8-9f6f-677fa5990e65/be54e4aa-6286-4f28-898b-5c1c1d3246b0.png)
「デザイン設定」パネルの「アイテムスタイル」タブから、テキストボックスの枠線の太さと色、および角の丸みをカスタマイズすることもできます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/22/bfb4a9ef-18c6-41e8-9f6f-677fa5990e65/be54e4aa-6286-4f28-898b-5c1c1d3246b0.png)
注意:
現在、Wix プロギャラリーに折りたたみ可能テキストを追加することはできません。この機能をご希望の場合は、機能リクエストに投票してください。
お役に立ちましたか?
|