メニュー設定：タブレット・スマホのヘッダー・フッターモバイルボタン

マニュアル

2023.08.292024.07.15

記事内に広告が含まれています。

タブレット・スマホ時（画面幅1023px以下）のモバイルボタンメニューを設定する手順です。

23/11/28 追記
ヘッダーモバイルボタンのメニューに#logoを含まない場合に不具合があります。
Cocoon ver2.6.9.1で修正されます。
不具合内容を確認

Index

デフォルトで設定されているボタン
オリジナルメニューにしたいとき
【スキン独自】デフォルトでフロントページはハンバーガーメニューボタンのみ

デフォルトで設定されているボタン

grayishはCocoon設定でモバイルボタンメニューをヘッダー・フッターモバイルボタンに設定しています。（スキン制御）

テーマをインストール後、メニュー設定を何も行っていない場合、タブレット・スマホ時の表示は以下のようになっていると思います。

ヘッダーモバイルボタンの、ハンバーガーメニューボタンの表示される位置のボタンが、「ホーム」になっています。

まずはPC時のグローバルメニュー設定を先に行いましょう。

メニュー設定：PCグローバルナビ

Cocoonのグローバルナビと作成手順は同じです。grayish独自仕様があります。メニューの最後に検索ボタンが付く、お好みでSNSボタンの追加が可能、サブメニュー表示は3階層下まで、フロントページとその他のページでは表示が異なる、などです。フロントページでは、ロゴはメニューに含まれません。フロントページ以外では、ロゴとメニューが横一列に表示される仕様になっています。 PCの時、サブメニューはある程度スクロールすると非表示になります。トップに戻ると表示されます。

PCのグローバルメニューが設定されると、ヘッダーモバイルボタンのホームがハンバーガーメニューのアイコンになります。

オリジナルメニューにしたいとき

ヘッダー、フッターに表示する各ボタンについてオリジナルメニューに変更したい場合は、モバイルボタン専用のメニュー（ヘッダーモバイルボタン、フッターモバイルボタン）を作成します。

モバイルボタンメニューについて、公式の以下記事の手順になります。

ヘッダーモバイルボタンの設定方法

スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

フッターモバイルボタンの設定方法

スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

アイコンフォントについて補足

上記公式の記事では、アイコンフォントがFont Awesome4.7の前提で書かれています。

grayishではスキン制御でFont Awesome5に固定しているので、もしアイコンを任意の物に変更したい場合は以下のFont Awesome5のページでアイコンを検索、コードコピーを行ってください。

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Search all the Version 5 icons and match your project with a look and feel that's just right. Better...

Cocoonの独自ボタン

Cocoonの独自ボタンを利用するのが便利だと思いますので、上記記事より独自ボタンの一覧を引用させていただきます。

※24/06/07 独自ボタンの一覧に、アイコン列を追加しました。表示されるアイコンをご確認いただけます。
※#logoは、アイコンではなくサイトテキスト又はCocoon設定>ヘッダー>サイトロゴで設定した画像が表示されます。

独自ボタンを作成する

Cocoonの独自ボタンを利用するには、カスタムリンクのURLに、あらかじめ定義されたコマンド（文字列）を貼り付けます。

モバイルボタンコマンド

URLコマンドリンク文字列例アイコンボタンの役割
#menu メニューグローバルメニューをスライドインで表示
※ヘッダー・フッターモバイルボタン
どちらかにひとつだけ設置を推奨
#home ホームフロントページへのリンクボタン
#share シェアシェアボタンを表示
※ヘッダー・フッターモバイルボタン
どちらかにひとつだけ設置を推奨
#follow フォローフォローボタンを表示
※ヘッダー・フッターモバイルボタン
どちらかにひとつだけ設置を推奨
#search 検索検索フォームを表示
※ヘッダー・フッターモバイルボタン
どちらかにひとつだけ設置を推奨
#toc 目次へ目次に移動
以下の条件の際にボタンが表示されます。
「Cocoon設定」で「目次を表示」にしている時
目次ウィジェットが「投稿・固定ページ本文中」
ウィジェットエリアに入っている時
目次ショートコードが記事本文中に入っている時
#top トップページトップに移動
#prev 前へ現在表示中の投稿ページの前のページを表示
#next 次へ現在表示中の投稿ページの次のページを表示
#comments コメントコメント欄へ移動
#logo サイト名入力
※短縮形推奨 – 横幅広めのサイトロゴが表示されるボタンを表示
#sidebar サイドバーサイドバー項目をスライドインで表示
※ヘッダー・フッターモバイルボタン
どちらかにひとつだけ設置を推奨
https://wp-cocoon.com/mobile-header-buttons/
https://wp-cocoon.com/mobile-footer-menu/

