1.　第18回　【WordPress】　プラグイン　Responsive Menu

環境：Debian 9　php 7.0　Apache 2.4.25　MySQL 5.7　Cocoon

目的：メニューボタンで階層を見やすく整理すること。

色々と「スライドインメニュー」表示できる「プラグイン」や「CSS」を調べて、試しました。結果として、私は、このプラグイン1択です。ただし、日本語化対応を全くされていないので、日本人があまり使っていないだけです。きっと。

利用しているテーマ「Cocoon」に「モバイル」でメニュー表示できる機能が最初から備わっています。専門的な機能の名称を知らないので、説明になっているかどうか怪しいですが、なんとなく見てもらえればと思います。

このプラグインの印象：
非常に更新が早く、有料版だった設定が無料版で利用できるようになっていたり、設定項目がどんどんと広がっていったりと、頻繁に変わっていきます。「いや、変わりすぎだ」。それに応じて、私の設定も頻繁に変わっています。

私は無料版で利用していますが、ものすごく使いやすいです。有料版にするとカスタマイズできる範囲が飛躍的に広がるので、このプラグインで有料版に切り替える人が多いのかと。だから、更新速度も機能も充実しているのだと感じます。

設定項目の説明は英語しかありませんので、日本人が説明しているものは殆ど見かけません。ですので、更新されたものは試すほかありません。その際には、必ずバックアップを。

「Cocoon」のメニュー表示、機能

• 最初からメニューに設定している「サブメニュー」までを全て表示できる。

• 標準で備わっている「モバイルフッターボタン」に統一してボタンを表示できる。
  
  表示にしても機能にしても、シンプルにまとまっています。
  
  それゆえ、カテゴリーなどが絞られた、しっかりと芯のあるWebサイトを運営している方は、こちらのほうが向いているのではないかと思います。
  

「Responsive Menu」のメニュー表示、機能

• 「Cocoon」のメニューと比較すると、最初からメニューに表示されているのは第1階層までです。設定しているサブメニューまでを全て表示させるのはクリックしないと表示されません。

• 当然のことながら「Cocoon」テーマ標準で備わっている「モバイルフッターボタン」に統一して表示することはできません。

• カテゴリーが多かったり、階層が深いところまであるような、私のWebサイトみたいな、ちょっとふわっとしている方には向いていると思います。

• 「アコーディオンのように伸び縮みさせて表示ができる。」ということが最大のメリットだと思います。
  

「Responsive Menu」を選んだ理由

一つの設定を変更した時点で確認

どの設定を変更するとどこが変わるのか、最初の頃は良くわかりません。一つずつ変更しながら、確認していくと理解が早くなると思います。

説明の書き方として、「直訳部分」と「解釈部分」とが混在します。そちらの方が分かりやすいはずなので。

1.1　「Responsive Menu」インストール

このプラグインを最初に導入したのは2019年12月です。インストール数の伸びが早く、評価が非常に高くなっています。この画面は2020年6月時点のものです。

• 「WordPress管理画面」「プラグイン」「新規追加」で「Responsive Menu」を検索します。
  
• 「今すぐインストール」をクリックして、次へ進みます。

• 

1.2　有効化

• 「有効化」をクリックして、次へ進みます。

• 

1.3　初期設定

• 「無料版」と「有料版」とがありますが、私は無料版を利用しているので、有料版の説明は書かないようにしています。が、すぐに有料版機能が無料になったりと随分忙しいプラグインです。

Breakpoint

This is the width of the screen in pixels at which point you would like the hamburger button to start showing.
Set to 80000 if you want the menu to appear on all devices.

• 「Initial Setup」タブで初期設定をします。

• ハンバーガーメニューの表示を開始する画面のピクセル単位です。

• すべてのデバイスで表示する場合は、80000に設定します。

• 

1.4　該当メニューの選択

Menu to Use

If no options appear here, make sure you have set them up under Appearance > Menus or click here.
Please note that the Theme Location option will take precedence over this.

