PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

ハンバーガーメニューをオリジナルデザインに変更する方法

2016年6月27日 | 森下 奈緒

シェアする

shuttoのデフォルトの機能であるメニューのデザインを変更したいと思ったことはありませんか?

shuttoのデフォルトデザインはこれです

一般的に、よく三本線のアイコンで示され、その形がハンバーガーに似ていることから「ハンバーガーメニュー」と言われていたりします。
shuttoでは、この「MENU」のデザインをいともカンタンにオリジナルデザインに変更することができます。

完成形のイメージはこちら

おなじみのデザインですね!
早速、やり方は以下の通りです。

1. shutto編集画面で「メニューボタン」を表示

2. 「MENU」のラベル表記を削除

「MENU」ラベル表記を削除しますが、この「MENU」のラベルを削除しても、表記を完全に削除することができません。完全に削除したい場合は、ラベル削除後、半角スペースを挿入してください。

3. メニュー用の画像データをアップロード

shutto編集画面から、背景として指定したい画像をアップロードし、アップロード画像のURLをコピーします。
今回は、こちらの画像をアップロードしました。

4. CSSで背景に画像を指定、枠のサイズを調整

「メニューボタン」の下にある「CSS入力」箇所で背景画像に先ほどアップロードした画像を指定し、枠の横幅と縦幅のサイズを調整します。添付では、枠の罫線も削除しています。

サンプルコードはこちら↓↓↓


@current {
    background:url("https://shutto.s3.amazonaws.com/uploads/7b9c945e1342abe9624d/hamburger.png")no-repeat;
    width:24px;
    height:20px;
    border:none;
}

5. 完成!カンタンにできました!!

編集画面

変換後画面

6. shutto制作事例募集中!

shuttoでは、既存機能にCSSを使ってちょっとしたカスタマイズを行うだけで、簡単にオリジナルデザインのスマートフォンサイトを作成することができます。
現在、shuttoを使ったスマートフォンサイト制作事例を絶賛募集中です。
オリジナルのデザインを作成されたら、shuttoの公式サイトに掲載し、無償で御社のご紹介をします。
是非、shuttoの制作事例を投稿しませんか?

shutto制作事例のご投稿はこちら

それでは、shuttoで色々なカスタマイズをしてお楽しみください!

スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1-9-4 蚕糸会館4階