【Cocoonカスタマイズ】グローバルメニュー設定とメニューアイコン

Cocoonカスタマイズ
スポンサーリンク

記事がいろいろ増えてきたところで、メニューの設定をしたいと思いまする。

ぱぷれさん
ぱぷれさん
こういうの。あったらべんり。

いろいろカスタマイズも出来ますが、シンプルに設置と、あとはメニューの文字列の前にアイコンを表示させるところまでやりたいと思います。

グローバルメニューの設定

テーマがCocoonである場合、グローバルメニューは管理画面から設定できます。
なんでも管理画面から設定できるの、うれしいですよねーえ。楽だし。

[外観]→[メニュー]から設定することができます。

メニューの内容設定

初期設定の場合は、まず新しくメニューをつくりましょう。

何なのか分かるように名前をつけて、新規追加します。

「Home」メニューの作成

続いて、いちばん左端の「Home」リンクを作成します。

左にあるボックスの[カスタムリンク]を選択すると中身が開きますので、URLのところにブログのトップページのアドレスを入力、リンク文字列のところに「Home」とか「トップページ」とかいろいろ好きな言葉を入力して、メニューに追加しておきます。

カテゴリーメニューの作成

次に、各カテゴリーを追加します。

ボックスの[カテゴリー]を選択すると中身が開き、追加したいカテゴリーを選べます。追加したいものにチェックを入れて、メニューに追加します。

私はトップカテゴリーしかメニューに表示させていませんが、すべて追加することもできます。
追加したときは上から順番に並んでいますので、順番を入れ替えたり階層化したりしておきましょう。

階層化しておくと、サブメニューとして開くことができるようになります。
並べ替えは、マウスで移動させることができますので、とても簡単に操作して変更できます。

ぱぷれさん
ぱぷれさん
最後にメニュー保存するの忘れないよーにねー。

メニューの表示位置設定

メニューはつくっただけでは表示されません。
[位置の管理]タブから、表示位置を設定して初めて表示されます。

ヘッダーナビのプルダウンから、先ほど作成したメニューを選び、保存したら設定完了です。
ブログに、メニューが表示されるようになっています。

ヘッダーにあるグローバルメニューのデザイン設定は、Cocoon設定の[ヘッダー]タブからできますので、そちらを覗いてみてください。

グローバルナビのメニューを設定する方法
主にパソコンなどで表示されるグローバルナビメニューの設定方法です。サブキャプション機能で補足説明を入力することも可能です。

メニューアイコンの設定

次に、メニューにアイコンを設定する方法です。
アイコンは、Font Awesomeを使って追加しています。Cocoonは最初からFont Awesomeが入っていますので、使うために設定する必要はありません。

Font Awesomeはさまざまなアイコンがフォントの形で使用できる素敵なものなので、有効活用するとべんりなのです。

ぱぷれさん
ぱぷれさん

こんなのもありまする。AボタンとBボタンしかないから、ファミコンかな?

Font Awesomeでアイコンを選ぶ

アイコンは、Font Awesomeのサイトから探します。
CocoonにインストールされているFont Awesomeは、Ver.4.7.0になりますので、そちらから探しましょう。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

最新版は5.0になってますので、そこから探すと追加分のアイコンは表示できません。

ぱぷれさん
ぱぷれさん
5.0じゃないのは、たぶんAMPの関係…?かな。そのうち対応するんじゃないかな?って思ってます。のんびり待ちますの。

お好きなアイコンを見付けたら、コードをコピーします。

<i class=”fa fa-home” aria-hidden=”true”></i>

ホームアイコンだったら、こんな感じですね。
ただ、これだとちょっとだけ過不足あるので、変更しちゃいます。

<i class=”fa fa-home fa-fw”></i>
ぱぷれさん
ぱぷれさん
aria-hidden=”true”を削除して、fa-fwを足しただけー。

aria-hidden=”true”は、あっても構わないので特に消さなくても大丈夫です。
fa-fwは、アイコンと文字の間に隙間をちょっと設けるための記述ですので、空けたくない人は追加しないでください。

メニューラベルに追加する

コードを取得したら、メニューの設定画面から追加します。

ぱぷれさん
ぱぷれさん
コードが変更されてないばーじょんなのは気にしなーい。

アイコンを追加したいメニューの[ナビゲーションラベル]に、先ほどのコードを追加します。
これだけで、メニューにアイコンが追加されます。

まとめ

メニューアイコンが必要か不要かってのは人によってあるとは思うんですが、個人的には文字だけよりアイコンで表示してあげた方が分かりやすいとは思ってます。

ただ、関連性を持たせないといけないから、ちょっと何にでも合うってわけでもないところはありますけれども。
可能であるなら、やっといた方がいいカスタマイズなのかな?って思います。

ぱぷれさん
ぱぷれさん
そのうち、他のフォントアイコンとか、オリジナルアイコンを設定する方法もやろうとは思いますです。

コメント

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