【Cocoon】ブログのグローバルナビをかっこよくする方法【WordPressカスタマイズ】

Cocoonでグローバルメニューをカスタマイズする方法ブログ

WordPressの無料テーマCocoonを使っていて、もっと見栄えを良くしたいなと考える方に向けて、メニューのデザインを変更する方法をご紹介します。

 

中級者向けの設定もあるのでバックアップを取ってから、子テーマを利用することをおすすめします。

 

1. Cocoonでグローバルナビをかっこよくする方法

Cocoonでグローバルナビ(メニュー)をかっこよくする方法をご紹介します!

 

ご紹介する方法は以下3つです。

 

ご紹介するメニューのカスタマイズ方法

  • 日本語のメニューの下に英語表記を入れる
  • メニューの前にアイコンを付ける
  • メニューの背景をグラデーションにする(中級者向け)

 

最終的な完成イメージはこちら。

Cocoonでグローバルメニューをカスタマイズする方法

 

2. 日本語のグローバルナビの下に英語表記を入れる

デザインでよく使われる装飾として、日本語のメニュー名の下に英語表記を入れる方法をご紹介します。

完成イメージはこちら。

Cocoonでグローバルメニューをカスタマイズする方法

 

2-1. WordPressの管理画面にログインします。

 

2-2. 下記の通り操作します。

Cocoonでグローバルメニューをカスタマイズする方法

① 「外観」→「メニュー」の順にクリックします。

② 「編集するメニューを選択」の右から、編集したいメニューを選んで「選択」ボタンをクリックします。
ここでは「メイン(ヘッダーメニュー)」とします。

Cocoonでグローバルメニューをカスタマイズする方法

③ 「メニュー構造」で、変更したいメニュー名の横の▼をクリックします。

④ 「説明」の欄に文字を入力します。※ここでは「HOME」と入力しました。
同様に、他のメニューの説明にも追加しましょう。

⑤ 最後に「メニューを保存」をクリックします。

 

作業はこれだけです!

 

3. グローバルナビの前にアイコンを付ける

メニュー名の左にアイコンを付ける方法をご紹介します。

完成イメージはこちらです。

Cocoonでグローバルメニューをカスタマイズする方法

 

ここではFontAwesomeというサービスを利用します。

アイコンを簡単に設置することができます。

 

3-1.FontAwesomeのサイトにアクセスします。

 

3-2.欲しいアイコンを連想させる単語を英語で入力してください。
例として「ホーム」の手順をご紹介しますね。

「home」と入力すると、家のアイコンが表示されるので、クリックします。

Cocoonでグローバルメニューをカスタマイズする方法

 

3-3. 下図の赤枠のように「<i class=”fas fa-home”></i>」の部分をクリックします。
クリックするだけでコピーされます。

Cocoonでグローバルメニューをカスタマイズする方法

 

3-4. WordPressのダッシュボードから「外観」→「カスタマイズ」→「メニュー」→「メイン」の順にクリックします。

Cocoonでグローバルメニューをカスタマイズする方法

 

3-5. 下記の通り操作します。

Cocoonでグローバルメニューをカスタマイズする方法

① アイコンを入れたいメニュー名(ホーム)の右側にある▼をクリックします。

② 「ナビゲーションラベル」の入力欄で「ホーム」という文字の左に、先ほどコピーしたコードを貼り付けます。
コードを貼り付けると、もともと入っていた文字が消えてしまうことがあるようです。
その時はコードの後に文字を入力し直してください。

③ 貼り付けたイメージが③です。

 

3-6. 手順3-1から3-5に従い、他のメニューにもアイコンを入れていきます。

アイコンは左のメニューから探していくこともできます。

英語表記ですが、そんなに難しい単語はないのでご安心を。

Cocoonでグローバルメニューをカスタマイズする方法

 

参考までに、当サイトで使っているコードは以下の通り。

 

てつごろぐのメニューアイコン

ホーム:<i class=”fas fa-home”></i>

Web:<i class=”fas fa-globe”></i>

仕事:<i class=”fas fa-building”></i>

人生:<i class=”fas fa-user-alt”></i>

当サイトについて:<i class=”fab fa-redhat”></i>

 

3-7. 最後に「公開」ボタンをクリックします。

 

これでアイコンが入りました!

 

 

■アイコンとメニュー名の間にスペースを入れる方法

読者の方の中には、メニュー名とアイコンの隙間が狭すぎると感じる方がいるかもしれません。

てつごろう
てつごろう

僕はすごく気になるので調整しているんだよ。

調整の方法は2通りあります。

簡単な方法と、プロっぽい方法です。

 

(1)簡単な方法

下記のようにコードとメニュー名の間に半角スペースを入れるだけ。

 

<i class="fas fa-home"></i> ホーム

 

基本的にはこれで問題ないです。

 

(2)プロっぽい方法【中級者向け】

中級者向けの方法です。
念のためAll-In-One WP Migrationプラグインなどを使って事前にバックアップを取ることをおすすめします。

 

① 「外観」→「カスタマイズ」→「追加CSS」を開きます。

② 以下のコードを入力します。

 

.menu-item i {
margin-right: 5px;
}

 

「公開」ボタンをクリックして完成です!

 

この方法をおすすめする理由
個人的には半角スペースよりも、CSSを変更するこちらの方がおすすめです。
HTMLは文書の構造を定義し、CSSは見た目を定義をすることがそれぞれの役割です。アイコンと文字の間を空けるというのはデザイン上の問題ですよね。半角スペースはあくまで「文字」なので、見た目を文字で強引に調整するのは推奨されていないからです。
てつごろう
てつごろう

