Knowledge Base

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

公開日：2017年3月5日 デザイン
Knowledge Base デザイン

【この記事の目次】－　必要な部分だけ見たいときにどうぞ　－ [表示する]

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

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

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

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

☆【WordPress】ブラウザのタブへアニメーション効果を与えるプラグイン「TITLE ANIMATOR」

☆WordPressのテーマで使用するフォントなどを簡単に変更できるプラグイン「Easy Typography」

☆WordPressでログイン画面や管理画面のデザインを自由に変更できるプラグイン「Admin Customizer」


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

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

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

インストール方法

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

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

Knowledge Base
【Wordpress】プラグインのインストール＆追加方法とエラー対処の方法
https://www.momosiri.info/cms/wordpresspluginerror/
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／パソコンの上下カーソルを押したときの動作をスマートフォンと同じにするかの設定です

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
(無料電話サポート付)できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 (できるシリーズ)

(無料電話サポート付)できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 (できるシリーズ)

￥ 1,628
Amazon.co.jp
ASIN: 4295006270
インプレス

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)

￥ 1,738
Amazon.co.jp
ASIN: 4295006661
インプレス

CS Shop
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
HMV＆BOOKS online 1号店
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p　21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら＞＞楽天市場内検索 『在庫あり』表記について　
いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

1,738 円 (税込) 送料込
楽天ブックス
人気講師が教える本格Webサイトの作り方 石川栄和 大串肇 インプレスイチバン ヤサシイ ワードプレス ノ キョウホン イシカワ,ヒデカズ オオグシ,ハジメ 発行年月：2019年08月 予約締切日：2019年06月26日 ページ数：280p サイズ：単行本 ISBN：9784295006664 石川栄和（イ..
楽天ウェブサービスセンター CS Shop
ひまあーと（管理人）
  • 記事の作者: ひまあーと（管理人）
  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。
  • 作者の記事一覧はこちら

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。

【スポンサーリンク】

記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報