機械学習・ディープラーニングがゼロから学べる大人気『脱ブラ』が無料に!

【STUDIO】ハンバーガーメニューをモバイル画面で表示させる方法

こんにちは。認定クリエイターの martina. です!
みなさん STUDIO 使っていますか?
実は STUDIO では web サイトを作成すると、パソコン以外のタブレットやスマートフォン用の web サイトも同時に作られています。

STUDIO ハンバーガーメニュー

何も選択していない状態で、上の基準やタブレット、モバイルをクリックすると、それぞれのデバイスにレスポンシブ対応された web デザインが表示されます。
しかし、ヘッダーが長すぎると、モバイルでは表示が崩れてしまいます。

この問題を解決するために、今回はモバイル向けにハンバーガーメニューを解説します。ハンバーガーメニューとは、スマホ向けのヘッダーによく使われている下図のようなメニューのことです。

ハンバーガーメニュー

では早速作っていきましょう!
ヘッダーの作り方は以下の記事を参考にしてくださいね!
【STUDIO】固定ヘッダーを作る方法

POINT
アドパネル内にある Header のテンプレートにはハンバーガーメニューがすでに作られているので、メニューをモーダルで表示しよう!まで飛ばしても大丈夫です。

ハンバーガーメニューをモバイル画面に表示させる方法

ハンバーガーメニューをモバイル画面に表示させる手順
  1. ハンバーガーアイコンを設定
  2. アイコンをモバイルだけで表示
この項目は上記の流れで解説します。

1. ハンバーガーアイコンを設定

STUDIO アイコン

まず、ハンバーガーメニューを作るために、アイコンをドラッグアンドドロップでヘッダー内にもってきます。
そして、アイコンをダブルクリックして、左側のアドパネルが開いたら、ハンバーガーメニューのようなアイコンをクリックして設定しましょう。

POINT
アイコンが小さすぎて、ダブルクリックしてもアドパネルが開かない場合は、 ctrl + マウスホイールで拡大してダブルクリックするといいです。GIFでは適度に大きくしてダブルクリックしていますが、ボックスのサイズが変わるのでよくないです・・・

2. アイコンをモバイルだけで表示

STUDIO レスポンシブ対応

アイコンが選択されている状態で、左上の表示という目のマークにマウスを持っていきます。今回モバイルのみハンバーガーメニューを表示したいので、基準とタブレットのチェックを外します。
そうすると、モバイルだけでこのアイコンを表示することができます!簡単ですね。

STUDIO レスポンシブ対応

今度はヘッダーの項目をモバイルでは表示させないようにしましょう。
基準に戻って、右側の項目の入ったのボックスを選択して、モバイルのチェックを外しましょう。これで見た目は完成です!

メニューをモーダルで表示する方法

今度はハンバーガーメニューを押したときに表示されるメニューの中身を作っていきましょう。

メニューをモーダルで表示する手順
  1. モーダルページを作成
  2. ボックスを配置
  3. テキストを配置
  4. 各テキストのリンクを設定
  5. ハンバーガーメニューのリンクを設定
上記の流れで解説します。

1. モーダルページを作成

STUDIO モーダル

右上の追加を押して、新しいページを追加します。
このとき、モーダルを選択してください。白紙のページがでてきます。
この白い部分が、後ほどページの上(今回だとホットドッグのメインページの上)に表示されます。

2. ボックスを配置

STUDIO ボックス

そうしたらモーダルの大きさを整えて中にボックスをいれましょう。
このボックス内にヘッダーのメニューを作っていきます。

3. テキストを配置

STUDIO レイアウト

テキストをいれて、コピペでいくつか増やして、配置を変えてレイアウトができました。
あとは文を変えるのはもちろんですが、マージンを取って自分の好きな位置に置いたり、ボックスの色を変えたり、工夫してみてください!

4. 各テキストのリンクを設定

メニュー項目ができたら、各項目を選択して右側のパネルを開いて、リンク先のページを設定しましょう。まだ他のページを作ってない人は、作成後設定してくださいね

5. ハンバーガーメニューのリンクを設定

さきほどのメインページに戻って、今作ったモーダルが表示されるように、ハンバーガーアイコンのリンク先にモーダルのページを設定しましょう。

これで完成です!お疲れさまでした!

TIPS トランジションを設定する方法

モーダル画面でグレーの透過しているところをクリックすると、上のメニューに Transition という項目がでています。ここで、モーダルがどのようにでてくるかを設定することができます。
GIF ではわかりにくいかもしれませんが、上から出てきたり、フェードさせたりできるので、ぜひ使ってみてください。

まとめ

今回はモーダルという新しい機能に触れながらハンバーガーメニューを作成しました。
直感的な操作で、パソコンでもモバイルでも綺麗に表示されるので、すごいですよね!
スマホでも見れる web サイトなら大学の友達にも見てもらいやすいので、私的にはとても助かりました!
では、次の記事をお楽しみに!!