• 「WordPress管理画面」「外観」「メニュー」で設定した「独自メニュー」を選択できます。
  
• 「テーマのオプションはこれよりも優先されることに注意してください。」と説明書きがありますが、「Cocoon」の場合では、「すべての独自メニュー」を設定することができます。
  
• 「Responsive Menu」用に「独自メニュー」を設定するには、次へ進みます。

• 

1.5　「WordPress」のメニュー設定画面

• 「WordPress管理画面」「外観」「メニュー」で「どこの場所に」「どんな独自メニュー」を表示するか設定できる画面です。
  
• この画面で設定した「独自メニュー」を「Responsive Menu」に設定できます。

• 

1.6　初期設定保存

• 「Update Options」で初期設定を保存します。

• 

1.7　コンテナ設定

• 「Container」タブをクリックして、コンテナ設定をします。

Order of Container Items

Drag the container items up and down to re-order how they appear on the front end. You can also click to turn them on or off.

• コンテナのアイテムはドラッグして上下に移動させることができます。

• Title：タイトルを「ON」「OFF」できます。

• Menu：「ON」にします。

• Search：「サイト内検索を」表示するかしないかは、好みです。

• Additional Content：私は上級者ではないので利用していません。

• 

1.8　メニューコンテナのサイズ

• 「Sizing」：メニューボタンを押した時にスライドインしてくるメニュー画面の大きさです。

• Width：横幅、無料版は「％」のみ設定できます。

• Maximum Width：最大幅、無料版は「ピクセル」のみ設定できます。

• Minimum Width：最小幅、設定する必要あるのか疑問です。

• 

1.9　「Maximum Width」

• モバイルでのスライドイン幅
  
• パソコンでのスライドイン幅

「％」と「ピクセル」で自分なりに調整するのが良いかと思います。

• 

1.10　コンテナの背景設定

Image：
Set a background image which covers the entire container.

Container Colour：
Set a background colour for the container that stretches the full height of the screen.

Inner Container Colour：
Set a background colour for the inner container that contains the menu, title, additional HTML, search etc.

• Image：
  コンテナの背景に自分の用意した画像をアップロードして設定できます。

• Container Colour：
  コンテナ全体を覆う背景画像を設定できます。

• Inner Container Colour：
  画面の高さいっぱいに広がるコンテナの背景色を設定できます。

• 

1.11　コンテナのタイトルテキスト

Font Size：
Specify a font size for the title

Text：
Set the title text to appear for the title section.

Text Alignment：
Set the alignment of the text for the title.

Link：
Specify a link for the title text to navigate to when clicked.

Link Target：
Determine how the title link opens when clicked on.

• 私は利用してません。

• フォントサイズ、テキスト、テキスト配置場所を設定できます。

• そのリンクテキストのリンク先の「URL」を設定できます。

• リンクをクリックされた時の動作を指定できます。「同一ページ」か「新しいタブ」で開くかなど。

• 

1.12　コンテナのタイトルの色

Background：
You can specify a separate background colour for the title section if you wish.

Background Hover：
Set the title section background colour when the mouse is rolled over it.

Text：
You can specify a separate text colour for the title section if you wish.

Text Hover：
Set the title section text colour when the mouse is rolled over it.

• 私は利用していません。

• 「背景の色」、「マウスホバーした時の背景の色」

• 「テキストの色」、「マウスホバーした時のテキストの色」

• 

タイトル画像設定

• 新しく機能が追加されていました。

Image：
Specify an image to show alongside the title.

Height：
Set a height for the title image.

Width：
Set a width for the title image.

Alt Text：
Specify the alt text used with the title image if selected.

• 私は利用していません。

• 「タイトルの画像に好きな画像」をアップロードできます。

• 「画像の高さ」、「画像の横幅」、「代替テキスト」を設定できます。

1.13　Additional Content

• 追加するコンテンツ

Content：
This section allows you to put any custom HTML, shortcodes, text or anything you like to supplement the other container items.

