やりたいこと
今回は、WordPressのサイトをスマホ版で表示した際に
メニューが一部しか表示されないため、スクロールバーを設置して
「まだ右にもありますよ！」アピールをしようと思います。
手順
①管理画面にログインする
まずはWordPressの管理画面にログインします。
自分のドメインURL＋/wp-login.phpでログインできます。
自分のユーザー名とパスワードを入力します。
②外観→カスタマイズをクリック
まず、画面左の中央のあたりにある外観というボタンがあると思いますので
そちらをクリック→カスタマイズをクリックします。
③下の方にある【追加CSS】をクリック
多分下の方に行くと追加CSSという項目があると思いますので、そちらを
クリックして開いてください。
④以下のコードを追加する
以下のコードをコピー&ペーストで追加してください。
/***** モバイルメニューのスクロールバー表示ここから *****/
@media only screen and (max-width: 767px) {
/*** スクロールバーの色 ***/
.globalNavi::-webkit-scrollbar-thumb {
background: #808080;
}
/*** スクロールバーの背景色 ***/
.globalNavi::-webkit-scrollbar-track {
background: #FFFFFF;
}
/*** スクロールバーの高さ ***/
.globalNavi::-webkit-scrollbar {
height: 10px;
}
}
/***** モバイルメニューのスクロールバー表示ここまで *****/
最後に公開して保存し、完了となります。
いかがでしたでしょうか？
スクロールバーを別の色に変えたいというご要望や、
もし何か分からない事があればココナラなどに登録して
対応できる方に問い合わせてみてください。
ご登録はこちら
↓ ↓ ↓ ↓ ↓ ↓ ↓