URLコマンド	リンク文字列例	アイコン	ボタンの役割
#menu	メニュー		グローバルメニューをスライドインで表示 ※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨
#home	ホーム		フロントページへのリンクボタン
#share	シェア		シェアボタンを表示 ※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨
#follow	フォロー		フォローボタンを表示 ※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨
#search	検索		検索フォームを表示 ※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨
#toc	目次へ		目次に移動以下の条件の際にボタンが表示されます。「Cocoon設定」で「目次を表示」にしている時目次ウィジェットが「投稿・固定ページ本文中」ウィジェットエリアに入っている時目次ショートコードが記事本文中に入っている時
#top	トップ		ページトップに移動
#prev	前へ		現在表示中の投稿ページの前のページを表示
#next	次へ		現在表示中の投稿ページの次のページを表示
#comments	コメント		コメント欄へ移動
#logo	サイト名入力 ※短縮形推奨	–	横幅広めのサイトロゴが表示されるボタンを表示
#sidebar	サイドバー		サイドバー項目をスライドインで表示 ※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨

サイドバーボタン（#sidebar）は、ヘッダーとフッターどちらか片方にのみ設定してください。
スキンの問題で、両方に設定するとサイドバーの中身が表示されないことがあります。

Cocoonの独自ボタン以外の表示について

モバイルボタンに、前項のCocoon独自ボタン（#menu、#homeなど）を使用せず、投稿や固定ページ、カテゴリへのボタンを設定したい場合もあると思います。

その場合はテーマの仕様でFont Awesome5の星型のアイコンが表示されます。

Cocoonの独自ボタン、それ以外のリンクの★アイコンいずれも上記公式のマニュアルをご覧いただければ、Font Awesome5の別のアイコンに変更が可能です。

オリジナルモバイルボタンメニューを作成

ヘッダーモバイルボタンのメニュー作成

ヘッダーモバイルボタンのメニューは、デフォルトのままでいいような気がしますが・・・

ハート

ハンバーガーメニュー、ロゴ、検索ボタンの並びはCocoonに限らず、他のテーマのブログでもよく目にする配置ですね！

あえて変えたいケースもあると思うので、いくつかデモを載せています。

CASE1：メニューは同じでいいけど、キャプションを変えたい

デフォルトのハンバーガーメニュー、ロゴ、検索ボタンのままでいいんだけど、キャプションをMenu等別のテキストにしたい

キャプションを別のテキストに変えたい場合は、新しくオリジナルメニューを作成するのが手っ取り早いです。

オリジナルメニューの作成手順（デフォルトと同じメニューの場合）

①WordPress管理画面 > 外観 > メニューで、「新しいメニューを作成しましょう」をクリック

②メニュー構造のメニュー名に、自分の分かりやすい任意の名前を入力

③メニュー設定の「ヘッダーモバイルボタン」にチェックし、「メニューを保存」をクリック

④メニュー項目を追加のカスタムリンクで、「URL」に#menu、「リンク文字列」に設定したいキャプションを入力（デモでは、Menuとしています）し、「メニューに追加」をクリック

⑤同様に、カスタムリンクで「URL」に#logo、「リンク文字列」にサイトタイトルを入力（デモでは、Demo-grayishとしています）し、「メニューに追加」をクリック
※ロゴ画像が設定されている場合はロゴ画像が表示されます。この場合リンク文字列に入力したテキストは、表示されません。

