WordPressのスマホ用ヘッダのカスタマイズ
WordPress+Cocoonで作成しているブログで、スマホデバイス用のヘッダをカスタマイズしました。
当ページでは、以下の図のような「ヘッダモバイルボタン」と「ヘッダモバイルメニュー」を作成するための設定内容についてまとめています。
ヘッダーモバイルボタンのカスタマイズ
ヘッダーモバイルボタンの追加
「常にサイトヘッダーロゴを表示する」のチェックを外すことで既存のヘッダを非表示にできます。
色の変更
WordPress管理画面メニュー「外観＞テーマファイルエディタ」へアクセスし、Cocoon子テーマのstyle.cssに以下のコードを追記します。
「background-color」に背景色、「color」に文字色を指定します。
ヘッダーモバイルメニューのカスタマイズ
WordPress管理画面メニュー「外観＞メニュー」からメニューを作成し、「ヘッダーモバイルメニュー」にチェックを入れて保存すると、スマホデバイスでもメニューが表示されるようになります。
ただ、この初期状態では不格好なため、カスタマイズしていきます。
ヘッダーモバイルメニューを横スクロール表示
WordPress管理画面メニュー「外観＞テーマファイルエディタ」へアクセスし、Cocoon子テーマのstyle.cssに以下のコードを追記します。
ヘッダーモバイルメニューにアイコンを挿入
各メニュー項目の頭にアイコンを追加する手順です。
WordPress管理画面メニュー「Cocoon設定＞全体＞サイトアイコンフォント」よりFont Awesomeのバージョンを確認します。
バージョン5を利用の場合は、以下のFont Awesomeのサイトからお好みのアイコンを検索します。
検索したアイコンのHTMLを「ナビゲーションラベル」に以下のように追加することでアイコンが追加できます。
アイコンと文字の間隔を調整したい場合、以下のようなCSSを追加します。
ナビゲーションラベルが存在しない場合は、以下のようなコードをjavascript.jsへ追加します。