WordPress

スマホメニューにおすすめ!WordPressプラグイン「Responsive Menu」

eyecatch-responsive-menu

どうも、(@nekonotesou)です。

スマホメニューの表示に、WordPressプラグイン「Responsive Menu」を導入してみました。

設定したのは、メニューボタンの表示位置と色を変更しただけです。

プラグインインストール後のスマホメニュー

responsive-menu-01

ヘッダーにハンバーガーメニューが表示されます。

 

responsive-menu-02

クリックすると、横からスッとメニューが表示されます。

「▼」ボタンをタップすると、サブメニューを展開します。

 

ダウンロードとインストール

プラグインの新規追加→「Responsive Menu」で検索。

もしくは、以下のページからダウンロードします。

Responsive Menu

 

メニューボタンを設定する

responsive-menu-03

「Look & Feel」のタブをクリックすると、ボタンの大きさ、表示位置、色などを変更できる項目が表示されます。

「Advanced Setting」タブでは、メニューをどの画面サイズで切り替えるか、ブレークポイントを変更可能です。

 

さいごに

このブログでは、無料テーマのSTINGER5を使用しています。

でも、一つだけ不満だったのが、スマホ表示のメニューがイマイチなこと。それがプラグイン一つで解消できました!今のスマホメニューに不満な方は、ぜひお試しを!

.hljs {
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
font-size: 13px;
display: block;
overflow-x: auto;
background: #2d2d2d;
color: #cccccc;
padding: 15px;
border-radius: 5px;
-webkit-text-size-adjust: none;
}
ABOUT ME
ねこのてそう
ねこのてそう
妻、娘、ネコと暮らす、超記憶力の悪い30代のオッサン。 好きな言葉は、死ぬこと以外、かすりキズ。 尊敬する人は絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 元2ちゃんねる管理人ひろゆきが好き。(趣味と思考が似てる) ニコニコ生放送の、暗黒リスナー歴9年。