⑥同様に、カスタムリンクで「URL」に#search、「リンク文字列」に設定したいキャプションを入力（デモでは、Searchとしています）し、「メニューに追加」をクリック

⑦メニュー構造の「メニューを保存」をクリック

メニュー変更後の表示

キャプションがMenu, Searchになりました。

CASE2：ヘッダーにボタンはいらない！

デフォルトのボタンも不要で、ヘッダーのボタンを消したいとき

WordPress > 外観 > メニューにて、ヘッダーモバイルボタン用のメニューだけ作成します。

メニュー設定で、「ヘッダーモバイルボタン」を選択し、メニューを保存をクリックします。

これでモバイル時の全てのページでヘッダーモバイルボタンは表示されません。

ただし、フロントページ以外のページでは、ボタンがあるはずの位置が空スペースとして残ります。

フッターモバイルボタンを非表示にしたい場合も、同じ手順で実現できます。

フッターモバイルボタンを表示したくない場合は、メニュー設定で「フッターモバイルボタン」を選択し、メニューを保存をクリックしてください。

なお、フッターモバイルボタンの場合は元々画面の上に重なって表示されている為、空メニューを設定しても空きスペースが残ることはありません。

CASE3：全ページロゴだけ表示したい

ロゴだけ表示したい。メニューや検索ボタンが不要な場合

WordPress > 外観 > メニューにて、ヘッダーモバイルボタン用のメニューを作成します。

カスタムリンクで、モバイルボタンコマンドの#logoを入力しメニューに追加します。

メニュー設定で、「ヘッダーモバイルボタン」を選択し、メニューを保存をクリックします。

これでモバイル時の全てのページでヘッダーにロゴのみ表示されます。

その他：各自のCSSでのカスタマイズをすれば可能なケース

ヘッダーのボタンは、全部のページでメニューボタンのみにしたい

#logo以外のボタンを一つだけのメニューにすると、ボタンが一つ中央に表示されて微妙な見た目になります。

23/11/28 追記
Cocoon ver2.6.9.1より、#logo以外のボタンを一つだけのメニューにした場合の仕様を変更いたします。

Cocoon ver2.6.9.1より、
#logo以外のボタンを一つだけのメニューにした場合、フロントページ、その他のページどちらもボタンが画面左上に表示されます。

以下画像は#menuボタンの場合です。他のボタンの場合も同様に左上に表示されます。

以下の手順で子テーマのカスタマイズ例を載せていましたが、バージョンアップ後は不要になります。
恐れ入りますが、このカスタマイズをされていた方はCocoon ver2.6.9.1にアップデート後はコードを削除していただきます様、よろしくお願いいたします。

※Cocoon ver2.6.9.1からは以下カスタマイズは不要になります。

全部のページでメニューボタンを画面左上に表示したい、と仮定して、CSSでのカスタマイズ例を載せておきます。

編集するファイル：子テーマのstyle.css

かならず変更前のファイルをバックアップとしてコピーしてから編集してくださいね！

①モバイルヘッダーボタンメニューをメニューのみで作成（メニュー作成手順はCASE1参照）

②子テーマのstyle.cssに以下のように追加（padding-leftの値を各自の好みで変更する）

レスポンシブデザイン用のメディアクエリの下に追加します。

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {

  /*必要ならばここにコードを書く*/

  /* モバイルヘッダーボタン　#menuだけを左端に表示する */
  .mobile-header-menu-buttons .navi-menu-button .navi-menu-icon {
    text-align: left;
    padding-left: 28px;
  }

  .mobile-header-menu-buttons .navi-menu-button .navi-menu-caption {
    text-align: left;
    padding-left: 20px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {

  /*必要ならばここにコードを書く*/
  .mobile-header-menu-buttons .navi-menu-button .navi-menu-icon {
    padding-left: 18px;
  }

  .mobile-header-menu-buttons .navi-menu-button .navi-menu-caption {
    padding-left: 12px;
  }

}

これで以下のような表示にすることが可能です。