もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

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

概要

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

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

before

f:id:moyashidaisuke:20191019165225p:plain

after

f:id:moyashidaisuke:20191019165123p:plain

やりかた

「ダッシュボード → デザイン → カスタマイズ → デザイン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