shuttoのデフォルトの機能であるメニューのデザインを変更したいと思ったことはありませんか？
shuttoのデフォルトデザインはこれです
一般的に、よく三本線のアイコンで示され、その形がハンバーガーに似ていることから「ハンバーガーメニュー」と言われていたりします。
shuttoでは、この「MENU」のデザインをいともカンタンにオリジナルデザインに変更することができます。
完成形のイメージはこちら
おなじみのデザインですね！
早速、やり方は以下の通りです。
1. shutto編集画面で「メニューボタン」を表示
2. 「MENU」のラベル表記を削除
「MENU」ラベル表記を削除しますが、この「MENU」のラベルを削除しても、表記を完全に削除することができません。完全に削除したい場合は、ラベル削除後、半角スペースを挿入してください。
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で色々なカスタマイズをしてお楽しみください！