It’s particularly useful if you have social media icons, shopping cart information or anything else custom to your site.

HTML and shortcodes can be used here.

• 私は利用していません。

• 「カスタムHTML」「ショートコード」「テキスト」などのコンテナアイテムを独自にカスタマイズする設定ができます。
  
  ソーシャルメディア「SNS」のアイコンやショッピングカートの情報など本格的なカスタマイズできます。

私には上級すぎて手が出せません。

• 

1.14　Animation

Appear From：
This determines which side of the screen the container appears from.

Type：
You can choose the type of animation used for showing the container. Currently there are 3 options:
・Slide – Slides the container in from the location specified above.
・Push – Used if you want to push your page across when the container slides in.
・Fade – Used if you want to fade the container in on the page rather than sliding in.（これだけ有料版です）

Push Wrapper：
The CSS selector(s) of your page that you want pushed when using the push animation above.

• コンテナをどのように動作させるかの設定です。
  
  「上」「下」「左」「右」どこからスライドさせるかすべて選択可能です。
  
  「上上下下左右左右BA」ゲーム内無敵
  「上上下下左右左右BBA」現実世界無敵
  

• 「Push」表示の設定もできるようです。「私は、スライド派。」

• 

1.15　Search

• スライドインメニューの中に「サイト内検索」を設置できます。これは「Cocoon」のサイドバーにあるものと同一の機能です。

Text Colour：
Set the text colour of the search text that a user types in.

Border Colour：
Set the border colour for the search box.

Background Colour：
Set the background colour for the search box.

• 「Search」の「テキストの色」「枠の境界線の色」「枠の背景の色」の設定です。

• 

1.16　Technical

• 「スライドイン」してきたメニューコンテナを閉じる時の動作設定です。

Close on Page Clicks：
Set this if you want the container to close whenever you click or tap on the page.

Close on Link Clicks：
Set this if you want the container to close whenever you click or tap on any of the menu link items.

• 「メニューコンテナ」以外のページ場所をクリックして「メニューコンテナ」を閉じるかどうか。

• 「メニューコンテナの中にあるリンク」をクリックしたときに「メニューコンテナ」を必ず閉じるかどうか。

• 「メニューコンテナ」の設定はここまでです。「Update Options」をクリックして変更を保存します。

• 

1.17　メニュー設定

Depth：
This determines how many levels deep your menu will go.

• 「Menu」タブをクリックして、「メニュー設定」をできるようにします。

• 「どの階層まで」表示すようにするか設定できます。

• 

1.18　メニュー設定「Styling」

Font：
Set the font for the menu items. The font must already be installed as part of your theme or a browser inbuilt one.

Font Size：
Set the text size of the menu items and it’s unit.

Item Height：
Set the height of each menu item and it’s unit.

Line Height：
Set the line height of each menu item and it’s unit.

Text Alignment：
Set the alignment of the text for the menu items.

Word Wrap：
Allow the menu items to wrap around to the next line.
Useful if you have particularly long menu item titles.

• Font：空欄にした場合「Cocoon設定」で設定されたフォントが適用されていると思います。おそらく、他のテーマを利用していても空欄の場合、テーマの設定が適用されるのではないかと思います。

• 「Item Height」：アイテムの高さ

• 「Item Height」：行の高さ

• 「Text Alignment」：「左寄せ」「右寄せ」「中央寄せ」など選択できます。

• 「Word Wrap」：「投稿ページ」のタイトルが長い時に折り返して表示するかどうか、を設定できます。経験上「折返し設定」をするとごちゃごちゃになります。

• 

1.19　メニュー設定「Item Text」

Width：
Set the border size for each menu link and it’s unit.

Colour：
Set the border colour for each of the menu items.

Hover Colour：
Set the border colour when the mouse rolls over each menu item.

Current Item Colour：
Set the border colour for the current menu item.

Current Item Hover Colour：
Set the alignment of the text for the menu items.

• Width：ボーダーライン（境界線）のサイズ設定

