header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix エディタ:モバイルアクションバーをカスタマイズする

4分
モバイルアクションバーの外観を変更してモバイルサイトに合ったデザインにしましょう。テキストを表示するかどうかを選択したり、レイアウトを選択したり、デザインを変更して、訪問者に洗練されたインタラクティブな体験を作り出すことができます。
メール、電話、Instagram のアクションが表示されている、Wix モバイルサイトのモバイルアクションバーのプレビュー。
この記事では、次の項目について説明します:

モバイルアクションバーの設定を変更する

バーのアクション(メール、Facebook など)にテキストを表示するかどうかを選択します。テキストを有効にすると、各アクションがユーザーに明確に表示されるため、モバイルサイトのアクセシビリティが向上します。

設定を変更する方法:

  1. モバイルエディタでモバイルアクションバーを選択します。
  2. 設定」アイコン  をクリックします。
  3. 表示オプションを選択します:
    • ラベルなし:アクションにはアイコンのみが表示されます。
    • ラベルあり:アクションにはテキストラベル付きのアイコンが表示されます。
モバイルアクションバーの設定パネル。カーソルがテキストを表示するオプションの上にマウスオーバーしています。

新しいモバイルアクションバーのデザインを選択する

バーのデザインは、サイトのレイアウトや構造に合わせ、横型または縦型のものから選択することができます。縦型のデザインを選択した場合は、バーの表示位置を選択することもできます。

バーのデザインを選択する方法:

  1. モバイルエディタでモバイルアクションバーを選択します。
  2. デザイン」アイコン  をクリックします。
  3. パネルから横または縦のデザインを選択します。
    1. (縦型のデザインのみ)「レイアウト」アイコン  を選択します。
    2. バーを画面の左または右に表示するかを選択します。
モバイルアクションバーのデザインパネル。カーソルが縦のプリセットにマウスオーバーしています。

モバイルアクションバーのデザインをカスタマイズする

モバイルアクションバーのカラースキームを設定したり、枠線をカスタマイズしたり、影を追加したりして、好みの見た目にすることができます。
参考:
縦型のデザインを選択した場合は、バーが閉じている時と開いている時の両方のビューをカスタマイズすることができます。

モバイルアクションバーをデザインする方法:

  1. モバイルエディタでモバイルアクションバーを選択します。
  2. デザイン」アイコン  をクリックします。
  3. デザインをカスタマイズ」をクリックします。
  4. バーのレイアウト(横型または縦型)に応じて実行する内容を選択します:
モバイルアクションバーの「デザインをカスタマイズ」パネルで、「カラースキームを反転」オプションにマウスオーバーしている様子を示したスクリーンショット。
メール、電話、Instagram のアクションが表示されている、Wix モバイルサイトのモバイルアクションバーのプレビュー。
モバイルアクションバーの設定パネル。カーソルがテキストを表示するオプションの上にマウスオーバーしています。
モバイルアクションバーのデザインパネル。カーソルが縦のプリセットにマウスオーバーしています。
モバイルアクションバーの「デザインをカスタマイズ」パネルで、「カラースキームを反転」オプションにマウスオーバーしている様子を示したスクリーンショット。