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

アイキャッチ画像Cocoonカスタマイズ

WordPressの無料テーマ「Cocoon(コクーン)」。

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


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


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

HARU channelトップページ

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

HARU channel トップページ

今回は、

  • ナビゲーションメニュー

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

Webアイコンフォントの利用(Font Awesome)

ナビゲーションメニュー FontAwesome

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


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

Font Awesome(フォントオーサム)とは?

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

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

Font Awesomeバージョン切替え【4→5】

Cocoon設定→サイトアイコンフォント

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

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

FontAwesomeサイト

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

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


FontAwesomeサイト

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

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


FontAwesomeサイト

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


FontAwesomeサイト

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

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


FontAwesomeサイト

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

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

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

ヘッダーメニュー編集 FontAwesome

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


ヘッダーメニュー編集 FontAwesome

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

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


ナビゲーションメニュー FontAwesome

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


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

ナビゲーションメニュー ビフォーアフター

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


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

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

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

PC版 ナビゲーションメニュー ビフォーアフター

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

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

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

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

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;
}

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

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

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

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

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

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


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

左右に仕切り線を入れる

PC版 ナビゲーションメニュー
.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 3行目の「box-shadow」について、値を複数指定していて少し難しいのですが、これを使いこなせるようになると、色々な影をつけることができます。

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

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

スマホ版 メニュー 主項目・副項目 カスタマイズ
.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」の超便利な使い方を総まとめしました。具体的な表現例や「使うことにどんなメリットがあるのか」なども紹介しています。



簡単に説明すると、上記4行目「position: absolute;」は、1つ前に出てきた2行目「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」ですが、主項目・副項目ともにタップした時に透過させています。

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


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

HARU channelトップページ

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

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

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

コメント

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