Cocoonカスタマイズ〜HARU channelを作ってみよう〜②【ナビゲーションメニュー】

WordPressの無料テーマ「Cocoon（コクーン）」。

それを使って、私が当サイト「HARU channel」をどのようにカスタマイズしてきたのか、その過程をご紹介しています。

前回に引き続き、コーディング（CSS）を使ったカスタマイズについて説明します。
（紹介するコードは、全てコピペして使用していただいて構いません。）

前回は、以下の状態まで進みました。

これを最終的に、以下の状態にまでカスタマイズしていきます。

今回は、

ナビゲーションメニュー

のCSSのカスタマイズについて、PC版・スマホ版ともに説明していきます。

Webアイコンフォントの利用（Font Awesome）
PC版ナビゲーションメニュー
1. 背景色にグラデーションを入れる
2. 左右に仕切り線を入れる
スマホ版ナビゲーションメニュー

Webアイコンフォントの利用（Font Awesome）

当サイトのナビゲーションメニューでは、上の画像の青線で囲っている部分のように、メニュー名の左にアイコンを挿入しています。

これらは、Font Awesome（フォントオーサム）というものを利用して表示させています。

Font Awesome（フォントオーサム）とは？

Webアイコンフォントを提供しているサービス。
2021/08現在、Font Awesomeにはバージョン4と5があり、初心者の方は最新のバージョン5（Font Awesome 5）を利用するのがおすすめです。
（当サイトでもFont Awesome 5を利用しています。）

Font Awesome 5を利用して、ナビゲーションメニューにアイコンを表示させる方法をご紹介します。

Font Awesomeバージョン切替え【４→５】

管理画面の「Cocoon設定→全体→サイトアイコンフォント」のところで、「Font Awesome 5」を選択し、「変更をまとめて保存」をクリックします。

Font Awesome5でアイコンのコードを取得

Font Awesome 5のサイトにアクセスします。

上部メニューの「Icons」をクリックします。

アイコンの一覧ページが表示されます。

色が濃いのが無料版、色が薄いのは有料版のアイコンです。
（有料アイコンは、別途Pro版の契約が必要となります。）

左サイドメニューの「Free」をクリックすると、表示されるアイコンが無料版だけになります。

上部の検索ボックスに、英語でキーワードを入力して、アイコンを検索しましょう。
（※日本語には対応していません。）

使用したいアイコンを選んでクリックします。

アイコンの詳細ページに移動します。

<i class = “fas ◯◯◯” ></i> の部分をクリックするとそのままコピーできます。
（◯◯◯ の部分はアイコンによって違います。）

管理画面でコードを貼り付け

管理画面の「外観→メニュー」に移動して、「（ヘッダーメニュー）」を選択します。

「メニュー構造」の欄で、「▼」をクリックして編集画面を開きます。

先ほどコピーしたコード（ <i class = “fas ◯◯◯” ></i> ）を、ナビゲーションラベルの欄に貼り付け、「メニューを保存」をクリック。

ナビゲーションメニューに、アイコンを表示させることができました！

同じ方法で、全てのメニュー名の左側にアイコンを表示させていきます。

アイコンがあるだけで、見た目がちょっと可愛らしくなりますね♪笑

CocconでのFont Awesomeの使い方については、以下の記事が非常に分かりやすかったので、よければ是非ご覧ください。

【Cocoon】アイコンフォントの使い方｜Font Awesome

WordPressのCocoon(コクーン)でFont Awesome(フォントオーサム)のWEBアイコンフォントの使い方を解説します。サイトで見かける文章にアイコンを入れる表現ができます。動き(アニメーション効果)も可能です。

アイコンフォントにアニメーションを付ける方法など、色々と解説してくれています。

PC版ナビゲーションメニュー

続いて、コーディング（CSS）のカスタマイズについて解説していきます。
（コードの入力箇所が分からない方は、こちらをご覧ください。）

上の画像は、パソコンサイズの画面のナビゲーションメニューです。

主な変更点は以下の通り。

背景色にグラデーションを入れる
左右に仕切り線を入れる

CSSはこちらです↓↓

