コーディングスマートフォンに多い「ドロワーメニュー」プラグイン等は使わずに、簡単なJSを書いて設置する方法をご紹介します。実際にこのブログに設置しているドロワーメニューをそのまま載せます。ご利用の際はCSS等アレンジしてみてください。スクリプトを設置JQueryを読み込みます。本体をダウンロードして使うのならこんな感じでgoogleがホストしているものを読み込むなら下記を書きます。JQueryの読み込み方はこちら続けてJSを記載します。当ブログではfooterに設置しました。bodyタグの閉じる直前なんかが、よろしいかと。});});このブログはワードプレスで運営しているのですが、ここで気をつけるポイントがあります。ワードプレスは上記のようなスクリプトを書く際に、「$」では読み込むことができません。最初の「$」を「jQuery」に変更して、下記のように書き直しましょう。});});HTMLとCSSを設置ボタンを画面の右上に設置。ドロワーメニューが画面右から現れるパターンです。メニューを閉じるアイコンMENU1MENU2MENU3MENU4MENU5CSSはこんな感じにしています。#ccc;}//右から出てくるメニューボックス。z-indexでメニューボタンの上に持ってきましょう。center;}//閉じるボタンを設置。z-indexを最強にしておかないと隠れちゃいます。メニューを「開く」のボタンは画像で作っても良いですが、今回は下記WEBフォント使いました。「閉じる」は普通に全角の「×」です。そのためfont-size等の指定がありますが、画像を用意するのであれば不要です。Awesomehoverで色変えれたり、解像度損なわないのでPCスマホ関係なく綺麗に表示されるので。風邪で完璧にダウンしたシルバーウィーク。