メガメニューのアレンジ｜文字や色、レイアウトを編集する方法

ホームページ制作サービスBiNDupを使ってメガメニューの作り方を解説します。
前回はブロックテンプレートを使って簡単に作る方法を紹介しました。今回は、そのメガメニューをブラッシュアップしていこうと思います。具体的には、メガメニュー の背景色と文字色をDressを使ってカスタマイズします。さらに、ブロックエディタに戻って、テンプレートのレイアウトを手動で変更する方法も併せて紹介します。

動画でわかる、メガメニューの作り方

メガメニューの作り方をYouTube動画でも紹介しています。ぜひあわせてチェックしてみてくださいね。

前回のおさらいと今回やりたいこと

前回までの振り返りとして、まずは簡単に作る方法＝テンプレートを用いた作り方を簡単におさらいしましょう。始めに「メガメニュー」のブロックテンプレートを選択して、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カラムのレイアウトや地図が反映されたことがわかります。

カスタマイズのポイント

メガメニューの文字や背景、区切り線などパーツのデザインをカスタマイズしたいときは、BiNDupのデザイン管理機能「Dress」を使います。掲載するテキストや画像、バナーといったコンテンツ内容と、カラムを使ったレイアウトは、ブロックエディタで編集します。
いずれにしても、どこをどのようにカスタマイズしたいのか、今どの部分を編集しているかを意識しながら作業していくといいでしょう。

→自作のサイト運用に最適なノーコードCMS「BiNDup」を30日無料体験する

BiNDupで無料でサイトを作る
BiNDの制作事例を見る