オカベ皆さんサイトの作成をする場合、テンプレートから始める方が多いかと思います。そのままのデザインで思い通りに仕上がることもありますが、画像や文字を差し替えていく過程で、装飾はもっとメニューを目立たせたい、もう少しシンプルにしたいといった要望が出てくることもあるかと思います。そのままではやはりテンプレート感が拭えない仕上がりになってしまいがち。ホームページ制作サービス「BiNDup」のテンプレートでは、デザイン編集機能『Dress』を使ってデザインを設定しています。サンプルのテンプレートを例に、メニューやブロックのDressを使ったカスタマイズ方法を説明したいと思います。Care」をベースにカスタマイズ方法を紹介していきます。先ほど、テンプレートはデザイン編集機能『Dress』を使ってデザインを設定していますと書きましたが、どの部分にDressが設定されているのかというと・・下記をみれば一目瞭然。ほとんどがDressによる設定です。設定方法を知るには、実際に手を動かしてみるのが早道です。実際にDressを触りながらカスタマイズしていきたいと思います。今回は、カスタマイズ箇所の多いメニューと、印象を左右する画像やブロックに絞って解説します。「メニュー」のカスタマイズまずDressの編集画面に入り、プレビュー画面で該当の箇所をクリックすると画面右で設定項目がリストで表示されます。Care」は「メニューC」が設定されています。ここは、テンプレートによってメニューAであったり、ラインチェイサーなど、使用しているメニュー名が表示されます。青枠のリストのそれぞれの違いについては下記になります。Care」は「メニュー〇〇」部分が「メニューC」この中で上から4つ(1〜4)がデザインを整えるのに最低限必要な項目になります。テンプレートのデザインによって、それぞれの設定項目が適宜使い分けられています。今回は、下記2箇所を修正していきます。背景色などメニュー全体に設定したい項目は、こちらを使います。Care」のテンプレートでは、背景色と角丸が設定されています。好みの色に変えたい場合は背景色の設定画面から色を変えるだけ。背景をクリックした設定された背景色を見てみると、「サブカラー2」とありますね。これは、こちらのテンプレートでは、メニュー背景に「Dressカラー」の「サブカラー2」を使っているということです。Dressカラーとは、BiNDupでサイトと作成するときに、配色をサイト全体でコントロールできる機能です。事前にDressカラーを設定しておくほうが、変更がカンタンになり便利です。そのため、今回はDressカラーを変更し、メニュー背景の設定はそのままにしました。Dressカラーについて詳しくは別記事をご参照ください。装飾も変更してみます。全体の角丸をやめ、部分的に角丸に。下部に二重線の枠線を設定します。枠線は角丸と連動しますので、これだけでも特徴的な印象になったかと思います。続いてマウスオーバー時の設定も少し変更しましょう。こちらは元々は背景色が設定されていなかったので、新規で設定を追加。カラーは「サブカラー2」を設定しました。背景色を足すだけでも少し遊び心が追加されたかと思います。これでメニューのカスタマイズは完成しました。次にメニューのデザインに合わせて、角丸になっている画像とブロックの装飾を変更したいと思います。画像の表示方法をカスタマイズ画像については、メニューと同様Dress編集画面のプレビューで画像項目をクリックし、設定項目一覧の「画像の囲み>画像」を選択。こちらもメニューに合わせて角丸を部分的に残したデザインに修正します。このように他の要素(今回ではメニュー)の特徴を踏襲することでサイト全体のデザインがまとまりやすくなります。加えて枠線を新規で追加、単色の枠線では少し賑やかさが足りなかったので上下・左右でそれぞれ違う色にしました。「サブカラー1」・「サブカラー2」を設定していますが、そのままだと色が強すぎたので半透明にしたのがポイントです。ブロックのデザインを揃えるブロックのデザインもメニューに合わせて変更しましょう。こちらの角丸は、サイト全体の設定を行うサイトDressではなく、特定のブロックだけに設定できる「ブロックDress」で設定されていたので、そちらを編集します。ブロックDressの編集方法は該当ブロックの編集画面(ブロックエディタ)から「編集」→「ブロックデザイン」でDressの編集画面を開きます。あとは通常のDressの手順と同じです。画像に合わせて角丸を調整しましょう。これだけでも良いのですが、さらに少し強調するために軽〜くシャドウを追加してみました。シャドウは「サブカラー5」を15%で設定しています。シャドウというと「黒色」で設定しがちですが配色によっては汚く見えてしまいますので、調和の取れた色で設定することをお勧めします。そのためにも、サイトをデザインする時は最初のDressカラーの設定が重要になってくるのです。カスタマイズ後のサイトをチェックこちらがカスタマイズ後のサイトになります。修正した点といえば、色味と角丸くらいなのですが、かなり雰囲気が変わったのではないでしょうか。上記のサイトは配布しますので、実際のサイトデータを確認してみてください。元のテンプレートと見比べると、どう設定を変更したのかが分かりやすいと思います。Care(シングルページ)サイトデータは2019年10月1日にアップデートした最新のBiNDup環境でお使い頂けます。※サイトデータのダウンロードにはログインが必要です。CAMPで最も読まれた記事は?コンセプト。