スマホで閲覧しやすくするため、WP Responsive Menuでレスポンシブメニューを追加する。
まず、WP Responsive Menuのインストール手順。
- ［ダッシュボード］－［プラグイン］－［新規追加］で「プラグインを追加」画面を開く。
- 右上の「プラグインの検索」に「WP Responsive Menu」と入力。
- 「WP Responsive Menu」の［今すぐインストール］をクリック。
- ［有効化］をクリック。
次に、WP Responsive Menuで表示するメニューを作成する。
- ［ダッシュボード］－［外観］－［メニュー］で「メニュー」画面を開く。
- 右上の［表示オプション］をクリックして、表示されるチェックボックス全部にチェックを入れておく。
- 「メニュー名」テキストボックスにメニュー名を入力する。今回は「smartphone_menu」とした。
- ［メニューを作成］をクリック。
- メニューの先頭に本ブログの投稿「プロフィール」と「飛行記録」へのリンクを入れるため、「メニュー項目を追加」の［投稿］をクリック。
- ［検索］をクリックし、「プロフィール」を検索し、チェックボックスを選択して［メニューに追加］をクリック。
- 同様に「飛行記録」も追加。
- 次にカテゴリーのリンクをメニューに追加する。［カテゴリー］をクリック。
- ［すべて表示］をクリック。
- ［すべて選択］を選択後、［プロフィール］と［未分類］を解除。
- ［メニューに追加］をクリック。
- 右下の［メニューを保存］をクリック。
作成したメニューを元に、WP Responsive Menuでレスポンシブメニューを作成する。
- ［ダッシュボード］－［WPR Menu］－［WPR Menu］をクリック。
- 以下のように設定する。
［General］タブ
Select Menu：smartphone_menu（背景色が緑色になっていないと選択されていないので注意）
Menu Title Text：over the sky
［Appearance］タブ
Menu Icon Direction：Right
Menu Open Direction：Right
Menu Item Text Style：None
Menu elements position：Search→Menu→Social
［Color］タブ
Menu Bar Background：#0f0f0f
Menu Bar Text Color：#ffffff
Menu Container background：#ffffff
Menu Item Text：#0f0f0f
Menu Item Hover Background：#cccccc
Active Menu Item Background：#cccccc
Menu Icon Color：#ffffff - ［SAVE SETTINGS］をクリック。