このサイトについて

WP Responsive Menu – スマホ対応のレスポンシブメニューを追加する、WordPressプラグインはこれで決まり!

ぺんです。

サイトを運営する上で、スマホ対応はとても重要です。
その意味では、小さな画面でも迷わないように、分かりやすいナビゲーションメニューを提供することは重要ですね。

今回は、スマホ対応のレスポンシブメニューを追加する、WordPressプラグイン「WP Responsive Menu」をご紹介します。

目次

WP Responsive Menuの特徴

今回、このWP Responsive Menuを見つけるまでに、いろいろなプラグインを試してみました。
その際に重視したポイントは以下の通りです。
WP Responsive Menuは、無料バージョンでも実に様々な機能を提供してくれます。

メニューの表示位置など、簡単にカスタマイズが行える

WP Responsive Menuの設定画面です。メニューの表示位置や背景画像など細かい設定が可能です。
より細かい設定は、有料のProバージョンで!という話なのですが、個人的には無料バージョンで十分に満足してしまいました。

WP Responsive Menuの設定画面

表示するメニューを選択する

(1)と記載のあるアイコンに、サイトに登録されているメニューが表示されます。これをクリックしないとメニューが表示されないので注意。

メニュー表示時に、非表示とする要素を指定する

WP Responsibl Menuを表示した際に、ワードプレステーマで用意されているメニューを非表示にしないと、モバイル画面にメニューが2つ表示されてしまいます。

その場合は、(2)と記載のある個所にCSSクラス指定をすると、そのCSSクラスの要素が非表示となります。画面の例は、このブログでも利用していたTDC MAGの例です。

無料バージョンでもメニューのアニメーションに対応

これも、本日10月29日の、バージョン: 3.0.2 で対応してくれました! それ以前は、無料バージョンでは、ハンバーガーメニューをクリックしても、アニメーションが無かったので、少々華やかさに欠けていました。

[box02 title=”ハンバーガーメニューとは?”]
ハンバーガーメニューとは、スマホアプリやモバイルウェブ画面でおなじみの、画面右上や左上に表示される、三本線のアイコンです。よく、CSSでアニメーション表示されることが多いですね。
ハンバーガーメニュー
この三本線が、ハンバーガーの様に見えることから、名づけられたようです。(諸説あります)
ハンバーガー
[/box02]

無料バージョンでもメニューの背景に画像を貼れる

他のツールも調べていたのですが、無料版でメニュー部分に背景画像を貼れるツールは見つかっていませんでした。これも今回のアップデートでサポートされました!

まとめ

いかがでしたか?

今回ご紹介したWP Responsive Menuプラグインは、無料バージョンでも美しいメニューを簡単に追加できます。

 

にほんブログ村 IT技術ブログ WordPressへ

この記事が気に入ったら
フォローしてね!

よかったらシェアをお願いします!

コメント

コメントする

CAPTCHA


目次
閉じる