【無料素材でつくる】ブログのメニューバーのデザイン

本記事は、オリジナルトップページ作成シリーズの第２弾です。

関連記事

おしゃれなブログヘッダーデザイン【無料でできる方法】

さて、前回の記事ではブログのトップページをオリジナルにデザインしなおした際のBefore＆Afterをお見せしました。今回の記事からは、ブログのトップページデザインシリーズとして、それぞれのデザインを行った際に利用したC[…]

ヘッダー同様、一度作るとあまり変更する機会も少ない部分だと思います。

他のブログと差別化しつつ、あまり度がきつくないシンプルなデザインとしましょう。

トップページのメニューをどう作りたいか考えてみよう

固定ページとカテゴリごとのページをメニューに設定

まずは、メニューに含む内容を決めましょう。

このブログの場合は、

• このブログについて（固定ページ）
• 海外旅行ハック（カテゴリ）
• 海外生活の知恵（カテゴリ）
• 英語研究所（カテゴリ）
• データ分析ラボ（カテゴリ）
• ブログ研究（カテゴリ）

と、全部で６つのメニュー内容を選んでいます。

この６つという数字にも意味があります。

それは、偶数とすることで、スマホ画面から見ても２列×３段となり、きりが良いです。

また、パソコン画面で見た場合にも、１段に収まっているので無駄なスペースを使わずに済むようにしています。

スキンを設定

メニューの背景が黒色なのは、スキンで選択しているテーマによるものです。

実際の記事やアイコンなど、色を使っている部分も多いので、ブログのトップはできる限り落ち着いたテーマカラーになるように、黒色のスキンを設定しました。

スキンはCocoonの設定として、簡単にできますので、後ほど説明しますね。

メニューの文字の前にアイコンを追加 & アイコンの色を変更

上の画像でいう、海外旅行ハックの前の「青色の飛行機」の部分ですね。

メニューにはカテゴリを多く設定しているので、そのカテゴリにあったアイコンを使うことにしました。

文字だけでも十分カテゴリの内容は分かるでしょうが、色があることでそれぞれのカテゴリがより目立つと思います。

メニューをインタラクティブにする：マウスをおくと色が変わるように変更

マウスをおくと、黒い背景が白色に反転、文字は黄色になるようになっています。

通知の箇所にサイトマップへのリンクを作成

最後は、上の画像でいう下側の《気になる記事を探すサイトマップ》という部分です。

上のメニューはカテゴリごとに検索するもので、すべての記事を一気に見たい人向けに、文字のサイトマップへアクセスできるものを設置しました。

これは、Cocoonでは「通知」という項目で設定できるので、後ほど説明します。

Cocoonでオリジナルトップページのメニューを作成[CSSコード付き]

固定ページとカテゴリごとのページをメニューに設定

まずはワードプレスのダッシュボードから、外観→メニューを選びます。

メニューの画面にいくと、上の画像のように画面が現れるかと思います。

左側にある「メニュー項目を追加」の中から、メニューに追加したいものを選び、「メニューに追加」をクリックしましょう。

すると、右側の「メニュー構造」のなかに新しく追加されているかと思います。

追加したいものを全て追加できたら、メニューを保存をクリックしましょう。

もしここで、サブメニューを設定したい方は、サブメニューにしたいものを、メニューの斜め右下にドラッグすることでサブメニュー化することもできます。

わたしはサブメニューは相当記事数が多くないと逆に分かりにくいという考えなので、現時点では設定していません。

スキンを設定

続いて、スキンを設定しましょう。

上記画像のように、写真マークのアイコンにマウスを合わせることで、各スキンのイメージを確認することができます。

その上で、自分の好きなデザインのイメージを選びましょう。

このブログでは、「いつもの深海」を使わせていただいています。

メニューの文字の前にアイコンを追加 & アイコンの色を変更

良く見ている人は、「固定ページとカテゴリごとのページをメニューに設定」の画像で、「ナビゲーションパネル」が文字だけではなく、コードが入っているのに気づいた人がいるかもしれません。

実は、このコードが、アイコンを意味しています。

アイコンの追加方法

Cocoonには、「Font Awesome」というアイコンを入れる機能がもともと備わっているので、簡単にアイコンを入れることができます。

Cocoonが対応しているFont AwesomeのVer4.70を開きましょう。

こんな感じで、アイコンの一覧があるので、使いたいフォントアイコンを選びましょう。

例えば、このブログで使っている飛行機「Plane」を選んだ例で説明します。

<i class="fa fa-plane"></i> 

みたいな感じで、後半の「aria-hidden=”True”」は消してしまって大丈夫です。

ちなみに、後半に少しコードを追加することで、サイズを変えたりすることもできます。

