【はてなブログ】【Minimalism】ナビゲーションメニューのスクロールバーを常に表示する

概要

はてなブログのテーマ「Minimalism」のナビゲーションメニューですが、スマホ等の画面幅が小さい環境だと横スクロールできるようになっています。

が、そもそも横スクロールできる事に気が付かないのでは・・・という対策で、常に横スクロールバーを表示するようにカスタマイズしました

before

after

やりかた

「ダッシュボード → デザイン → カスタマイズ → デザインCSS」に以下を追加してください。 ※追加です！既存のものは上書きしないようにしてください

#menu-scroll::-webkit-scrollbar {
  height: 2px;
}
#menu-scroll::-webkit-scrollbar-track {
  border-radius: 2px;
  background: #eee;
}
#menu-scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #666;
}

数字や色はお好みで変えてOKです。自分のブログのデザインにあうようにいい感じに調整しましょう。

参考

m.designbits.jp