スマホ（モバイル）ヘッダーメニューを自由にいじりたいけど
プログラムとか書けない…
そんな方に、Cocoonでプログラミングなしで
モバイル（スマホ）用のヘッダーメニューを簡単に変更する方法を紹介します。
実際に変更したものがこちらです。
5分もかからず終わるので、一緒に進めてみてください。
Cocoonスマホヘッダーメニュー作成
今回は、左から「検索」、「ロゴ」、「メニュー」という順番で作成していきます。
ヘッダーにしたいメニューを作成
WordPressの「管理メニュー」から「メニュー」を選択します。
次にモバイルへだーに使うメニューを作成します。
- 「新しいメニューを作成しましょう。」をクリック
- 「メニュー名」を入力
- 今回は「ヘッダーモバイルボタン」としました。
- 右下の「メニュー作成」をクリック
カスタムリンクからメニュー項目追加
スマホヘッダーメニューに追加したい項目を選択していきます。
左にある「メニュー項目を追加」で選択していきます
- 「カスタムリンク」を選択
- URLに「#home」を入力
- リンク文字列（自由記述）に「HOME」を入力
- 「メニュー追加」をクリック
URLは「#home」、「#logo」、「#menu」を選択で同様に行っていきます。
URLはコマンドが用意されているので、他のボタンを作成したい場合は参考にしてみて下さい。
URLコマンド一覧
| URLコマンド | リンク文字列例 | ボタンの役割 |
| ＃menu | メニュー | グローバルメニューをスライドインで表示 |
| ＃home | ホーム | フロントページへのリンクボタン |
| ＃share | シェア | シェアボタンを表示 |
| ＃follow | フォロー | フォローボタンを表示 |
| ＃search | 検索 | 検索フォームを表示 |
| ＃toc | 目次 | 目次に移動 |
| ＃top | トップ | ページトップに移動 |
| ＃prev | 前へ | 現在表示中の投稿ページの前のページを表示 |
| ＃next | 次へ | 現在表示中の投稿ページの次のページを表示 |
| ＃comments | コメント | コメント欄へ移動 |
| ＃sidebar | サイドバー | サイドバー項目をスライドインで表示 |
| ＃logo | サイト名 | 横幅広めのサイトロゴが表示されるボタンを表示 |
＃記号は半角なのでコピペの際は注意。全角だとエラーになります。
メニューをサイトに反映する
- 「メニュー設定」の「ヘッダーモバイルボタン」を選択
- 「メニュー保存」をクリック
次に、「管理メニュー」→「Cocoon 設定」→「モバイル」へ。
- 「ヘッダーモバイルボタン」を選択します
- モバイルメニューを固定したい場合、「モバイルボタン固定表示」も選択
- 「変更をまとめて保存」をクリック
これで変更終了です。お疲れさまでした。
好きなアイコンに設定変更する
折角なので、ボタンを好きなアイコンにしてみましょう。
URLでサイドバーを選択すると、左のアイコンになりますが、右のアイコンに変更してみましょう。
- 右上の「表示オプション」をクリック
- 「評価メニュー設定を表示」から「CSSクラス」を選択
「CSS class(オプション)」を「fa fa-bar」に変更し「メニューを保存」で完了です。
好きなアイコンを見つける
Font Awesome 4で好きなアイコンを選択すると、このような画面になります。
- 「fa fa-align-justify」をコピー
- メニューの「CSS クラス」に貼り付け
この手順を好みのアイコンで行えば、アイコンを自由に変更することができます。
モバイルヘッダーメニュー変更まとめ
好きなデザインにヘッダー変更できたでしょうか。
Cocoonは無料のテーマですが簡単にカスタマイズ出来て拡張性がありますね。
変更するのをためらうかもしれませんが、
プログラムを直接いじっているわけではありません。
気軽に変更してみて、気に入らなければ戻せばいいのです。
色々考えながら、自分だけのサイトを構築してみましょう。
コメント