有紀ホームページ制作サービスBiNDupを使ってメガメニューの作り方を解説します。前回はブロックテンプレートを使って簡単に作る方法を紹介しました。今回は、そのメガメニューをブラッシュアップしていこうと思います。背景色と文字色をDressを使ってカスタマイズします。ブロックエディタに戻って、テンプレートのレイアウトを手動で変更する方法も併せて紹介します。前回のおさらいと今回やりたいこと前回までの振り返りとして、まずは簡単に作る方法=テンプレートを用いた作り方を簡単におさらいしましょう。始めに「メガメニュー」のブロックテンプレートを選択して、Webサイトにメガメニューを追加しました。次に、既存のメガメニューをお手本に、ブロックエディタで内容を編集しました。詳しくは記事を確認してくださいね。今回は、テンプレートの背景色をDressを使ってアレンジする方法をご紹介します。今回デザインの参考にしている「プーマの公式サイト」に近づけてみましょう。メガメニューの内容を独自のレイアウトに変更する方法も、もう少し詳しく解説しようと思います。プーマ公式オンラインストアhttps://jp.puma.com/お手本となるメガメニューが、こちらです。このメニューのレイアウトに近づけるようにカスタマイズします。前回は、ブロックエディタでここまで編集しました。今回は、Dressを使って背景の色を変更します。Dressでメガメニューの背景色を変更するお手本に倣って、背景色を白に変更します。ブロックエディタの[設定]タブで、Dressテーマを「White」に設定しても背景は白にできますが、リンクの文字色も変更する必要があるので、ここではDressを使って変更します。「デザイン編集」を選択してDressを起動する編集したいブロック(ここではヘッダ)があるページを表示し、[デザイン編集]をクリックします。>下層コンテンツ]をクリックします。必要な項目を入力する[背景色]にチェックを付けて、現在設定されている[サブカラー5]をクリックします。カラーパレットが表示されたら、Dressカラーから白を選択し、[適用]をクリックします。背景が白に変更されました。テキストが見えなくなってしまいました。元の背景の黒に合わせて、文字色が白に設定されていたためです。[完了]をクリックして背景の設定を確定してから、前の画面に戻ります。リンクの文字色を変更する背景に溶け込んで見えなくなってしまった文字の色を変更します。メニューの性質上、このメニュー上のほとんどの文字列はリンクが適用されています。そこで、リンクの文字色を変更する必要があります。>ブロック>下層コンテンツ>リンク]をクリックします。文字色を変更する文字色の右側の[サブカラー4]をクリックします。この「サブカラー4」などのカラーの表示は、適用中のDressによって異なります。カラーを選択するカラーパレットで、変更する色(ここでは黒)を選択して、[完了]をクリックします。ブラウザで確認するメガメニューの背景色と文字色が変更されました。黒い背景に埋もれていたバー(区切り線)も背景色を変えたことで可視化されました。お手本にだいぶ近づいたのではないでしょうか。特徴は、比較的広いスペースを使って深い階層のリンクを一覧できる点に加えて、メニュー以外のコンテンツを掲載することもできる自由度の高さと言えます。アクセス情報を掲載してみましょう。編集を始める前に、スタイルがメガメニューのどこに対応するかを図を使って確認します。このルールを覚えてしまうと、通常のブロックと同じようにメガメニューの編集ができるようになりますよ。ブロック内は「エディタモード」で編集します。各パーツは、ブロックエディタで設定するスタイルに対応しています。スタイルを[タイトル]に指定した文字列は、メガメニューでは、一番上の階層の「タブ」になります。カラムに区切るには、カラムで分けたい箇所に分割線を挿入します。カラムの数を増やしたり減らしたりしたいときは、分割線で調整します。編集するブロックをブロックエディタで開くメガメニューのブロックをブロックエディタで開きます。ここでは、[ACCESS]タブの内容を書き換えたいので、タイトル[ACCESS]に移動します。本文を入力するテンプレートの不要な部分を削除して本文を入力します。[ACCESS]タブは2カラムにしたいので、分割線を1つ配置します。分割線の下にカーソルを挿入して[ウェブサービス系パーツ]の[Googleマップ]をクリックします。SYNCでマップを追加するSYNCが起動したら、追加するマップの種類を選択します。表示させたい場所を検索し、幅や高さなどを調整します。幅は、メガメニューのカラム幅を基準に比率で設定します。設定の内容を確認したら[適用]で完了です。編集内容を適用するブロックエディタに戻り、[Googleマップ]のアイコンが表示されていることを確認して、[適用]→[閉じる]の順にクリックします。ブラウザで確認するウェブブラウザでプレビューしてみましょう。[ACCESS]タブを開いてみると、2カラムのレイアウトや地図が反映されたことがわかります。カスタマイズのポイントメガメニューの文字や背景、区切り線などパーツのデザインをカスタマイズしたいときは、Dressを使います。掲載するテキストや画像、バナーといったコンテンツ内容と、カラムを使ったレイアウトは、ブロックエディタで編集します。いずれにしても、どこをどのようにカスタマイズしたいのか、今どの部分を編集しているかを意識しながら作業していくといいでしょう。CAMPで最も読まれた記事は?コンセプト。