• Colour：ボーダーライン（境界線）の色

• Hover Colour：メニュー項目上にマウスを移動させた時の境界線の色

• Current Item Colour：現在選択されているメニュー項目の境界線の色

• Current Item Hover Colour：現在選択されているメニュー項目上に、マウスを移動させた時の境界線の色

• 

1.20　メニュー設定「Item Borders」

Colour：
Set the text colour for each of the menu items.

Hover Colour：
Set the text colour when the mouse rolls over each menu item.

Current Item Colour：
Set the text colour for the current menu item.

Current Item Hover Colour：
Set the text colour when the mouse rolls over the current menu item.

• Hover Colour：メニュー項目上にマウスを移動させた時のテキストの色

• Current Item Colour：メニュー項目上にマウスを移動させた時のテキストの色

• Current Item Hover Colour：：現在選択されているメニュー項目上に、マウスを移動させた時のテキストの色

• 

1.21　メニュー設定「Item Background」

Colour：
Set the background colour for each of the menu items.

Hover Colour：
Set the background colour when the mouse rolls over each menu item.

Current Item Colour：
Set the border colour when the mouse rolls over each menu item.

Current Item Hover Colour：
Set the background colour when the mouse rolls over the current menu item.

• Colour：メニュー項目の背景色の設定

• Hover Colour：メニュー項目上にマウスを移動させた時の背景色の設定

• Current Item Colour：現在選択されているメニュー項目の背景色の設定

• Current Item Hover Colour：現在選択されているメニュー項目上に、マウスを移動させた時の背景色の設定

• 

1.22　メニュー設定「Trigger Icon」①

Position：
Set the side of the menu item that the sub menu trigger will appear.

Active Shape：
Set the trigger shape you want to use for the active state. A selection of shapes can be found here.

Inactive Shape：
Set the trigger shape you want to use for the inactive state. A selection of shapes can be found here.

• Position：「右側」「左側」を選択できます。

• Active Shape：アクティブ時（サブメニューを開いている時）に表示するトリガーアイコンの設定です。

• Inactive Shape：非アクティブ時（サブメニューを閉じている時）に表示するトリガーアイコンの設定です。

• 「Active Image」以降の設定は次へ進みます。

• 

1.23　メニュー設定「Trigger Icon」②

Active Image：
You can set an image for your active sub menu trigger instead if you would like. This will take precedence over the shape option above.

Alt Text：
If you use an image as your active sub menu trigger, you can set it’s alt text here.

Inactive Image：
You can set an image for your inactive sub menu trigger instead if you would like. This will take precedence over the shape option above.

Alt Text：
If you use an image as your inactive sub menu trigger, you can set it’s alt text here.

• Active Image：
  「初期設定の▲」や「他の記号」を設定できるようになっていますが、「独自の画像」をアップロードして使用することができます。アップロードすると、「初期設定」より「優先」されます。

• Alt Text：
  「独自の画像」を「サブメニュー」を「閉じる」トリガーアイコンに設定した場合、この欄に代替テキストを設定することができます。

• Inactive Image：
  「初期設定の▼」や「他の記号」を設定できるようになっていますが、「独自の画像」をアップロードして使用することができます。アップロードすると、「初期設定」より「優先」されます。

• Alt Text：
  「独自の画像」を「サブメニュー」を「開く」トリガーアイコンに設定した場合、この欄に代替テキストを設定することができます。

• 

1.24　メニュー設定「Trigger Sizing」

Height：
Set the height of the menu trigger items and their units.

Width：
Set the width of the menu trigger items and their units.

• Height：トリガーサイズの「高さ」設定です。

• Width：トリガーサイズの「横幅」設定です。

• 下記画面では初期設定の「50:50」になっていますが、
  
  ボーダライン（境界線）を「3」に設定しているので「47:50」ということです。

• 

1.25　メニュー設定「Trigger Colours」

Colour：
Set the colour of the sub menu trigger.

