Wix エディタ:モバイルアクションバーをカスタマイズする
読了時間:4分
モバイルアクションバーの外観を変更してモバイルサイトに合ったデザインにしましょう。テキストを表示するかどうかを選択したり、レイアウトを選択したり、デザインを変更して、訪問者に洗練されたインタラクティブな体験を作り出すことができます。
![メール、電話、Instagram のアクションが表示されている、Wix モバイルサイトのモバイルアクションバーのプレビュー。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/01/08/e61c7978-4f4e-4ab1-b806-200b56f3066f/257d2ecd-8b67-4f75-820a-9ed92020483e.png)
この記事では、次の項目について説明します:
モバイルアクションバーの設定を変更する
バーのアクション(メール、Facebook など)にテキストを表示するかどうかを選択します。テキストを有効にすると、各アクションがユーザーに明確に表示されるため、モバイルサイトのアクセシビリティが向上します。
設定を変更する方法:
- モバイルエディタでモバイルアクションバーを選択します。
- 「設定」アイコン
をクリックします。
- 表示オプションを選択します:
- ラベルなし:アクションにはアイコンのみが表示されます。
- ラベルあり:アクションにはテキストラベル付きのアイコンが表示されます。
![モバイルアクションバーの設定パネル。カーソルがテキストを表示するオプションの上にマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/19/99b36a34-0743-4085-bf80-f9f3401f3dde/d267beca-7c72-4170-9f46-b7249d0d1010.jpeg)
新しいモバイルアクションバーのデザインを選択する
バーのデザインは、サイトのレイアウトや構造に合わせ、横型または縦型のものから選択することができます。縦型のデザインを選択した場合は、バーの表示位置を選択することもできます。
バーのデザインを選択する方法:
- モバイルエディタでモバイルアクションバーを選択します。
- 「デザイン」アイコン
をクリックします。
- パネルから横または縦のデザインを選択します。
- (縦型のデザインのみ)「レイアウト」アイコン
を選択します。
- バーを画面の左または右に表示するかを選択します。
- (縦型のデザインのみ)「レイアウト」アイコン
![モバイルアクションバーのデザインパネル。カーソルが縦のプリセットにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/19/231ea22e-eee2-4a59-8932-dde6514482a8/86c20b07-c185-4413-a417-41012c93505a.jpeg)
モバイルアクションバーのデザインをカスタマイズする
モバイルアクションバーのカラースキームを設定したり、枠線をカスタマイズしたり、影を追加したりして、好みの見た目にすることができます。
参考:
縦型のデザインを選択した場合は、バーが閉じている時と開いている時の両方のビューをカスタマイズすることができます。
モバイルアクションバーをデザインする方法:
- モバイルエディタでモバイルアクションバーを選択します。
- 「デザイン」アイコン
をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- バーのレイアウト(横型または縦型)に応じて実行する内容を選択します:
横のデザインオプション
縦のデザインオプション
![モバイルアクションバーの「デザインをカスタマイズ」パネルで、「カラースキームを反転」オプションにマウスオーバーしている様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/19/8656d18e-10c4-40a4-a5cb-1d97b3ae0f57/ec1467e2-b173-4d53-8fb7-89a85659f366.jpeg)