【はてなブログ】【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

コメント

タイトルとURLをコピーしました