<i class="fa fa-plane fa-lg"></i> fa-lg<i class="fa fa-plane fa-2x"></i> fa-2x<i class="fa fa-plane fa-3x"></i> fa-3x<i class="fa fa-plane fa-4x"></i> fa-4x<i class="fa fa-plane fa-5x"></i> fa-5x

また、fa-spinを足して回転させたり、fa-fwを足してアイコンの幅を合わせたりすることもできます。

<i class="fa fa-plane fa-spin fa-3x fa-fw"></i>

アイコンの色の変更方法

アイコンの色を変更するには、CSSを追加する必要があります。

CSSを追加するには、外観のテーマエディターにいきましょう。

テーマエディターを開けたら、Cocoon Childのスタイルシートを選択します。

左側の白い枠の中が、CSSを追加・編集する場所になっています。

色を変更するには、次のCSSを追加しましょう。

.my-db {color: #3498DB}.my-gr {color: #2ECC71}.my-rd {color: #E74C3C}.my-yl {color: #F1C40F}.my-or {color: #D35400}.my-pp {color: #9B59B6}

このmy-のあとは自分で決めてOKです。また、color: のあとにある、#から始まる数字は、色番号を表しています。

色番号は良くわからない人も多いと思いますが、試しに上記の＃3498DBでGoogle検索してみてください。

上の画像のように、左側に色と色番号、右側がグラデーションのようになったものが現れると思います。

この、右側の下のカラフルなグラデーションをスライドさせることで色の系統を変更し、

上の中から好みの明るさを選ぶことで、左側の色番号が自動的に更新されます。

これにより、色番号を知らない・わからないという人でも、自分の使いたい色を選べますね。

使いたい色の分だけ、「my-●●」を追加できたら、下にある「ファイルを更新」をクリックして保存しましょう。

これで色の設定はできたので、先ほどのメニュー画面（外観→メニューに戻りましょう。）

先ほど入力していたコードの後半に、「my-●●」を追加することで、色を変更することができます。

<i class="fa fa-plane fa-lg my-db"></i> fa-lg<i class="fa fa-plane fa-2x my-gr"></i> fa-2x<i class="fa fa-plane fa-3x my-rd"></i> fa-3x<i class="fa fa-plane fa-4x my-yl"></i> fa-4x<i class="fa fa-plane fa-5x my-or"></i> fa-5x

メニューをインタラクティブにする：マウスをおくと色が変わるように変更

さらにCSSに追加することで、メニューにマウスを置いた時や、選択した時の色を変更することができます。

こちらもコードをこちらに貼り付けておきます。

そのままご自分のサイトにコピペすることで、メニューをインタラクティブなデザインにしてみてください。

nav#navi,.menu-header .item-label{color: #ffffff !important; }.menu-header .current-menu-item,.menu-header .current-post-item,.menu-header .current-menu-ancestor,.menu-header .current-post-ancestor,.menu-header .menu-item:hover {color: #3538fd !important;border-bottom: 3px solid #3538fd;transition: all .2s ease;}.menu-header .current-menu-item>a .item-label,.menu-header .current-post-item>a .item-label,.menu-header .current-menu-ancestor>a .item-label,.menu-header .current-post-ancestor>a .item-label,.menu-header .item-label:hover{color: #3538fd !important;transition: all .2s ease;}

通知の箇所にサイトマップへのリンクを作成

最後に、メニューの下に通知を配置して、サイトマップ（他の固定ページなどでも良いです）へのリンクを作成してみましょう。

通知の設定は、「Cocoon設定」から「通知」をクリックすることで変更ができます。

まずは通知表示のチェックをいれて、通知メッセージ、通知URLを入力しましょう。

他にも通知タイプや色を変更することで、自分のブログにあったデザインに変更できます。

追加：メニー項目の幅を変える方法

2019年5月12日追記

その後、カテゴリを再編集したことで、メニュー項目が増えました。

しかし、そうすると当初考えていた通り２段になってしまいます。

これもCSSを用いることで調整できましたので、コードを紹介しますね。

.navi-in > ul > li{  width: auto;}.navi-in > ul > li > a{  padding-left: 1.5em;  padding-right: 1.5em;}

padding-left: 1.5em;
padding-right: 1.5em;

の1.5em の箇所を大きくするほど、メニュー間の間隔が広くなり、逆に値を小さくするほど間隔も狭くなります。

まとめ：CSS x Cocoonでオリジナルトップページのメニューを作成

以上、この記事では、CSSや便利なツールを用いて、オリジナリティあるトップメニューを作成していく手順をまとめました。

アイコンや色を自分のサイトに合わせて変えてみて、よりデザイン性の高いブログにしてみてください！

もし、記事をみて、ブログを更新してみたよという方がいたら、ご連絡いただけると嬉しいです。