かなり細かいけど大事な考え方なんだよ。

 

4. グローバルナビの背景をグラデーションにする【中級者向け】

メニューの背景をおしゃれに変更する方法をご紹介します。

Cocoonにはたくさんのデザインテンプレート(スキン)がありますが、ここではメニューだけをグラデーションに変更する方法をご紹介します。

 

スキンを変更すればブログ全体のデザインを簡単に変更することができますが、一部分だけ変えたいという人もいると思います。

 

ここでご紹介する方法を応用すれば、よりオリジナル感を出して他のサイトと差別化することができます!

完成イメージはこちらです。

Cocoonでグローバルメニューをカスタマイズする方法

 

以下の手順を進める前に、念のためAll-In-One WP Migrationプラグインなどを使ってバックアップを取ることをおすすめします。
また、Cocoonの子テーマの利用をおすすめします。

 

4-1.WebGradientsのサイトにアクセスします。

WebGradientsは、グラデーションのコレクションから好きなデザインを選んで、CSSのコードをコピーできるサイトです。

 

CSSとは?

Cascading Style Sheetsの略。Webサイトの見た目を整えるためのファイルで、スタイルシートとも呼びます。
Webサイトは一般的にHTML、CSS、JavaScriptなどの何種類かのファイルから構成されており、HTMLは文章の構造(見出し、文字、画像など)の定義をするのに対し、CSSはデザインや見た目(スタイル)を定義するためのファイルです。

 

4-2. お好きなデザインを探し、右下の「Copy CSS」をクリックします。

Cocoonでグローバルメニューをカスタマイズする方法

 

4-3. WordPressのダッシュボードから「外観」→「カスタマイズ」→「追加CSS」の順にクリックします。

Cocoonでグローバルメニューをカスタマイズする方法

 

4-4. 入力欄に(他に記入されているものがあれば最後などに)下記のコードを入力します。

.navi {

}

 

4-5. WebGradientsでコピーしたコードを、{ と } の間に貼り付けます。

例えばこのようになります。

.navi {
background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
}

 

入力前と後のイメージはこんな感じです。

Cocoonでグローバルメニューをカスタマイズする方法

 

4-6. 画面の右側で表示されるプレビューで確認します。

Cocoonでグローバルメニューをカスタマイズする方法

 

問題なければ「公開」ボタンを押しましょう。

 

これでメニューの変更が完了です!

 

ブログをカスタマイズする方法はたくさん

Cocoonでグローバルナビをカスタマイズする方法として、下記の手順をご紹介してきました。

 

  • 日本語のメニューの下に英語表記を入れる
  • メニューの前にアイコンを付ける
  • メニューの背景をグラデーションにする(中級者向け)

 

WordPressやCocoonでは本当にさまざまなカスタマイズ方法があるので、色々と試してみてくださいね。

他にも簡単にカスタマイズする方法については、今後、随時公開してきます!

 

■WordPressを使ったブログの始め方

必見
Wordpressを使ってブログを簡単に始める方法
WordPressを使ったブログの始め方【環境を作る】
(1)サーバーやドメイン、SSLなど難しい環境構築を簡単に。初心者の方にも分かりやすく手順を解説しています。
WordPress設定方法
WordPressの設定方法【初心者向け】
(2)ブログを立ち上げたらまずやるべき設定をまとめました。
Google アナリティクスの導入手順と基本的な使い方
ブログのアクセス解析をする方法【Google アナリティクスの基礎】
(3)Google アナリティクスの登録方法と基本的な使い方。専門用語の解説付きで解説します。
Google Search Consoleの登録方法と基礎
Google Search Consoleの登録方法と基本的な使い方【初心者向け】
(4)Google Search Consoleの登録手順と基本的な使い方。2020年版の最新の画像20枚を使っています。
Google AdSenseの始め方
ブログ収益化の方法と始め方①【Google AdSense】
(5)ブログを収益化する広告の一つGoogle AdSenseの概要と始め方を解説。
注目
アフィリエイトの始め方と心構え
ブログ収益化の方法と始め方②【アフィリエイトの始め方と心構え】
(6)ブログ収益化手段の一つ、アフィリエイトの始め方を解説。長続きする秘訣や、稼いでいくための心構えも。
WordPressのカスタマイズ サイドバー編
WordPressのカスタマイズ方法【初心者向け】サイドバー
(7)サイドバーに人気記事、カテゴリーの投稿数の表示、Twitterのタイムラインを埋め込む方法を解説。
WordPressのテーマCocoonでトップページをカスタマイズする方法
WordPressのトップページを1クリックでカスタマイズする方法【Cocoon版】
(8)Cocoonでトップページをカスタマイズする方法。1クリックでカテゴリーごとに表示できます。
Cocoonでグローバルメニューをカスタマイズする方法
【Cocoon】ブログのグローバルナビをかっこよくする方法【WordPressカスタマイズ】
(9)グローバルナビにアイコンや英語表記を追加したり背景をグラデーションにする方法
Cocoonでカテゴリーページをカスタマイズ
Cocoonでカテゴリーページに人気記事を表示する方法【WordPressカスタマイズ】
(10)カテゴリーページに人気記事、見出し、説明、アイキャッチなどを表示して”まとめページ”にする方法
新着
WordPressでフッターをカスタマイズ
WordPressでフッターをカスタマイズする方法【初心者向け】
(11)フッターにメニューを追加したり編集する方法

コメント

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