思いついたらふわっと書く雑記ブログ

VanBlog

Wordpress

WordPressにスムーズなレスポンシブメニューをプラグインで追加する

投稿日:2018年7月5日 更新日:

WordPressでResponsive Menuというプラグインを使ったモバイル用レスポンシブメニューの追加方法と、その設定方法について説明する。

このプラグインを使えばスムーズなメニューを実装できるので、是非レスポンシブメニューの導入を考えている人は試してみてほしい。PRO版もあるが、無料版でも十分なクオリティだ。

デモ的なのは、本サイトをモバイルで見れば分かるので見たい人は触ってみてほしい。パソコンでアクセスしている人はブラウザを横方向に縮小すれば表示されるはず。

プラグインの導入

Responsive Menuを使うにはプラグインを導入しよう。

これをインストール。プロ版もあるけど無料版でも十分。ちなみに当サイトはプロ版。

 

無料版とプロ版の違い

無料版に加えて、プロ版では以下のことが可能

  • 画面上部に追従するヘッダーバー
  • タッチジェスチャー(スワイプでメニューを閉じるなど)
  • ボタンを押した時のアニメーション
  • ページスクロールでメニューを閉じる
  • 色の透明度変更
  • 変更のプレビュー

とかこんな感じの機能がプロ版オンリー。必要ないと思ったら無料版で全く問題ない。1サイト分の値段が$14.99なので、そんな高くもないと思うから気に入ったら購入しても良いかもね。複数のサイトを運営しているなら100サイトまで利用可能な$49.99のマルチライセンスがいい。

 

Responsive Menuの設定

さらっとそれぞれの設定。当サイトで触っていない設定については解説しないことにする。重要なのは大体触っている・・はず。

Initial Setup

Breakpoint

レスポンシブメニューを表示させるサイトの最大幅を入力。PCサイズでは非表示、それ以下では表示が望ましいかと。当サイトでは1057pxに設定。

Menu to use

どのメニューセットを使うか選ぶ。レスポンシブ専用のメニューを作っておいても良い。

 

Container

Sizing

Width: メニューを開いた時のメニュー幅をここで設定。画面に対して%で指定するのがオススメ。当サイトは70%

Background

コンテナの色を変更可能。クリックしてカラーピッカーを使って選ぶか、直接コードを入力する。

Title Text

Font Size: タイトルのテキストサイズを変更可能。

Animation

Appear From: どこからメニューが出てくるかの設定。好きなのを選ぼう。

Technical

  • Close on Page clicks
  • Close on Link clicks

両方ともON。メニューが表示されている状態でページ部分やリンクがクリックされたらメニューを閉じるというもの。

 

Menu

Styling

メニューのスタイル調整。

Font Size: フォントのサイズ

Item Height: メニュー1項目の高さ設定

Line Height: メニュー1項目のラインハイト

Text Alignment: テキストのアライン設定。左で良いかと。

Item Borders/Text/Background

メニューのボーダー設定、テキスト色、背景色設定など

Trigger Icon/Sizing/Colours/Background/Border

2階層目を開く時のトリガーについての設定

 

Submenu

基本的にはMenuの内容と変わらない。2階層目のメニュー設定。

 

Button

メニューを開くボタンの設定。

Animation

Type: 無料版では1つしか選べない

Location

Positioning: ボタンの位置。追従したければFixed、固定したければAbsolute

Side: 右か左か。当サイトは右。

Distance from Side/Top: ボタンの位置を設定。

Container Sizing

ボタンコンテナの高さと幅を設定。トライ&エラーで自分の気持ち良いサイズを探そう。

Line Sizing

ボタンの中にある3本線の高さ・幅・マージンについての設定。

Container Background/Line Colours

色の設定。

 

Technical

Scripts

Minify ScriptsPlace Scripts in Footerでサイト表示の高速化ができる。ただしきちんと動くかどうかなどテストした方が良い。

 

Advanced

Animation Speed

アニメーションの速さを秒数(s)で指定。

 

Header Bar

当サイトでオンにしている機能。一番上にバーが表示される。左上にホームぺージへのリンクも表示可能。

 

Desktop Menu

デスクトップ用のメニューも作成可能らしい。こちらは試したことないのでなんとも。

 

まとめ

モバイルで役立つレスポンシブメニューだが、テーマによっては付属していなかったり、あっても使いづらいものであったりする。

Affinger5にも最初からレスポンシブメニューはついてくるが、個人的には使いづらいと感じたので前から使っているプラグインを継続して使うことにした。

