ShiftNav プラグインでスマホ用メニューを作る

背景

WordPressでレスポンシブル(画面のサイズによって表示を変更する)サイトを作っている際、問題になるのがスマホの画面でのメニュー表示です。
テーマによってはメニューが表示されるものもありますが、中には画面の一番下までスクロールしないと過去の記事を読めないものがあります。

そんなときに、ShiftNavというプラグインを見つけました。
こちらは、インストールするだけでタイトルバーと左上におなじみのハンバーガーメニュー(最近、ユーザフレンドリーでないと話題になっていますが…)が表示されます。

左が導入前、右が導入後。

メニューを開く。

カスタマイズ

さて、このプラグインの良いところはカスタマイズができるところです。 ダッシュボード > 外観 > ShiftNav から設定を変更することができます。
僕の場合は、タイトルバーは不要と思ったので、 Toggle Bar タブの「Hamburger button only」にチェックを入れ、「Toggle Breakpoint(画面の横幅が何pxを下回ったら ShiftNavを表示するか)」 を710px に設定しました。

投稿者: amasuda

都内で働く新米 IT エンジニア。いかに楽して生活できるかを真剣に取り組む。 夢は人工知能が生活基盤を支え、生活コストのかからない社会の実現。 座右の銘は「なにごとにもこだわらない」github: https://github.com/Go-zen-chu 趣味 :Ukulele / Guitar / Traveling / Photo / Reading books / Bouldering 技術的興味:Artificial Intelligence / Machine Learning / Data Mining / PaaS / Cloud Foundry 言語: Python3 / Go / JavaScript / C# / C++ / Java / PHP / VBA / Ruby

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA