
スマホ(モバイル)ヘッダーメニューを自由にいじりたいけど
プログラムとか書けない…
そんな方に、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は無料のテーマですが簡単にカスタマイズ出来て拡張性がありますね。
変更するのをためらうかもしれませんが、
プログラムを直接いじっているわけではありません。
気軽に変更してみて、気に入らなければ戻せばいいのです。
色々考えながら、自分だけのサイトを構築してみましょう。
コメント