こんにちは。とむじぃです。
スマホで右上辺りに出るハンバーガーみたいなmenuマーク。
Responsive Menuと言うそうです。
という訳で簡単な実装の方法。
スポンサーリンク
便利なプラグイン
WordPressの編集メニューから左下のプラグインを選択。
初期はAkismet, Hello Dolly, SiteGuard WP Plugin, WP Multibyte Patchが
表示されている状態だと思います。
新規追加を選択します。
プラグインの検索にResponsive Menuと入力して検索。
WP Responsive Menuというプラグインもありますが、
今回は赤い四角に白い３本線のアイコンの今すぐインストールを選択します。
インストールが完了しました。
という文章の下のプラグインを有効化を選択。
編集メニューから外観を選択。
カスタマイズを選択。
左下のパソコンマーク、タブレットマーク、スマホマーク。
試しにスマホマークを選択します。
どうでしょう？右上にハンバーガーが出現しましたか？
自分の使い易い様にカスタマイズ
初期設定ではボタンの色は黒だったり、左からスライドしてきたりとなっていますが、
簡単に設定を変更出来ます。
編集画面メニューの左下にあるResponsive Menuという項目をクリックします。
英語で書かれた画面が出てくると思いますが、[Button]の中の設定を変更していきます。
主なものとしては
・Animation
メニューボタンの動きに関する項目
・Location
メニューボタンの表示位置に関する項目
・Container Sizing
メニューボタンの表示サイズに関する項目
・Hamburger Sizing
メニュー内部のハンバーガーの表示サイズに関する項目
・Background Colours
メニューボタンの表示色に関する項目
を変更し、下部のUpdate Optionsをクリックすると反映します。
自分の好きな色やサイズに変更してみて下さい♪
以上、とても簡単なResponsive Menuの実装方法でした。
スポンサーリンク
コメント