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

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

第1弾のヘッダー編もよろしければ読んでみてください。
関連記事

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

 
グリット
今回扱う「メニュー」は、セカイキのホームページでいう、下記画像の赤い部分です。

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

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

こんな人にオススメです。
  • ワードプレスを使ってブログを作り始めたけど、細かい設定の仕方がわからない
  • 特にCocoonをテーマとして選んでいる
  • ブログのデザインにこだわりたい
Ad

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

 
さるまる
セカイキのサイトでは、どんなところをこだわって作っているんだい?
 
グリット
そうだね。
こだわったのは、見やすさと目を引くような色合いかな!

最初の初期設定から作業した内容は、ざっとこんな感じだよ。

初期設定からの変更内容
  • 固定ページとカテゴリごとのページをメニューに設定
  • スキンを設定
  • メニューの文字の前にアイコンを追加
  • アイコンの色を変更
  • メニューをインタラクティブにする:マウスをおくと色が変わるように変更
  • 通知の箇所にサイトマップへのリンクを作成
 
さるまる
リストで言われても良くわからないから、1つずつ説明してほしいな!
 
グリット
OK!
じゃあ、具体的な作業の前に、まずはどんなところを変更しているのか確認してみよう。

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

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

このブログの場合は、

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

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

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

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

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

  • メニューに含める内容は偶数にしよう
  • メニューは1段で収まるように調整しよう

スキンを設定

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

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

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

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

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

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

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

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

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

 
グリット
実際にマウスをメニューに持っていただけると分かりやすいと思います。
 
さるまる
なんか、有料テーマみたいでカッコいいね!

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

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

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

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

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

 
さるまる
どんなことを変えたのかはだいたいわかったから、そろそろやり方を教えてよ。
CSSとか良くわからないから、コピペだけの簡単なのだと良いな!
 
グリット
OK!それでは、ここからは具体的な作業方法について説明していきましょう!
Cocoon以外のテーマを使っている人はやり方が違うところもあるので、それぞれのテーマで確認してみてください。

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

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

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

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

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

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

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

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

スキンを設定

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

 
グリット
スキンは、メニューのCocoon設定から、スキンを選択することで変更ができます。

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

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

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

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

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

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

アイコンの追加方法

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

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

 
グリット
新しいバージョンがあると言われても、Ver 4.70を使うように指定するのを忘れずに。

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

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

 
グリット
垢枠の中にある、コードをコピーしましょう。
<i class="fa fa-plane"&gt;</i&gt; 

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

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

<i class="fa fa-plane fa-lg"&gt;</i&gt; fa-lg<i class="fa fa-plane fa-2x"&gt;</i&gt; fa-2x<i class="fa fa-plane fa-3x"&gt;</i&gt; fa-3x<i class="fa fa-plane fa-4x"&gt;</i&gt; fa-4x<i class="fa fa-plane fa-5x"&gt;</i&gt; fa-5x

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

<i class="fa fa-plane fa-spin fa-3x fa-fw"&gt;</i&gt;

アイコンの色の変更方法

アイコンの色を変更するには、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"&gt;</i&gt; fa-lg<i class="fa fa-plane fa-2x my-gr"&gt;</i&gt; fa-2x<i class="fa fa-plane fa-3x my-rd"&gt;</i&gt; fa-3x<i class="fa fa-plane fa-4x my-yl"&gt;</i&gt; fa-4x<i class="fa fa-plane fa-5x my-or"&gt;</i&gt; 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&gt;a .item-label,.menu-header .current-post-item&gt;a .item-label,.menu-header .current-menu-ancestor&gt;a .item-label,.menu-header .current-post-ancestor&gt;a .item-label,.menu-header .item-label:hover{color: #3538fd !important;transition: all .2s ease;}
 
グリット
#の後の番号を変えることで、文字の色などを変えたりできます。

自分のブログのテーマにあわせて、いろいろと試してみてくださいね!

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

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

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

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

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

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

2019年5月12日追記

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

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

これも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や便利なツールを用いて、オリジナリティあるトップメニューを作成していく手順をまとめました。

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

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

今日のまとめ
  • メニューを独自に作成するのは6ステップで完了!
  • Font Awesomeのアイコンは超便利
  • 色を変更してオリジナリティを出そう
  • CSSは良くわからなくても、コピペ&ちょっとだけ変えてみるでOK!

 

記事はいかがでしたか?

読んでいただいた方に関心がありそうな広告が表示されます。

<スポンサーリンク>

最新情報をチェックしよう!
Ad