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

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

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

カスタマイズ箇所グローバルメニュー
カスタマイズ方法CSS
テンプレート変更なし
コピペの可否100% 可能

Simplicity を利用されている方の中には、ナビゲーションメニューを階層化している方もいらっしゃるでしょう。

ただ、デフォルトのままでは、子メニューのクリック率は極めて低いはずです。

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

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

見ただけで子メニューがあると分かる人は、1人もいないでしょう。

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

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

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

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

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

Font Awesome で下矢印を表示

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

子テーマの style.css に以下の 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 が生成されるため、コピペで指定が可能です。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする