Cocoon(コクーン)のメニューをカスタマイズする方法

記事内に広告が含まれています。

すでにメニューの作成ができている段階でのお話になります。

Cocoonのメニューをカスタマイズして色味や幅をオリジナル仕様にする方法を解説しています。

なお、メニュー作成がまだの方も慌てる必要はありません。

以下の解説を参考にまずは基本的なメニュー作りを進めておいてくださいね。

スポンサーリンク

Cocoonでメニューをカスタマイズする内容と手順

【カスタマイズ内容】

  • メニュー内にアイコンを設置する
  • メニューの色味・サイズを変える
初期設定のデザイン

初期設定のデザインだとこんな感じです。

Cocoonのメニュー内にアイコンを変更する手順

メニュー

ダッシュボードより 外観>メニュー をクリック。

」の箇所をクリックして詳細を開きます。

アイコンの編集箇所

こちらにアイコンのコードを記述します。

FontAwesome

アイコンは「FontAwesome4.7」から選びます。

なお、英語のサイトなので英語での検索になりますが小難しく考える必要はありません。

Google翻訳で十分過ぎるほど問題なく対応できます。

FontAwesomeの使い方

たとえばHOMEのメニューに「家」のアイコンを入れたい場合、homeと検索。

すると検索結果(Search for ‘home’)に該当するアイコン候補が表示されます。

今回は「home」をクリックして解説します。

アイコンのコード

この場合、家のアイコンのコードは「 <i class=”fa fa-home” aria-hidden=”true”></i> 」(画面赤枠箇所)がコードになります。

ナビゲーションラベルの編集

「HOME」メニューの「ナビゲーションラベル」に「<i class=”fa fa-home” aria-hidden=”true”></i> HOME」と記入します。

表示名の編集が終わったら「メニューを保存」をクリック。

アイコンを追加

HOMEメニューにアイコンが追加されました。

この作業を各メニューごとに設定しましょう。

アイコンを全てのメニューに設置

全部入れるとこんな感じ。

ドロップメニュー

ドロップメニューにも忘れずにアイコンを設置しておこう。

【補足】綺麗に見せるポイント

半角スペースの違い

アイコンとメニューの間が詰まってしまうと見た目に美しくないので、半角スペースを入れましょう。

半角スペースを入れる

編集画面で半角スペースを入れれば反映されます。

メニューの色味・サイズを変える

ヘッダー

ダッシュボードより Cocoon設定>「ヘッダー」のタブ をクリック。

グローバルナビメニュー色/幅

ページ下部にある「グローバルナビメニュー色」「グローバルナビメニュー幅」が編集対象となります。

現在の初期設定状態だと、

初期設定のメニューのデザイン

このようなデザインです。

グローバルナビメニュー色

まずは色味だけを変えてみます。

うちやま
うちやま

画像で用意したのは「#aecfdf」という色味ですが、ガンダムのロゴの色です。笑

色味を調整したら「変更をまとめて保存」をクリック。

メニューの色味が変更した画像

こんな感じになりました。

ドロップメニューも反映されています。

うちやま
うちやま

ガンダム好きの人間からしたらたまらん色味です。笑

メニューの幅

続けてメニューの幅(サイズ)も調整します。

今回は「300px」にしてみます。

調整したら「変更をまとめて保存」をクリック。

各メニューの幅

各メニューの幅が広がったのがわかります。

メニュー幅をテキストに合わせる

ちなみに「メニュー幅をテキストに合わせる」にチェックを入れると

各メニューの幅が1つずつ調整される

メニューに書かれたテキストの幅に合わせて各メニューの幅が1つずつ調整されます。

この辺りは好みの問題なので、自分のサイトにとって満足いくサイズ・色味を調整しましょう。

以上でヘッダーメニューのカスタマイズは完了です。

まとめ

メニューの色味はサイトの個性・自分の個性です。

こだわりのある方はぜひ調整してみてくださいね!

うちやま
うちやま

Cocoonの見栄えを気にする人は以下も併せてカスタマイズしよう!

ザク
ザク

サイト内のページ数が増えてきたらヘッダーメニューの直下に「通知」と呼ばれるサブメニューも導入すると機能的でおすすめです。

この機体の開発者
スミ入れがんばる
うちやま(内山智明)

新卒で入社したブラック企業で月の残業168時間、気合努力根性の精神論だけで詰められ、簡単に辞めさせてくれない毎日を過ごして退職するまでに苦労した経験がある。現在は株式会社BuildingBlockの代表となり、自身の経験を元に、会社を辞めたいのに辞められない・辞めると言い出しにくい人向けに退職や辞め方に関する情報発信を行う

うちやま(内山智明)をフォローする

お役立ち資料ダウンロード

びるぶろでは、ブログ運用に役立つ資料をご用意しています。

無料でダウンロードいただけますので、ぜひご活用ください。

>>お役立ち資料を見てみる

資料ダウンロードバナー

|д゚) ココノソンザイニキヅイチャッタ??
ブログ運営でかゆいところに手が届くびるぶろのメルマガ

SEOと猫とガンプラが好きな人が書いてるメールマガジン。以下に反応しちゃう人が読むと面白いと思うよ。

  • 月に10万PVぐらいはやってみたい
  • 上位表示できるキーワード選定を知りたい
  • クリック数を改善したい
  • CVRやCTRを上げたい
  • 私も猫が好きだよって方も是非!
Cocoon
スポンサーリンク
スポンサーリンク
\ 別部隊の仲間たちにも伝える /
びるぶろ