【サイトヘッダー】[25] モバイルナビをパソコンでも使う ＋ ピン角ボタン

パソコンでもサイトヘッダーにモバイルナビを表示します。通常のグローバルナビの位置には以下のどちらかまたは両方のコンテンツを配置することができます。

• SNS アイコン
  情報発信や顧客対応のために SNS に力を入れているお客様に適しています。
  Font Awesome のアイコンに加えて、note のアイコンを表示するカスタマイズも可能です。note アイコンの注意点として、note のロゴデータの利用規約により、ロゴの色は白か黒のどちらかしか使うことができません。
• ピン角ボタンのグローバルナビ
  重要なページにリンクするボタンをここに常時表示して導線を確保し、それ以外のページへのリンクをハンバーガーメニュー（モバイルナビ）に持たせる構成になっています。
  

ハンバーガーボタンの下に以下のどちらかのテキストを表示することができます。

• MENU ⇔ CLOSE
• メニュー ⇔ 閉じる

以下の色は キーカラー に設定されています。

• ピン角ボタンのマウスホバー時の色
• モバイルナビの背景色
• スマホの画面下部に表示されるボタンの色（プラグイン UJS Fixed Buttons のキーカラーバージョンの場合）

サイトヘッダーの設定とカスタマイズ

パソコンでの表示を設定するには

スマホで SNS アイコンを表示するには

スマホでピン角ボタンを表示するには

ハンバーガーボタンの下に MENU ⇔ CLOSE のテキストを表示するには

プラグイン UJS WSP Customize の style.css に以下の CSS を追加します。

/* ハンバーガーボタンにテキストを表示 */
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn {
    background-position: center -4px;
    text-indent: 0;
}

ハンバーガーボタンの下に メニュー ⇔ 閉じる のテキストを表示するには

まず上記のやり方で MENU ⇔ CLOSE を表示した状態にして、さらに日本語表記に切り替えます。
日本語表記にするやり方は以下の会員専用マニュアルをご覧ください。

モバイルナビのハンバーガーボタンのテキスト・枠線のカスタマイズ手順

日本語表記にするやり方、枠線・テキストを非表示にするやり方を説明しています。

WordPress サイト開設スターターパック