Hover Colour：
Set the hover colour of the sub menu trigger

Active Colour：
Set the colour of the sub menu trigger when active.

Active Hover Colour：
Set the hover colour of the sub menu trigger when active.

• Colour：「初期設定の▲」の色を設定。

• Hover Colour：トリガーアイコンにマウスを移動させた時の色の設定

• Active Colour：トリガーアイコンを開いてサブメニューが表示されている時の色を設定

• Active Hover Colour：「Active Colour」状態時、トリガーアイコンにマウスを移動させた時の色設定

• 

1.26　メニュー設定「Trigger Background」

• 上記画面の「Trigger Colours」と同様です。トリガー背景色の設定です。

• 

1.27　メニュー設定「Trigger Border」

• 上記「1.25」「1.26」と同様です。境界線の色の設定です。

• ここまでが、「メニュー設定」です。

• ここまでが、「メニュー設定」です。「Update Options」をクリックして、変更を保存します。

• 

1.28　サブメニュー設定

わざわざ書くことでもないんですけどね。

• 

1.29　サブメニュー設定「Styling」

• メインメニューと同様です。

• 異なる点は、「Item Height」と「Line Height」です。このピクセルを「メインメニュー設定」と同一にしてしまうと「モバイル、パソコン」のどちらでも見にくいです。

• 

1.30　サブメニュー設定「Item Borders」

• 基本的にメインメニュー設定と同様です。
  
  メインメニューとサブメニューとの境界線となりますので、自分が思い描く色彩の基調を頭に浮かべながら繊細に設定していくと綺麗なWebサイトになると思います。
  
  私の場合は、白黒が基調です。いぶかしくも昭和の薫りがしてきます。テレビのリモコンを初めて使った時、革命が起きたと思いましたから。

• 

1.31　サブメニュー設定「Trigger Icon」

• アイコンの位置はどうでもいいです。好きなようにしてください。

• 「Trigger Sizing」の設定が重要で、
  
  「サブメニュー設定」の「高さ」と似たような数字で設定するか、
  
  「メインメニューのトリガー」と「サブメニューのトリガー」との主従関係をはっきりさせるように、少し小さな数字で設定するか。
  
  私が運営する2つのWebサイトでも設定が異なります。トリガーの「記号」や「独自画像」などによって設定値は変わってくると思います。

• 

1.32　サブメニュー設定「Padding」

• 「メニュー、サブメニュー」
  
  「曽祖父、祖父、父、子、孫、ひ孫、玄孫」
  
  それぞれに階層がありますが、階層ごとに左側のスペースをどのくらい取るか、という設定です。好みの問題です。

• ここまでで、サブメニュー設定が完了です。「Update Options」をクリックして、変更を保存します。

• 

1.33　ボタン設定

• 

1.34　ボタン設定「Location」

• 相対的位置については利用したことがありません。ですので触れません。

Positioning：
Specify how you want the button to stick to your page.

Side：
Specify which side of the page you want the button to be displayed on.

Distance from Side：
Specify how far across from the side you want the button to display and it’s unit.

Distance from Top：
Specify how far from the top you want the button to display and it’s unit.

• Positioning：固定で設定します。

• Side：右側に設定します。
  
  「Cocoon」を利用しているならスライドインするサイドバーは右側からになりますので、必然的にボタンは右側、スライドインメニューは左側というのが確定かと思います。

• Distance from Side：横からどのくらい離してボタンを設置するか。無料版は「％」のみ設定できます。

• Distance from Top：上からどのくらい離してボタンを設置するか。無料版は「px」のみ設定できます。

• 

1.35　ボタン設定「Container Sizing」「Line Sizing」

「Container Sizing」

Height：
Set the height of the buttons containing element and it’s unit.

Width：
Set the width of the buttons containing element and it’s unit.

「Line Sizing」

Height：
Set the height of each individual button line and it’s unit

Width：
Set the width of each individual button line and it’s unit

Margin：
Set the margin between each individual button line and it’s unit

