カッコいい!ガンダムのフリー素材が使えるよ >>

【第105話】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の見栄えを気にする人は以下も併せてカスタマイズしよう!

ザク
ザク

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

この機体の開発者
スミ入れがんばる
うちやま

株式会社BuildingBlockの代表。第08MS小隊のガンプラはけっこう作った。アレルギー性鼻炎もち。天パー。Web制作や集客対策とかもやってる。

うちやまをフォローする
Cocoon
スポンサーリンク
\ 別部隊の仲間たちにも伝える /
びるぶろ