WordPressの表示画面でスクロールバーのデザインや色が変更できるプラグイン「Advanced scrollbar」

Wordpressで気に入ったテーマにして、CSSでさらにカスタマイズして・・・でも一番端っこに表示されるスクロールバーはそのままというサイトがよくあります。

せっかくだからスクロールバーもサイトのデザインと統一してよりイメージの統一感を出したい、そんなときに便利なのが今回紹介する「Advanced scrollbar」です。

スポンサーリンク

【Advanced scrollbar】プラグインの基本的な機能・できること

  1. スクロールバーの色を変更できます
  2. スクロールバーのレールの背景色を変更することができます
  3. スクロールバーのマウススクロールステップを変更することができます
  4. スクロールバーを非表示にする方法を設定することができます
  5. スクロール速度を制御できます
  6. タッチ動作を有効または無効にすることができます
  7. スクロールバーの幅をコントロールできます
  8. 携帯電話、タブレットPC、デスクトップを含むすべてのデバイスで有効になります
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. 閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています

【Advanced scrollbar】プラグインの設定画面や表示の日本語化と翻訳

【Advanced scrollbar】プラグインは言語の変更に未対応ですので表示のまま設定することになります

【Advanced scrollbar】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Advanced scrollbar】プラグインの基本的な使い方

設定はダッシュボードから「Custom Color Scrollbar」をクリックして行います

項目は

  1. Scrollbar Color/スクロールバーの内側の色を設定します
  2. Scrollbar Rail Background Color/スクロールバーの外側の色を設定します
  3. Mouse Scroll Step/マウスのホイールを回したときの上下の移動幅を設定します
  4. Auto Hide/スクロールバーの表示・非表示の動作を設定します
  5. Scroll Speed/スクロールの速度を調整します
  6. Rail Align/スクロールバーの位置を「左」「右」から選択します
  7. Enable Touch Behavior/パソコンの上下カーソルを押したときの動作をスマートフォンと同じにするかの設定です

使っているテーマによってはトップへ戻るためのボタンが隠れてしまうことがありますので調整が必要です。

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

  • 価   格:¥ 1,706
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4295000795
    インプレス

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

  • 価   格:¥ 1,685
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4797395168
    SBクリエイティブ

はじめてのブログをワードプレスで作るための本

はじめてのブログをワードプレスで作るための本

  • 価   格:¥ 1,944
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4798052817
    秀和システム

CS Shop
WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

  • 価   格:3,002 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:【ご注意:本書は固定レイアウト型の電子書籍です。ビューア機能が制限されたり、環境により表示が異なる場合があります】Webデザイナー養成講座シリーズは,プロのデザイナーとして仕事をする上で,必須のスキルを身につけるためのシリーズです。本書では,WordPressをこれ..
ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

  • 価   格:2,592 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:<p>ハイ・クオリティなビジネスサイトを作る</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>プログラミングの知識..
WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

  • 価   格:3,002 円 (税込) 送料込
  • 販 売 者: 楽天ブックス
  • 評   価: 評価 5
  • 商品の概要:Webデザイナー養成講座 中島真洋著 ロクナナワークショップ監修 技術評論社WordPress シゴトノゲンバデサッ トツカエルデザインキョウカショ ナカシマ マサヒロ チョ ロクナナワークショップ カンシュウ 発行年月:2015年06月 ページ数:368p サイズ:単行本 ISBN:97847741..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。
役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。

メニューを表示できません

ページ先頭へ