クリック率が高い子メニューにするカスタマイズ

子メニューに下矢印を表示

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

ナビゲーションメニューを階層化している方もいらっしゃるでしょう。

ただ、単に階層化しているだけでは、子メニューのクリック率は極めて低いはずです。

例えば下の画像の「メニュー 1」には、3つの子メニューを設置しています。

子メニューがあると分からない例

見ただけで子メニューがあると分かる方は、おそらくいらっしゃらないでしょう。

では、下の画像の「メニュー 1 」は、どうでしょうか?

すぐに子メニューがあると分かる例

下矢印が付いているため、さらにメニューがあることがすぐに分かります。

さらにメニューがあることが瞬時に分からなければ、誰も子メニューをクリックしてはくれません。

クリックされないメニューはメニューの機能を果たさないため、親メニューに下矢印を表示されてはいかがでしょうか。

Font Awesome で下矢印を表示

下矢印を表示する最も手軽な方法が、 Font Awesome の caret-down を使うもの。

以下の CSS を指定します。

.menu > .menu-item:nth-child(1) > a:after {
  content: '\f0d7';
  display: inline-block;
  font: 16px/1 FontAwesome;
  margin-left: 8px;
}

これで 1 つ目の親メニューの右に、下矢印が表示されます。

.menu > .menu-item:nth-child(2) > a:after にすると、 2つ目の親メニューに指定できます。

.menu > .menu-item:nth-child(1) は、メニューの id や class でも OK 。

ブラウザのデベロッパーツールで、 1つ目のメニューの id または class を確認します。

デベロッパーツールでメニューのidとclassを確認

CSS は class での指定が理想なため、下記のように指定します。

.menu-item-91 > a:after {
  content: '\f0d7';
  display: inline-block;
  font: 16px/1 FontAwesome;
  margin-left: 8px;
}

セレクタの指定方法は、お好きな方をお選びください。

CSS で三角形を指定する

Font Awesome のアイコンが気に入らない場合には、自分で三角形を作ることも可能です。

例えば、下記のように CSS を指定してみます。

.menu > .menu-item:nth-child(1) > a:after {
  border-color: #111 transparent transparent transparent;
  border-style: solid;
  border-width: 8px 4px 0 4px;
  content: '';
  display: inline-block;
  margin-left: 8px;
  position: relative;
  top: -1px;
}

1つ目の親メニューに、 CSS で作成した三角形が表示されました。

CSSで作成した三角形

もちろんこちらも、.menu > .menu-item:nth-child(1) はメニューの id や class でも 指定できます。

三角形を作る際には、「 CSS 三角形作成ツール」を使うとすごく便利。

三角形の大きさ、矢印の向き、色など、自由自在に簡単に作成できます。

しかも、自動的に CSS が生成されるため、コピペで指定が可能です。