【Cocoon】プログラム不要!モバイルヘッダーメニュー変更

【Cocoon】プログラム不要!モバイルヘッダーメニュー変更ブログ運営

スマホ(モバイル)ヘッダーメニューを自由にいじりたいけど

プログラムとか書けない…

そんな方に、Cocoonでプログラミングなし

モバイル(スマホ)用のヘッダーメニューを簡単に変更する方法を紹介します。

実際に変更したものがこちらです。

cocoonでモバイル(スマホ)ヘッダーメニューのボタンを変更した結果

5分もかからず終わるので、一緒に進めてみてください。

Cocoonスマホヘッダーメニュー作成

cocoonモバイルヘッダーメニューボタンの作成するボタン配置

今回は、左から「検索」、「ロゴ」、「メニュー」という順番で作成していきます。

ヘッダーにしたいメニューを作成

WordPressの「管理メニュー」から「メニュー」を選択します。

WordPressの「管理メニュー」から「メニュー」を選択します

次にモバイルへだーに使うメニューを作成します。

  1. 「新しいメニューを作成しましょう。」をクリック
  2. 「メニュー名」を入力
  3. 今回は「ヘッダーモバイルボタン」としました。
  4. 右下の「メニュー作成」をクリック

カスタムリンクからメニュー項目追加

スマホヘッダーメニューに追加したい項目を選択していきます。

cocoonのヘッダーメニューをカスタムリンクのURLから指定する

左にある「メニュー項目を追加」で選択していきます

  1. 「カスタムリンク」を選択
  2. URLに「#home」を入力
  3. リンク文字列(自由記述)に「HOME」を入力
  4. 「メニュー追加」をクリック

URLは「#home」、「#logo」、「#menu」を選択で同様に行っていきます。

URLはコマンドが用意されているので、他のボタンを作成したい場合は参考にしてみて下さい。

URLコマンド一覧

URLコマンドリンク文字列例ボタンの役割
#menuメニューグローバルメニューをスライドインで表示
#homeホームフロントページへのリンクボタン
#shareシェアシェアボタンを表示
#followフォローフォローボタンを表示
#search検索検索フォームを表示
#toc目次目次に移動
#topトップページトップに移動
#prev前へ現在表示中の投稿ページの前のページを表示
#next次へ現在表示中の投稿ページの次のページを表示
#commentsコメントコメント欄へ移動
#sidebarサイドバーサイドバー項目をスライドインで表示
#logoサイト名横幅広めのサイトロゴが表示されるボタンを表示

#記号は半角なのでコピペの際は注意。全角だとエラーになります。

メニューをサイトに反映する

cocoonヘッダーモバイルボタンを作成し保存
  1. 「メニュー設定」の「ヘッダーモバイルボタン」を選択
  2. 「メニュー保存」をクリック

次に、「管理メニュー」→「Cocoon 設定」→「モバイル」へ。

wordpreeテーマCocoonでモバイルヘッダーメニューを固定表示する
  1. 「ヘッダーモバイルボタン」を選択します
  2. モバイルメニューを固定したい場合、「モバイルボタン固定表示」も選択
  3. 「変更をまとめて保存」をクリック

これで変更終了です。お疲れさまでした。

好きなアイコンに設定変更する

wordpreeテーマcocoonヘッダーメニューアイコン変更

折角なので、ボタンを好きなアイコンにしてみましょう。

URLでサイドバーを選択すると、左のアイコンになりますが、右のアイコンに変更してみましょう。

Wordpressテーマcocoon表示オプションからCSSを表示し変更可能にする
  1. 右上の「表示オプション」をクリック
  2. 「評価メニュー設定を表示」から「CSSクラス」を選択
wordpressテーマcocoon追加表示オプションCSSでメニューボタン変更

「CSS class(オプション)」を「fa fa-bar」に変更し「メニューを保存」で完了です。

好きなアイコンを見つける

※サイトアイコンフォントは異なる

Cocoon設定→全体→サイトアイコンフォント

cocoonサイトアイコンフォント

2種類から選んでサイトへ

サイトアイコンフォントをサイトから拾ってきてCSSオプションに追記する方法

Font Awesome 4で好きなアイコンを選択すると、このような画面になります。

  1. 「fa fa-align-justify」をコピー
  2. メニューの「CSS クラス」に貼り付け

この手順を好みのアイコンで行えば、アイコンを自由に変更することができます。

モバイルヘッダーメニュー変更まとめ

好きなデザインにヘッダー変更できたでしょうか。

Cocoonは無料のテーマですが簡単にカスタマイズ出来て拡張性がありますね。

変更するのをためらうかもしれませんが、

プログラムを直接いじっているわけではありません。

気軽に変更してみて、気に入らなければ戻せばいいのです。

色々考えながら、自分だけのサイトを構築してみましょう。

コメント

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