フロントページのメインビジュアルに、プラグイン「grayish MV add」を使用中!詳しくはここをClick!
PR

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

マニュアル
記事内に広告が含まれています。

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

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

スポンサーリンク

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

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

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

メニュー設定をしていないときのモバイルボタン

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

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

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

PCグローバルナビのメニュー設定後のモバイルボタン

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

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

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

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

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

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

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/

サイドバーボタン(#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以外のボタンを一つだけのメニューにすると、ボタンが一つ中央に表示されて微妙な見た目になります。

#logo以外のボタンを一つだけのメニューにしたとき

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

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

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

ver2.6.9.1より子テーマのカスタマイズは不要になります

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

ヘッダーモバイルボタンに#menuのみのメニューを作成

※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;
  }

}

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

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

Cocoon ver2.6.9 ヘッダーモバイルボタンのメニューに#logoを含まない場合の不具合について

ヘッダーモバイルボタンのメニューに#logoが含まれない場合、フロントページのボタンの表示に不具合があります。

フロントページにて、先頭に設定したボタン一つが画面左上でなく画面上の中央に表示されてしまいます。

Cocoon ver2.6.9 grayish ヘッダーモバイルボタンの不具合(フロントページ)

Cocoon ver2.6.9.1では上記が修正され、メニューに#logoを含まない場合もフロントページのボタンの表示は画面左上になります。

現在お困りの方は、大変お手数ですが、Cocoonの最新版をGithubからダウンロードしてご利用ください。

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

フッターモバイルボタンについても、手順はヘッダーと同じになりますので、具体例は省略させていただきます。

メニュー作成時に、メニュー設定で「フッターモバイルボタン」を選択して保存してください。

【スキン独自】デフォルトでフロントページはハンバーガーメニューボタンのみ

テーマカスタマイザーのモバイル設定にて、フロントページのヘッダーメニューをハンバーガーメニューボタンだけにするか(デフォルト)、全てのメニューを表示するかを選択可能です。

ヘッダーモバイルボタンをオリジナルメニューにする場合はヘッダーメニューの最初にメニュー(#menu)が設定されている必要があります。

grayishのフロントページはメインビジュアルが画面いっぱいに表示され、その中央にサイトタイトル(またはロゴ画像)が表示されることから、デフォルトでヘッダーのモバイルボタンはハンバーガーメニューボタンのみ表示するようにしています。

ハート
ハート

※タイトルが同じ画面に2度表示されるとくどい感じがしたので・・・

フロントページも他のページと同じく、設定したメニューボタンを全て表示したい場合はテーマカスタマイザーで設定してください。

テーマカスタマイザーでモバイルボタンの表示を変更する

テーマカスタマイザーの立ち上げ手順は以下をご覧ください。

テーマカスタマイザー手順

テーマカスタマイザー立ち上げの手順
  • STEP1
    管理画面 > 外観 > カスタマイズ を選択

    テーマカスタマイザーが立ち上がります。

  • STEP2
    左側の一番下にある、「skin-grayish: カスタマイズ」をクリック

    スキン独自のカスタマイズ項目が表示されます。

スキン独自のカスタマイズ項目の一覧は以下になります。

スキン独自のカスタマイズ項目の一覧 (v1.0.4より変更)
  • 全体:英字フォント設定
    • サイトタイトルなどに反映される英字フォントを選択
  • 全体:カラー設定
    • テキストカラー、アクセントカラーのカラー選択
  • 全体:テキスト変更
    • フロントページの「New Post」などを任意のテキストに設定
  • フロントページ設定:ヘッダー
    • フロントページのヘッダーに関するカスタマイズ
  • フロントページ以外の設定:ヘッダー
    • フロントページ以外のページのヘッダーに関するカスタマイズ
  • コンテンツ下部ウィジェット:プロフィールBOX
    • プロフィールボックスをフッター上に表示する時、背景の画像について設定
  • モバイル設定
    • タブレット・スマホでのヘッダーの設定など

スキン独自のカスタマイズ項目の、モバイル設定を開きます。

テーマカスタマイザーのスキン独自メニュー > モバイル設定

フロントページのみヘッダーモバイルボタンをメニューアイコンのみON/OFFのボタンを、ON(デフォルト)からOFFに変更します。

プレビュー画面が生成されるので少々待ちます。

設定をOFFに変更したプレビュー。フロントページのヘッダーモバイルボタンが全部表示される

フロントページのヘッダーモバイルボタンが、全て表示されるようになりました。

モバイルボタン下のキャプションの表示をOFFにできる

モバイル設定では、モバイルボタンの各アイコン下のキャプションの表示ONOFFを行うこともできます。

キャプション:メニューや検索、サイドバーなどのテキストのこと

キャプションの表示をOFFにすると、以下のようになります。

ハート
ハート

スッキリする感じだね

お好みに応じて、設定を変えてみてください。

ヘッダー・フッターモバイルボタンの背景色も変更可能

他にも、ヘッダー・フッターモバイルボタンの背景色・不透明度も変更可能です。

以下はヘッダーの背景色と、不透明度を変更する動画です。

こちらもお好みで、設定してみてください。


テーマカスタマイザーで設定を変更した場合は、必ず最後に画面上の「公開」ボタンをクリックしてください。

テーマカスタマイザー ポイント

テーマカスタマイザーで設定を変更した場合は、必ず最後に画面上の「公開」ボタンをクリックしてください。
「公開」ボタンをクリックしないと変更が反映されません。

この記事は以上になります。

タイトルとURLをコピーしました