メニューのデザインが自作できる！設定方法を解説

皆さんサイトの作成をする場合、テンプレートから始める方が多いかと思います。
そのままのデザインで思い通りに仕上がることもありますが、画像や文字を差し替えていく過程で、装飾はもっとメニューを目立たせたい、もう少しシンプルにしたいといった要望が出てくることもあるかと思います。また、そのままではやはりテンプレート感が拭えない仕上がりになってしまいがち。
ホームページ制作サービス「BiNDup」のテンプレートでは、デザイン編集機能『Dress』を使ってデザインを設定しています。サンプルのテンプレートを例に、メニューやブロックのDressを使ったカスタマイズ方法を説明したいと思います。

Dressでカスタマイズできる箇所

今回は人気テンプレートの１つ「AQUA Skin Care」をベースにカスタマイズ方法を紹介していきます。
先ほど、テンプレートはデザイン編集機能『Dress』を使ってデザインを設定していますと書きましたが、どの部分にDressが設定されているのかというと・・下記をみれば一目瞭然。ほとんどがDressによる設定です。

主なDressの設定箇所

• 色（文字色・背景色など）
• メニュー※
• 文字装飾（Webフォント・サイズなど）
• ブロック装飾（枠線・余白・シャドウ・角丸など）

※ボタンは別設定（リンクボタン）の場合が多い

メニューとブロックの装飾を変更

設定方法を知るには、実際に手を動かしてみるのが早道です。実際にDressを触りながらカスタマイズしていきたいと思います。
今回は、カスタマイズ箇所の多いメニューと、印象を左右する画像やブロックに絞って解説します。

「メニュー」のカスタマイズ

まずDressの編集画面に入り、プレビュー画面で該当の箇所をクリックすると画面右で設定項目がリストで表示されます。

今回のテンプレート「AQUA Skin Care」は「メニューC」が設定されています。
ここは、テンプレートによってメニューAであったり、ラインチェイサーなど、使用しているメニュー名が表示されます。

青枠のリストのそれぞれの違いについては下記になります。

1. メニュー〇〇：メニュー全体の設定
2. メニュー〇〇＞リスト項目：メニューの項目に関する全体設定
3. メニュー〇〇＞リスト項目＞リンク：メニュー内のリンクの設定
4. メニュー〇〇＞リスト項目＞リンク：マウスオーバー：メニュー内のリンクがマウスオーバーした時の設定
5. メニュー〇〇＞リスト項目＞現在地：メニュー内に現在表示しているページのリンクがある場合の設定
6. メニュー〇〇＞リスト項目＞リンクなし：メニューの項目であるがリンクがない場合の設定

※「AQUA Skin Care」は「メニュー〇〇」部分が「メニューC」

この中で上から４つ（１〜４）がデザインを整えるのに最低限必要な項目になります。
テンプレートのデザインによって、それぞれの設定項目が適宜使い分けられています。
なお今回は、下記２箇所を修正していきます。

好きな色と形にメニューを変更

「メニュー〇〇」：「背景」

背景色などメニュー全体に設定したい項目は、こちらを使います。
実際に「AQUA Skin Care」のテンプレートでは、背景色と角丸が設定されています。
例えば好みの色に変えたい場合は背景色の設定画面から色を変えるだけ。

ですが、背景をクリックした設定された背景色を見てみると、「サブカラー２」とありますね。
これは、こちらのテンプレートでは、メニュー背景に「Dressカラー」の「サブカラー２」を使っているということです。

Dressカラーとは、BiNDupでサイトと作成するときに、配色をサイト全体でコントロールできる機能です。
事前にDressカラーを設定しておくほうが、変更がカンタンになり便利です。
そのため、今回はDressカラーを変更し、メニュー背景の設定はそのままにしました。
Dressカラーについて詳しくは別記事をご参照ください。

「メニュー〇〇」：「角丸」

少し装飾も変更してみます。
全体の角丸をやめ、部分的に角丸に。また下部に二重線の枠線を設定します。枠線は角丸と連動しますので、これだけでも特徴的な印象になったかと思います。

背景色を加えてメニューを押しやすく

メニュー〇〇＞リスト項目＞リンク：マウスオーバー

続いてマウスオーバー時の設定も少し変更しましょう。
こちらは元々は背景色が設定されていなかったので、新規で設定を追加。カラーは「サブカラー２」を設定しました。

背景色を足すだけでも少し遊び心が追加されたかと思います。
これでメニューのカスタマイズは完成しました。

「画像」「ブロック」をメニューに合わせて変更

次にメニューのデザインに合わせて、角丸になっている画像とブロックの装飾を変更したいと思います。

画像の表示方法をカスタマイズ

画像については、メニューと同様Dress編集画面のプレビューで画像項目をクリックし、設定項目一覧の「画像の囲み＞画像」を選択。
こちらもメニューに合わせて角丸を部分的に残したデザインに修正します。
このように他の要素（今回ではメニュー）の特徴を踏襲することでサイト全体のデザインがまとまりやすくなります。

加えて枠線を新規で追加、単色の枠線では少し賑やかさが足りなかったので上下・左右でそれぞれ違う色にしました。「サブカラー１」・「サブカラー２」を設定していますが、そのままだと色が強すぎたので半透明にしたのがポイントです。

ブロックのデザインを揃える

ブロックのデザインもメニューに合わせて変更しましょう。
こちらの角丸は、サイト全体の設定を行うサイトDressではなく、特定のブロックだけに設定できる「ブロックDress」で設定されていたので、そちらを編集します。ブロックDressの編集方法は該当ブロックの編集画面（ブロックエディタ）から「編集」→「ブロックデザイン」でDressの編集画面を開きます。あとは通常のDressの手順と同じです。
早速まずは画像に合わせて角丸を調整しましょう。

これだけでも良いのですが、さらに少し強調するために軽〜くシャドウを追加してみました。シャドウは「サブカラー５」を15%で設定しています。
シャドウというと「黒色」で設定しがちですが配色によっては汚く見えてしまいますので、調和の取れた色で設定することをお勧めします。そのためにも、サイトをデザインする時は最初のDressカラーの設定が重要になってくるのです。

カスタマイズ後のサイトをチェック

こちらがカスタマイズ後のサイトになります。
修正した点といえば、色味と角丸くらいなのですが、かなり雰囲気が変わったのではないでしょうか。

上記のサイトは配布しますので、実際のサイトデータを確認してみてください。
元のテンプレートと見比べると、どう設定を変更したのかが分かりやすいと思います。
AQUA Skin Care（シングルページ）