好きなもの、好きなだけ、盛り合わせ

横スクロールナビカスタマイズ時にCSSに追加するコード!

      2016/07/29

以前、Stinger5に横スクロールナビを導入しました。

でも実は、その時から気になっていたことが…

シェフ

これ、見る環境によっては横スクロールナビかどうかわからないんじゃ…?

これまでの横スクロールナビ

そうなんです。横スクロールナビを導入したものの、スクロールできることに気づかないユーザーがいるかもしれない不安があったんです…!

デバイスによっては固定メニューのように見えちゃうんですよね。こんな感じで。

side-scroll-1

 

「このサイトは4つのカテゴリーがあるサイトなんだな」と思ってしまいそうですよね。だから、なんとかユーザーに気づいて欲しいという思いでカスタマイズに挑戦してみました。

スクロールバーを表示する

やっぱり、これが一番ですよね!スクロールバーを表示することにより「あ、これは横スクロールナビなんだ」と認識させるんです。

ポイントは常に表示させておくこと。スクロールした時にだけバーが表示されのはユーザビリティが悪い気がするので…

  1. どのデバイスで見た時も横スクロールナビだと認識してもらう
  2. 流入したカテゴリー以外のカテゴリーにも興味を持ってもらう
  3. 回遊率アップ!ウェーイ!

これが今回の趣旨です。では早速やってみましょー!

横スクロールナビカスタマイズ!

まずは横スクロールナビ導入のコードを改めてご紹介します。どのテーマでもメニュー(ナビ)はあるはずなのでHTMLのコードは割愛しますね!こちらがCSSのコード。

nav {
    overflow: hidden;
    overflow-x: auto;
	padding-bottom: 5px;
}
nav li {
	position: relative;
    display: table-cell;
    white-space: nowrap;
	font-size: 12px;
	padding: 5px 10px;
}
nav li li {
    display: table-cell;
	font-size: 12px;
	display: inline;
	padding: 5px 10px;
	border: none;
}
nav li a {
	text-decoration: none;
    font-size:13px;
    display:inline;
    color: #1a1a1a;
}

 

こちらに以下のコードを追加するだけです。

nav::-webkit-scrollbar {
    height: 5px;
}
nav::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #fff;
}
nav::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #333;
}

カスタマイズの内容

カスタマイズの内容はこんな感じ。

  1. 最初のコードでスクロールバーの高さを指定
  2. 次のコードでスクロールバー(背景)に丸みをつけて色を指定
  3. 最後のコードでスクロールバー(動くバー)に丸みをつけて色を指定

 

Stingerシリーズをお使いの方はそのままコピペで使えちゃうはずです。(横スクロールナビを導入してからですよっ!)

それ以外のテーマをお使いの方は「nav」の部分を任意のコードにすればOKです。カスタマイズ後の横スクロールナビがこれ。

side-scroll-2

 

うん!いい感じ!ちなみに、動かないバー(背景)を表示させたくない場合は、先ほどの2つ目のコードを削除すれば、動くバーだけ表示されます。

side-scroll-3

まとめ

これで…

このサイトは横スクロールナビなんだわ!なるほど。ユーザビリティが良くてストレスフリーで、ついつい他のカテゴリーの記事も見てみたくなる…離脱したいのに…ついつい回遊してしまうわーーー!

 

となること請け合いです。横スクロールナビカスタマイズ後の一手間。参考にしてもらえれば嬉しいです!

カテゴリー WordPressカスタマイズ

注目 失敗なし!au・docomoからmineo(マイネオ)へのMNP方法!

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

この記事が気に入ったらいいね!しよう

最新情報をお届けします

この記事を書いた人:シェフ

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

閉じる

CLOSE

アーカイブ

CLOSE