　「Container Sizing」

• Height：高さ
  特筆すべき点として、無料版は[px」でしか設定できません。

• Width：横幅
  

　「Line Sizing」

• Height：ハンバーガーメニュー三本線のラインの太さ。
  びっくりしたのは、小数点を含めた数字で設定ができるということです。かなり細く設定ができます。「ほぉーー」と思った点です。

• Width：ボタンコンテナサイズに対してどのくらいの横幅を取るかの設定。

• Margin：ここでいう「Margin」は上下のみです。「CSS」に適用される「上下左右」という意味合いはありません。

• 

1.36　ボタン設定「Container Background」

• Colour：

• Hover Colour：

• Active Colour：

このあたりの設定は問題ないかと思います。カラーコード「#086400」は「新緑という意味」と「1日86400秒」ということにかけたものです。

「Tokyo2020 unofficial 非公式」では、オリンピックが延期決定するまでは意味を込めて設定していました。

• 「日本のことを外国人へ発信」するなら、「緑豊かな国だよ」と。
  
• 「1日86400秒」というのは、オリンピックにかける選手が「1日をどんな思いで、どうやって過ごしてきたか。」という気持ちの部分です。
  
• 「新型コロナ、休業要請、緊急事態宣言」で改めて1日の重さを感じました。

• 

1.37　ボタン設定「Title」

Text：
Set the height of the buttons containing element and it’s unit.

Active Text：
Set the width of the buttons containing element and it’s unit.

Colour：
Set the height of each individual button line and it’s unit

Alignment：
Set the width of each individual button line and it’s unit

Font：
Set the margin between each individual button line and it’s unit

Font Size：
Set the button title font size.

Line Height：
Set the button title line height.

• Text：「メニュー」「Menu」など表記できます。
  
  私の場合ですが、「空欄」にしても問題なく表示されるので、スペース的なことも考えて「空欄」で設定しています。

• Active Text：「閉じる」「Close」など表記できます。

• その他、「色」「位置」「フォント」「フォントサイズ」「行の高さ」を設定できます。

• 

1.38　ボタン設定完了

• 「Update Options」をクリックして、変更を保存します。

• 

1.39　さいごに

これだけ設定項目が充実しているプラグインはあまりないと思います。しかも「かゆいところに手が届く」ような設定ができるプラグイン。

ここからは、「さいごに」で触れる部分ではないかも知れません。

「色」を「Color」ではなく「Colour」で設定項目が記載されています。

最初は、スペルミスかな？程度でしたが、すべて「Colour」です。もれなく。

設定するだけの話にはまったくもって関係ありませんけど。これだけのプラグインを作成できる人が、すべての項目で「Colour」と表現されていることに思いを感じたからです。

プラグインのコードでの記載は「color」としているはずです。

だからこそ、以前にキャプチャした、私が設定した項目を紹介？説明？する上において、自分のコンセプトも含めて書いてみました。

「Color」ではなく「Colour」、少なくとも私には響きました。アメリカ系なら「Color」、イギリス系なら「Colour」とは一概には言えません。

とはいえ、日本でいうところの「北海道のことば」「沖縄のことば」、「方言」ということが差別的な表現だったら失礼ですが、「私は方言が好きです。」

あるとき思ったのは、知人が田舎から掛かってきた電話に出て「方言で話していたこと」、聞いてみると田舎の人と話す時には、方言が自然に出るという。そして、私と話す時にはテレビでよく聞く標準語。私には言葉のふるさとがないんだなと感じた瞬間でした。

地方出身の人は東京に来ると標準語で話すようになり、方言で話すことが恥ずかしいらしい。でも自然と使い分けられる。

「Responsive Menu」色んな意味でレスポンシブデザインですなー。「Cocoon」もレスポンシブデザインですなーー。デジタルに向き合ってる時に超アナログを思う。超いいじゃん。

---

次は、第19回です。

• 第19回　WordPressプラグイン　WordPress Google Translate

---