Responsive Menuはものすごく使いやすいしオシャレなプラグインなのでオススメ。

新着記事

2018/7/18

Amazonプライムデーセールを終えて。安くなったデバイスの値段リスト

2018年のアマゾンプライムデーセールが終わりましたね。 毎回新しく傘を買い直しているのですが、今年も例にもれず買いました。この前の台風でバキバキにやられたので。折れない傘が欲しい。 アマゾンデバイスもかなり安くなっていました。次回のプライムデーに向けて、割引率や値段はどんなものだったのか備忘録的に置いておこうと思います。 もくじアマゾンプライムデーとは?プライムデーのお得ポイントプライム会員になるか迷っている方へ100%カートでも諦めるな!2018年アマゾンデバイスの値段リストAmazon EchoFi ...

続きを読む

tablet_thumbnail

2018/7/17

そこの目が悪い諸君。iPhoneで漫画読むのやめてタブレット買った方がいいよ

iPhoneのKindleでめちゃくちゃ漫画を買っています。昔から漫画は大量に買う方だったのですが、スペース的に厳しくて電子書籍に移行しました。 携帯1つに漫画本が全部入っているので最高に便利なのですが、iPhoneの小さい画面(iPhone7)で漫画読み続けたせいか、悪い目がさらに悪化した気がしますね。 漫画の文字自体小さいので、漫画を読むなら大きめのタブレット購入が絶対オススメです。 Kindle Fire なんでKindleFireを推すのかっていうと、単純に安いから。 Kindleにはサイズが3種 ...

続きを読む

2018/7/17

0.015BTCから始めるBTCFX PART2

  狩られました。笑 ショートエントリーしてたところ、ロングにはねましたね。$10くらい上のところでストップ成行かけてたんですが、発動せず。そのままゼロカットと相成りました。 ヒゲキャッチ作戦が結構あたっていたんで、調子にのってショートナンピンし続けてたのが良くなかった。全部イカれました。 $10幅で損切りかけてたんで大丈夫かと思ってたら、サーバーがふっとんだのか全然ストップかかりませんでしたねー。恐ろしい。普通にその時板は見てたので手動で成行損切り発動しておけばよかった・・ 資金管理大事よ。 ...

続きを読む

2018/7/16

iPhoneでRAW撮影した写真データをパソコンへ移動する方法を3つ紹介

こんにちは。 iPhoneってRAW撮影できるの?マジ!?ってなったのがつい最近という情弱の私です。 一眼レフではもっぱらRAW撮影が基本になっていたので、iPhoneでのjpeg画像にイライラしておりましたがそれもついに終わりになりそうです。   私はパソコンのPhotoshopで編集する派なので、データをパソコンに移そうと思ったらデータ量が10MBオーバーとな・・メールじゃ無理ですね。 そこで、ここではRAW撮影した写真データをパソコンに移動する方法を紹介します。 RAW写真はJPEGでなく ...

続きを読む

2018/7/12

結婚式でかけたい人気の洋楽を集めました70選!

結婚式で流す曲目って、実は結構膨大なリストになるんですよね。1から探すとぶっちゃけかなり大変。 洋楽好きだからなるべく洋楽流したい、でもそんなに思いつかないよ!っていう人達のために、自身が選んだ曲も含めてオススメの曲を70曲紹介します! 聞いたことあるなという曲から、初めて聞くけどスゴイ良いじゃん!っていう曲まで。自分の結婚式にピッタリな曲がきっと見つかるはず! それでは前置きはこれくらいで。シンプルに紹介していきます。 結婚式に流したい洋楽70選 曲名リンクをクリックするとYoutubeへ飛びます。 ノ ...

続きを読む

ピックアップ

1

オフィスで使うために電源タップを探していたのだが、まぁタップにも色々種類があるようで。Amazonなんかで迷ったときのためにちょっとしたまと ...

2

大事なファイルはセキュリティ機能付きのUSBメモリに保存しておくのがオススメ。私は仮想通貨のパスワードを記載したエクセルファイルやウォレット ...

3

Youtubeで配信用や作業用に垂れ流せるオススメの音楽チャンネルを5つ紹介。どれも登録者数が多い人気チャンネルだ。 ちなみにそのまま流すと ...

4

iQOSの掃除、皆さんどうしていますか? 私は購入した時にタバコ屋の店員さんから教えてもらった通りにしています。掃除するとやっぱり吸い心地が ...

Copyright© VanBlog , 2018 All Rights Reserved.