ブログテーマ

Cocoonのグローバルメニューをカスタマイズしよう!FontAwesomeの使用方法も

この記事では、ワードプレステーマCocoonのグローバルメニューのカスタマイズ方法について記載していきます。

Cocoonのグローバルメニューってシンプルなのは良いのですが、デフォルトでは少し物足りないように思いますよね。

実は、ちょっとした工夫でCocoonのテーマとは違うように見せることができるのです。

少しでも自分のサイトを魅力的にしたい!

カスタマイズに興味がある!

という方は読んでみてください。

グローバルメニューとは

まずはグローバルメニューの設定方法です。

今回この記事で伝えるグローバルメニューとは画像の部分を指します。

 

上記のブログでは、アドセンスに合格するために、ホーム、プライバシーポリシー、サイトマップ、お問い合わせ等、ブログを運営するうえで最低限の固定ページを掲載しています。

 

カンタンに、Cocoonのグローバルメニューカスタマイズでできることは以下となります。

ポイント

  • 文字色
  • 背景色
  • Fontawesome

 

グローバルメニューの作り方

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

設定箇所:ダッシュボード⇒外観⇒カスタマイズ⇒メニュー⇒メニューの新規作成

 

カスタマイズ画面を開いたら、メニュー⇒メニューの新規作成 から、設定が可能です。

 

 

ぬっくん
メニューの名前は自分の覚えやすい名前でOKです。

 

グローバルメニューの名前を入力

新規作成を押すと、メニュー名の入力が求められます。

 

ここで、グローバルメニューの名前を入力します。

メニューは複数作成できるため、場所ごとに覚えやすいメニュー名を入力しておきましょう。

ここでは「ヘッダーメニュー」としておきます。

名前の追加が完了したら、「+項目を追加」からメニューに追加する項目を選んでいきましょう。

 

ヘッダーメニューに掲載できるものは、カスタムリンク(指定のURLページ)、固定ページ、投稿ページ、カテゴリー、タグなどがあります。

良く見られるカテゴリーなどを追加したり、カスタムリンクで自分のnote等を追加しておくのも良いでしょう。

 

メニューの位置設定

メニューの名前を入力する際、すぐ下に「メニューの位置」についての項目があるかと思います。

それらの位置を簡単に説明します。

 

  • ヘッダーメニュー :現在の画像の場所
  • ヘッダーモバイルメニュー :スマホで見た時にロゴの下に表示します
  • ヘッダーモバイルボタン:ヘッダー部分にハンバーガーメニューを表示
  • フッターメニュー:サイトの一番下にメニューを表示
  • フッターモバイルボタン:画面の下部にボタン形式でメニューを表示
  • モバイルスライドインメニュー:フッターにハンバーガーメニューを表示

 

メニューは複数作成できます。

チェックボックス形式になっていて、PCで表示する場合とモバイル(スマホ)で表示する場合はそれぞれ設定箇所が異なる事だけ覚えておいてください。

自分が見やすいと思う位置にそれぞれのメニューを設置してみましょう。

 

グローバルメニューの色調整

グローバルメニューのカラーは設定箇所が異なります

設定箇所:ダッシュボード⇒Cocoon設定⇒ヘッダー⇒グローバルナビメニュー色

 

 

今回のサイトでは、「#004B64」のカラーを採用してみました。

 

 

グローバルメニューの幅の調整

グローバルメニューの幅は調整することができます。

※グローバルメニューは「トップメニュー」「グローバルナビ」といった名前もあります。

 

グローバルメニューに掲載するメニュー数が少し多そうだと思ったら、幅の調整をしてみましょう。

設定箇所:ダッシュボード⇒Cocoon設定⇒ヘッダー⇒グローバルナビメニュー幅

 

ぬっくん
デフォルトでは均一になっているけれど、「グローバルメニュー幅を均一にせずにテキスト幅で設定する」にチェックを付けると、名前毎にグローバルメニューの幅が変わるようになるよ

 

 

FontAwesomeを使用してみよう

FontAwesomeはカンタンに言えば、ブログ内に文字と同じように表示できるアイコンの事を指します。

画像でアイコンを表示するとぼやけがちですが、FontAwesomeを使用すると、

拡大してもぼやけいない事や、色もサイズも変更可能。

 

少しシンプルなCocoonにとっては見栄えが良くなるかもしれません

ただ、多少htmlコードを操作するので、バックアップを取った上で挑戦してみましょう。

 

FontAwesomeの使い方

設定箇所:ダッシュボード⇒外観⇒テーマエディター⇒heder.php

 

header.phpの一番下に下記のコードを貼り付けます

 

次に使用したいアイコンを見つけます。

下記ページにはアイコンの名前を入力すれば、アイコンが表示され、コピペするだけで無料で使用することができます。

例えば、メールで検索するとこのような感じ。

右上に記載されている<i class~の部分を丸ごとコピーし、メニュー設定時の

「ナビゲーションラベル」の名前の隣に貼り付けます

 

 

すると、このような感じでアイコンが表示されます。

 

こちらのアイコンはグローバルメニューだけでなく、スライドメニューの時にも使用できます。

以下のコードをコピペし、Style.cssに貼り付けるだけで設定可能です。

設定箇所:ダッシュボード⇒外観⇒テーマエディター⇒Style.css

 

 

ぬっくん
コードを触るときはバックをアップを取ろうね!

 

終わりに

以上、ワードプレステーマCocoonのグローバルメニューの設定方法についてまとめてみました。

比較的簡単に通常のCocoonのブログとは異なる雰囲気を出すことができます。

他と違うブログに魅せたいなら、ぜひ試してみてください。

 

もし、Cocoonで少し記事のデザインで物足りないと感じたら

Afiinger5を購入してみるのも良いですよ。

当ブログでも、Affinger5を採用しています。

少しブロガーレベルをアップしたい人にオススメです。

 

Affinger5の購入はコチラ

 

 

-ブログテーマ

Copyright© ぬっくんnote , 2020 All Rights Reserved Powered by AFFINGER5.