表示画面でスクロールバーのデザインや色が変更できるプラグイン「Advanced scrollbar」
公開日：2017年3月5日 デザイン
WordPressで気に入ったテーマにして、CSSでさらにカスタマイズして・・・でも一番端っこに表示されるスクロールバーはそのままというサイトがよくあります。
せっかくだからスクロールバーもサイトのデザインと統一してよりイメージの統一感を出したい、そんなときに便利なのが今回紹介する「Advanced scrollbar」です。
【Advanced scrollbar】プラグインの基本的な機能・できること
- スクロールバーの色を変更できます
- スクロールバーのレールの背景色を変更することができます
- スクロールバーのマウススクロールステップを変更することができます
- スクロールバーを非表示にする方法を設定することができます
- スクロール速度を制御できます
- タッチ動作を有効または無効にすることができます
- スクロールバーの幅をコントロールできます
- 携帯電話、タブレットPC、デスクトップを含むすべてのデバイスで有効になります
この記事を参考にプラグインの導入をする際以下に留意ください
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
- すべての環境で動作するとは限りません
- できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
- 有料版と無料版がある場合、テストは原則無料版のみで実施しています
- テスト環境については本文中に記載しています
- 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。
【Advanced scrollbar】プラグインの設定画面や表示の日本語化と翻訳
【Advanced scrollbar】プラグインは言語の変更に未対応ですので表示のまま設定することになります
【Advanced scrollbar】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、ページ先頭の画像をクリックして表示されるWordPressのプラグイン公式配布ページがダウンロード後、管理画面からアップロードインストールしてください。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた
も併せてご覧ください。
【Advanced scrollbar】プラグインの基本的な使い方
設定はダッシュボードから「Custom Color Scrollbar」をクリックして行います
項目は
- Scrollbar Color／スクロールバーの内側の色を設定します
- Scrollbar Rail Background Color／スクロールバーの外側の色を設定します
- Mouse Scroll Step／マウスのホイールを回したときの上下の移動幅を設定します
- Auto Hide／スクロールバーの表示・非表示の動作を設定します
- Scroll Speed／スクロールの速度を調整します
- Rail Align／スクロールバーの位置を「左」「右」から選択します
- Enable Touch Behavior／パソコンの上下カーソルを押したときの動作をスマートフォンと同じにするかの設定です
使っているテーマによってはトップへ戻るためのボタンが隠れてしまうことがありますので調整が必要です。
WordPressのカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラ
のダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
【スポンサーリンク】