閲覧者を意識して作られている人気サイトは、グローバルメニューもよく考えられており、自社のアピールポイントや見せたいコンテンツへ誘導するためのさまざまな工夫が施されています。
ホームページ制作サービスのBiNDupのメニューはデザイン編集機能「Dress」でCSSを自由に変更できるので、サイトの目的にあわせてさまざまなカスタマイズができます。過去も幾つかメニューのデザイン方法について紹介してきました。
https://bindup.jp/camp/bind/25392
原型がわからないほど細かくカスタマイズすることもできますが、メニューの場合は文字色やサイズなど以下の項目を変更したいという要望が大半でしょう。
今回は、メニューの基本的な構成と思い通りのメニューにするための設定エリアの探し方を改めて説明したいと思います。
Dressで変更可能なメニューの主な項目
- 文字色の変更
- 文字サイズの変更
- 装飾の変更
- 行の高さの変更
- 背景色の変更
知っておきたいメニューの基本構成
Dressで設定を始める前に、メニューの構成について簡単にでも把握しておくとより理解が深まると思います。
基本的には下記表のようにメニュー自体が構成されており、まずはメニューの種類を選び、次にメニュー項目の設定をしていきます。
| Dress項目 | 選択肢 |
|---|---|
| メニュー全体の設定 メニュー |
メニューA／縦並び メニューB／縦並び メニューC／縦並び メニューD／縦並び メニューE／縦並び ドロップダウン・バルーン ラバランプ ラインチェイサー サイド・シズル サイド・ボタン |
| メニュー項目の共通設定 リスト・テーブル・メニュー項目 |
リスト項目＜li＞ |
| 各メニュー項目の設定 リンク |
リンク リンク：マウスオーバー リンク：訪問済み※１ リンク：選択中※１ 現在地 リンクなし |
※１：リンクとマウスオーバーが設定されていれば、必ずしも設定しなくても良い
Dress上での表記
メニュー毎に下記のような組み合わせて、設定していくことになります。
- メニュー〇〇：メニュー全体の設定
- メニュー〇〇＞リスト項目：メニューの項目に関する全体設定
- メニュー〇〇＞リスト項目＞リンク：メニュー内のリンクの設定
- メニュー〇〇＞リスト項目＞リンク：マウスオーバー：メニュー内のリンクがマウスオーバーした時の設定
- メニュー〇〇＞リスト項目＞現在地：メニュー内に現在表示しているページのリンクがある場合の設定
- メニュー〇〇＞リスト項目＞リンクなし：メニューの項目であるがリンクがない場合の設定
メニュー〇〇の部分は、メニューAやラインチェイサーなど
この中で上から４つ（１〜４）までがデザインを整えるのに最低限必要な項目になります。
設定箇所を選ぶための2つの方法
Dressを設定するには、変更箇所を選択する必要がありますが、それには２つの方法があります。
方法①：該当箇所をクリックして編集
Dress編集画面のプレビュー画面上で、該当の箇所をクリックすると画面右で設定項目がリストで表示されます。
実際に使用しているメニューを変更したい場合は、こちらがスムーズで便利です。
このメニューでは「メニューC」が設定されています
方法②：自分で選択して編集
自分で設定箇所を選ぶ場合には、Dress画面上部の「詳細設定」から「＋」ボタンで項目を追加していきます。
新規で設定をする場合にはこちらの方法になります。
そして項目一覧からメニューを開き、目的の項目を選んでいきます。
メニューの設定を変更する組み合わせ例の紹介
試しに、メニューのアレンジでよく使われる文字と背景の設定方法を紹介したいと思います。
文字のデザインを変更する
文字色を変更する
方法①、②のどちらからでも構いませんが、
メニューのリスト項目を変更したい場合は下記の項目を、
- メニュー〇〇＞リスト項目
リンクの文字色を変更したい場合は、下記の項目を選択します。
- メニュー〇〇＞リスト項目＞リンク
それぞれ［文字色］をクリックし、数値入力やカラーパレットから好みの色を選ぶだけで設定が完了です。
文字サイズを変更する
文字色以外にも、文字サイズ、装飾、行の高さなども変更ができます。
［文字サイズ］をクリックすると設定画面が開くので任意の数を入力しましょう。
文字サイズを修正した場合。サイズによっては余白などの調整も必要になります。
文字の装飾を変更する
同様に、［装飾］［行の高さ］をクリックするとそれぞれ設定できる項目が入った設定画面が開くので、設定しましょう。
装飾では、［文字の太さ］［斜体］［ライン］［シャドウ］などが設定できます。
マウスオーバー時のデザインを設定する
なお、マウスオーバー時の設定をしたいときには、
- メニュー〇〇＞リスト項目＞リンク：マウスオーバー
を選択した状態で上記と同じように設定するだけです。
背景色を変更する
文字の背景は「メニュー全体」を変更全体の設定の場合には、下記の項目だけで大丈夫です。
- メニュー〇〇
メニュー全体の背景色を変える場合は、「背景色」で色を選ぶだけで設定が完了です。
【アレンジ】メニュー項目の背景色を部分的に変更する
今までは各メニュー共通の設定でしたが、二つ目の設定項目を変えるだけでちょっと変わった表現になります。
- メニュー〇〇＞リスト項目（奇数番目）＞リンク
奇数番目のメニューだけ背景色が変化
上記では文字スタイルでできるアレンジをご紹介しましたが、このほか段落スタイルではフォントや文字間隔を変更することも可能です。
一見難しいような気がしますが、メニューの基本的な構造を理解すれば自由にDressで変更できるようになりますので色々お試しくださいね。
