Wix Studio エディタ:タブ要素を追加・カスタマイズする
読了時間:7分
ページにタブ要素を追加すると、タブごとにコンテンツを整理して表示することができます。これにより、ページ内の任意の場所に関連するコンテンツをコンパクトに表示して、訪問者に必要な情報を簡単に見つけてもらうことができます。
![タブ要素の各タブをクリックして、それぞれのコンテンツを表示する様子を示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/23/df7067be-ecc1-46ff-bc05-50c34ad7d7fe/217d8df4-26bb-4a99-8db0-b9d1a2df4503.gif)
この記事では、以下の項目について説明します:
ページにタブ要素を追加する
「要素を追加」パネルから、タブ要素を追加します。プリセットのタブ要素を追加したら、各タブのコンテンツを編集したり、必要な要素をさらに追加したりすることができます。
タブ要素を追加する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「レイアウトツール」をクリックします。
- 「タブ」をクリックします。
- 希望のタブ要素を選択し、ページにドラッグします。
- タブのコンテンツをカスタマイズします:
- 追加したタブ要素をクリックします。
- 「タブを管理」をクリックします。
- 操作するタブを選択します。
- タブのコンテンツを編集します:
- さらに要素を追加します。
- 既存のコンテンツを編集します。
- グリッドを調整して希望のレイアウトにします。
![「要素を追加」パネルで、「レイアウトツール」を選択して、希望のタブ要素を選択する様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/22/90a2dafc-78d2-4b80-b5a2-b9059fc682d5/8e86a08d-a816-4049-94c8-aca185cc634b.jpg)
タブを管理する
「タブを管理」パネルを使用して、タブの複製、タブ名の変更、タブの削除などを行います。なお、パネル内のタブ名をクリックすると、タブのコンテンツを表示することができます。
タブを管理する方法:
- タブ要素をクリックします。
- 「タブを管理」をクリックします。
- 該当するタブにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「タブを複製」、「名前を変更」、「削除」から実行する内容を選択します。
![「タブを管理」パネルに、タブを管理するためのオプションが表示されている様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/22/390d48bd-4ff5-4211-973c-27f10e048e24/050f45e3-7706-4297-b9fc-f48717b144de.jpg)
空白のタブを追加したい場合:
パネル下部にある「新しいタブを追加」をクリックします。
タブ要素をデザインする
ページのスタイルに合わせて、タブ要素のデザインをカスタマイズします。タブ要素では、「タブコンテナ」、「タブ」、および「コンテナ」と呼ばれる 3つの部分をデザインすることができます。
ヒント:![「通常時」の状態のタブをデザインする様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/27/df3c0633-e6e1-4835-8e46-ed09e2e79dad/d20bad25-f03a-4c93-94fb-ec7c32b55f4f.png)
タブは「通常時」、「ホバー時」、「選択中」の状態ごとに個別にデザインすることができます。
![「通常時」の状態のタブをデザインする様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/27/df3c0633-e6e1-4835-8e46-ed09e2e79dad/d20bad25-f03a-4c93-94fb-ec7c32b55f4f.png)
タブ要素をデザインする方法:
- タブ要素をクリックします。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
![Wix Studio エディタの「要素設定パネルを開く」アイコンがハイライトされている様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/27/2d873d0d-a081-405c-a3a1-069eb0bbc33d/f3f0606b-1e9f-4699-b443-07f842c281ea.jpg)
- 「デザイン」タブ
をクリックします。
- ドロップダウンからデザインしたい部分を選択します:
- タブコンテナ:タブメニューが表示される部分。
- タブ:タブ自体にあたる部分。「通常時」、「ホバー時」、「選択中」から、カスタマイズするタブの状態を選択します。
- コンテナ:各タブのコンテンツが表示される部分。
- 利用可能なオプションを使用してデザインをカスタマイズします:
- 背景の塗りつぶし:タブ要素の各部分に、色、グラデーション、または背景画像を追加します。複数の背景レイヤーを追加して、不透明度を調整することができます。
- 枠線:タブ要素の各部分に枠線を追加します。枠線は種類と色を選択して、幅を調整することができます。
- 角:タブ要素の各部分の角の丸みを調整します。四隅の角はまとめて調整することも、個別に調整することもできます。
- 影:タブ要素の各部分に影を追加して立体感を出します。「角度」、「距離」、「ぼかし」などのオプションを使用して、影が自然に見えるように調整します。
- レイアウト:タブ要素の各部分の周囲の余白を調整します。「ロック」アイコン
を有効または無効にして、上下左右の余白をまとめて調整したり、個別に調整したりすることができます。
- テキスト:タブに表示されるテキストのスタイルや書式を設定します。フォント、文字サイズ、文字色などを変更することができます。
![要素設定パネルの「デザイン」タブで、「背景の塗りつぶし」をカスタマイズする様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/22/32898ff5-6b15-4c30-9db3-dfd072636ff6/19429661-9733-4a0a-bfc8-1087c3e456fe.jpg)
注意:
利用可能なオプションは、「タブコンテナ」、「タブ」、「コンテナ」などのデザインする部分によって異なります。
既定のタブを選択する
既定のタブとは、訪問者に自動的に表示されるタブのことを指します。このタブは、クライアントのコンテンツやサイトのニーズに合わせて、自由に変更することができます。
ヒント:![「タブを管理」パネルで、既定に設定されているタブの横に、チェックマークが表示されている様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/01/15/664037e9-d2f5-4dc3-b1e3-e67d544640eb/3e9ef669-f477-4858-ab61-9174fd86285d.png)
「タブを管理」パネルでは、現在既定に設定されているタブの横に、チェックマークが表示されます。
![「タブを管理」パネルで、既定に設定されているタブの横に、チェックマークが表示されている様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/01/15/664037e9-d2f5-4dc3-b1e3-e67d544640eb/3e9ef669-f477-4858-ab61-9174fd86285d.png)
既定のタブを設定する方法:
- タブ要素をクリックします。
- 「タブを管理」をクリックします。
- 該当するタブにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「既定として設定」をクリックします。
![「タブを管理」パネルで既定のタブを設定する様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/23/cebc89d6-37a0-4560-a498-0af36e96f95d/c8b6c061-59c4-4f84-8c2d-284589c7fbf8.jpg)
タブ要素のレイアウトを調整する
タブ要素内の間隔や余白などのレイアウトをカスタマイズします。タブの数が多くメニューに収まらない場合は、それらのタブがスクロールで表示されるようにするか、新しい行に表示されるようにするかを選択することができます。
タブ要素のレイアウトを調整する方法:
- タブ要素をクリックします。
- 「レイアウト」アイコン
をクリックします。
- 利用可能なオプションを使用してレイアウトを調整します:
- タブの分布:タブメニューを要素の幅に引き伸ばすかを選択します:
- デフォルト:タブメニューが要素の幅に合わせて引き伸ばされることはありません。タブの配置は「左」、「中央」、「右」から選択することができます。
- 引き伸ばす:タブメニューが要素の幅に合わせて引き伸ばされます。タブ内のテキストの配置は「左」、「中央」、「右」から選択することができます。
- タブの間隔:スライダーをドラッグして、タブの間隔を調整します。
- タブとコンテナの間隔:スライダーをドラッグして、タブメニューからコンテンツが表示されるコンテナまでの間隔を調整します。
- 横方向の余白:タブ内の左右の余白を調整します。
- 縦方向の余白:タブ内の上下の余白を調整します。
- 収まらないタブの表示方法:メニューに収まらないタブの表示方法を選択します:
- スクロール:訪問者は「スクロール」アイコンをクリックして、すべてのタブを表示することができます。
- 折り返し:メニューに収まらないタブを次の行に表示します。スライダーをドラッグすると、行間を調整することができます。
- タブの表示順:タブを表示する順番を「左から右」、または「右から左」に変更します。
- タブの分布:タブメニューを要素の幅に引き伸ばすかを選択します:
![「タブのレイアウト」パネルで、「タブの間隔」を調整する様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/23/56e257f7-e2a8-468f-9d6c-7f26f55d585f/c8bd7327-5296-4cce-9a83-04799319c7ac.jpg)
お役に立ちましたか?
|