/************************************
** ナビゲーションメニュー
************************************/
.navi {
  background: linear-gradient(0deg, #ba7373, #f2bfbf);
}

.navi li {
  border-left: solid 1px white;
}

.navi li:last-of-type {
  border-right: solid 1px white;
}

以下、カスタマイズ方法の詳細を、上から順番に解説していきます。

背景色にグラデーションを入れる

.navi {
  background: linear-gradient(0deg, #ba7373, #f2bfbf);
}

下から上にかけて、#ba7373（サイトキーカラーと同じ色）〜 #f2bfbf（薄いピンク色）になるように、グラデーションを入れています。

また「0deg」のところは、数値を変えることによってグラデーションの角度を指定することができ、上下・左右・斜めなど様々な角度を設定できます。

当サイトでもこのグラデーションを非常によく使っており、とても便利なコードなので、ぜひ色々試して使ってみてくださいね。

グラデーションについては、以下の記事がとても分かりやすいです。
何度も読んで理解を深めると、色々なところで応用できると思います。

CSSのグラデーション（linear-gradient）の使い方を総まとめ！

CSSでのグラデーションの実装方法を総まとめしました。円形にする、3色以上にする、斜めにかける、片側を透明にする、画像の上に重ねる、などなど様々なパターンを紹介しています。

左右に仕切り線を入れる

.navi li {
  border-left: solid 1px white;
}

.navi li:last-of-type {
  border-right: solid 1px white;
}

全ての項目の左側に白線を入れて、最後（:last-of-type）だけ右側に白線を入れることで、左右両側に白線が入るようになりました。

スマホ版ナビゲーションメニュー

スマホ版のナビゲーションメニューは、当サイトでは左下の「メニュー」ボタンを押すと出現するようになっています。

（管理画面の「Cocoon設定→モバイル→モバイルメニュー」のところで、「フッターモバイルボタン」を設定するとこうなります）

上の画像のように、結構ガラッと変えているので、CSSの量もそこそこあります。
（我ながら自信作です。笑）

主な変更点は以下の通り。

閉じるボタン（×ボタン）を右側に移動
背景色を#fdf2ed（サイト背景色と同じ色）にする
主項目をボタンデザインにする
副項目の左側に「▶︎」を付ける

CSSはこちらです↓↓

/************************************
** モバイル版（フッターメニュー表示時）ナビゲーションメニュー
************************************/

/* ↓↓ナビゲーションメニュー、サイドバーの×ボタン */
.menu-close-button {
  margin-right: 8%;
  text-align: right;
  color: #ba7373;
  opacity: 0.7;
}
/* ↑↑ ナビゲーションメニュー、サイドバーの×ボタン */

/* ↓↓ナビゲーションメニュー、サイドバーの背景色 */
.menu-content {
  background-color: #fdf2ed;
}
/* ↑↑ナビゲーションメニュー、サイドバーの背景色 */

/*  ↓↓主項目 */
.menu-drawer > li {
  padding: 15px 0;
  line-height: 2;
  text-align: center;
}

.menu-drawer > li > a {
  border-radius: 10px;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
  background: linear-gradient(10deg, #ba7373, #f2bfbf);
  margin: 6px 0;
  padding: 4px 1em;
  border: 2px solid white;
  color: white;
}

.menu-drawer > li > a:hover {
  color: white;
  opacity: 0.6;
}
/*  ↑↑主項目 */

/*  ↓↓副項目 */
.menu-drawer .sub-menu li {
  text-align: left;
}

.menu-drawer .sub-menu li a {
  position: relative;
  padding: 0 25px;
  color: #ba7373;
}

.menu-drawer .sub-menu li a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 11px solid #ba7373;
  border-bottom: 8px solid transparent;
}

.menu-drawer .sub-menu li a:hover {
  opacity: 0.6;
}
/*  ↑↑副項目 */

以下、カスタマイズ方法の詳細を、上から順番に解説していきます。

閉じるボタン（×ボタン）を右側に移動

/* ↓↓ナビゲーションメニュー、サイドバーの×ボタン */
.menu-close-button {
  margin-right: 8%;
  text-align: right;
  color: #ba7373;
  opacity: 0.7;
}
/* ↑↑ ナビゲーションメニュー、サイドバーの×ボタン */

中央にあった閉じるボタン（×ボタン）を右側にして、色を#ba7373（サイトキーカラー）にし、少し透過を入れて優しい色合いになるようにしています。

またこのCSSで、サイドバー（プロフィールなどがある部分）の×ボタンにも、同じデザインが適用されます。

背景色の変更

/* ↓↓ナビゲーションメニュー、サイドバーの背景色 */
.menu-content {
  background-color: #fdf2ed;
}
/* ↑↑ナビゲーションメニュー、サイドバーの背景色 */

背景色を#fdf2ed（サイト背景色と同じ色）にしています。

またこの場合も、サイドバーに同じデザインが適用されます。

主項目をボタンデザインにする

.menu-drawer > li {
  padding: 15px 0;
  line-height: 2;
  text-align: center;
}

主項目（「結婚・出産」や「Web制作」にあたる部分）の行間を広くして、文字を中央に配置します。

.menu-drawer > li > a {
  border-radius: 10px;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
  background: linear-gradient(10deg, #ba7373, #f2bfbf);
  margin: 6px 0;
  padding: 4px 1em;
  border: 2px solid white;
  color: white;
}

ボタンデザインになりました。

コードの数が多いので、どのコードで何をしているのかリストでざっくりと説明すると、以下のようになります。

●border-radius → 四角い線の角を丸くする
●box-shadow → 四角い線の周りに影をつける
●background: linear-gradient(…); → 背景をグラデーションにする
●margin、padding → 余白を設定し、幅や高さなどを調整する
●border → 周りに四角い線を引く
●color → 文字色の指定

background: linear-gradient(…); は、先ほどナビゲーションメニューの背景色をグラデーションにする際にも使いましたね。

ナビゲーションメニューの場合は、0deg を指定したので、真下から真上にグラデーションになっていますが、今回は 10deg なので左下から右上にかけて少し斜めにグラデーションになっているのが、お分かり頂けますでしょうか？

上記CSS ３行目の「box-shadow」について、値を複数指定していて少し難しいのですが、これを使いこなせるようになると、色々な影をつけることができます。

以下の記事が分かりやすいので、よければ是非ご覧ください。

【CSS】box-shadowで影をつける方法とサンプル集

CSSのbox-shadowを使って影をつける方法と、コピペで使えるCSSサンプルをいくつか紹介します。向きやぼかし方、色の変え方まで詳しく解説しています。

副項目の左側に「▶︎」を付ける

.menu-drawer .sub-menu li {
  text-align: left;
}

副項目（婚活・妊活の部分）を左寄せにします。

.menu-drawer .sub-menu li a {
  position: relative;
  padding: 0 25px;
  color: #ba7373;
}

余白を入れて、「▶︎」を入れるスペースを作ります。
文字色を #ba7373（サイトキーカラー）に変更します。

.menu-drawer .sub-menu li a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 11px solid #ba7373;
  border-bottom: 8px solid transparent;
}

「▶︎」を入れて、スマホ版ナビゲーションメニューの完成です！

「::after」は「擬似要素」と呼ばれるものの1つです。
擬似要素については、以下の記事が分かりやすいので是非ご覧ください↓↓

CSSの疑似要素とは？beforeとafterの使い方まとめ

CSSの疑似要素「:before」と「:after」の超便利な使い方を総まとめしました。具体的な表現例や「使うことにどんなメリットがあるのか」なども紹介しています。

簡単に説明すると、上記４行目「position: absolute;」は、１つ前に出てきた２行目「position: relative;」とセットで使います。

今回の場合、「position: relative;」は赤い点線で囲った部分を指定していますが、その部分に対して、「position: absolute;」で三角形を作る場所を決めています。

「content: “”; 」〜「transform: translate(0, -50%); 」までが、具体的に場所を決めている部分ですね。

そして、「border-top:◯◯」〜「border-bottom: △△」の部分で三角形を作っています。
三角形を作る仕組みについては、こちらの記事が分かりやすいです↓↓

CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター

こんにちは。めぐたんです。今回からCSSのborderプロパティだけで作る三角形について、全2回に渡ってお届けします。...

タップした時に透過させる（主項目・副項目）

●主項目

.menu-drawer > li > a:hover {
  color: white;
  opacity: 0.6;
}

●副項目

.menu-drawer .sub-menu li a:hover {
  opacity: 0.6;
}

前回の記事でも出てきた「:hover」ですが、主項目・副項目ともにタップした時に透過させています。

実際にスマホ画面をタップして、試してみてくださいね♪

以上のカスタマイズをして、サイトは以下のような状態になりました。

ナビゲーションメニューの部分が、華やかな印象になりましたね。

画像で全体的に見ると分かりにくいですが笑、実際にWebページを見てみると、印象がけっこう変わると思います！

次回は、「記事一覧」「ページネーション」のCSSのカスタマイズ方法を解説します！