Wix Studio エディタ:メニューをデザインする
読了時間:6分
Wix Studio エディタでは、メニューの見た目や雰囲気を細部までカスタマイズすることができます。要素設定パネルにアクセスして、各状態(ホバー、選択中など)のメニューをデザインし、塗りつぶし色、テキストスタイル、影などの設定を調整します。
この記事では、各メニュータイプのデザイン方法について説明します:
ホバーアクションを使用している場合:
メニューにホバーアクションを追加しても、タブレットやモバイル端末には表示されません。すべてのブレイクポイントで表示したい場合は、代わりにクリック操作を追加できます。
横型メニューをデザインする
要素設定パネルから、3つの異なる状態(通常時、ホバー、クリック)の横型メニューをデザインできるため、訪問者はよりインタラクティブなナビゲーションを体験できます。
選択したプリセットに応じて、利用可能なオプションを使用して、サイトの見た目にあったメニューを作成できます。たとえば、横型メニューの中には、カスタマイズ可能なボタンや区切り線が含まれているものがあります。
横型メニューをデザインする方法:
- 横型メニューを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン をクリックします。
- 「デザイン」までスクロールダウンします。
- ドロップダウンからデザインしたい要素を選択します:
- メニューコンテナ
- メニューアイテム
- サブメニューコンテナ
- サブメニューアイテム
- (メニュー / サブメニューアイテム)該当する状態(「通常時」、「ホバー」、「現在のページ」)を選択します。
- 利用可能なオプションを使用してメニューをデザインします:
- 背景の塗りつぶし:メニュー / サブメニューの背景色を変更し、不透明度を好みに合わせて調整します。デザインに区切り線が含まれている場合は、ここから色を付けることができます。
- 枠線:メニューの枠線の太さと色を調整します。
- 角:丸みを調整して、メニュー / サブメニューの角をより丸くまたは四角にします。
- 影:メニューに影を追加し、角度、色、位置などをカスタマイズします。
- テキスト:メニューとサブメニューアイテムのスタイルと書式を調整します。
- レイアウト:メニューアイテムの周りの余白を調整します。
縦型メニューをデザインする
「通常時」と「選択中」の 2つの状態に応じて縦型メニューをデザインできるため、訪問者は常に自分がどのページにいるのかを知ることができます。メニュー、サブメニュー、矢印(該当する場合)の塗りつぶし色を変更し、テキスト、枠線、影などの他のエリアをカスタマイズしましょう。
注意:
利用可能な設定は、「要素を追加」パネルで選択したメニューによって異なります。
縦型メニューをデザインする方法:
- 縦型メニューを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン をクリックします。
- 「デザイン」までスクロールダウンします。
- 利用可能なオプションを使用してメニューをデザインします:
- 不透明度・色:メニュー / サブメニューの背景色を変更し、必要に応じて不透明度を調整します。デザインに矢印が含まれている場合は、ここから色を付けることができます。
- 枠線:メニューの枠線のスタイルを選択し、太さと色を調整します。
- 影:メニューに影を追加し、角度、色、位置などをカスタマイズします。
- テキスト:メニューとサブメニューアイテムのスタイルと書式を調整します。
- 間隔:メニューアイテム間の縦方向の間隔、およびテキストとサブメニューの位置(px 単位)を調整します。
ヒント:
縦型メニューをページに固定すると、訪問者が上下にスクロールしてもフローティング状態を維持できます。
アンカーメニューをデザインする
要素設定パネルでプリセットを選択して、アンカーメニューに表示する内容を選択します。テキスト、ボタン、またはその 2つを組み合わせたプリセットを表示できます。1つのプリセットでは、訪問者が特定のエリアまでスクロールした際にアンカーの名前を表示することもできます。
次に、2つの別々の状態(「通常時」と「クリック」)のデザインをカスタマイズして、訪問者が現在表示しているアンカーを明確に示すことができます。
アンカーメニューをデザインする方法:
- アンカーメニューを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン をクリックします。
- 「デザイン」までスクロールダウンします。
- 上部でプリセットを選択します。
- 該当する状態(「通常時」または「クリック」)を選択します:
- 利用可能なオプションを使用してメニューをデザインします:
- 不透明度・色:メニュー / サブメニューの背景色を変更し、必要に応じて不透明度を調整します。デザインに矢印が含まれている場合は、ここから色を付けることができます。
- テキスト:メニューとサブメニューアイテムのスタイルと書式を調整します。
- 間隔:メニューアイテム間の縦方向の間隔、およびテキストとサブメニューの位置(px 単位)を調整します。
ハンバーガーメニューをデザインする
ハンバーガーメニューには、メニュー自体、コンテナ、メニューを開閉するアイコンなど、ニーズに合わせてデザインできる要素がいくつか含まれています。
ハンバーガーメニューをデザインする方法:
- ハンバーガーメニューを選択します。
- デザインするメニューの領域を選択します:
メニューアイコン
メニューコンテナ
実際のメニュー
「メニューを閉じる」ボタン
お役に立ちましたか?
|