WordPressでスクロールバーの色を変更！ブラウザ全体での設定方法

貴方は〇〇人目の迷える子羊・・・

（↑これが分かる人は仲間ですね♡）

どうも、インターネット老害かめだです。

さかのぼること20年前・・・

2003年当時、中学生だった私は
毎日パソコンにかじりつき
個人サイト作成に没頭していました。

そんな私が、現在WordPressに手を出した理由はただひとつ。

個人サイト作りに没頭していた、

あの頃の楽しさを

もう一度味わいたい！！！

これに尽きます。

回顧厨です。ごめんなさい。

という訳でですね

2000年代に
女子小学生、女子中学生の間で流行っていた個人サイト文化を
WordPressブログでもやってみようと思います。

第一弾として、まずやってみたのが
「スクロールバーの装飾」です。

※パソコンのChromeブラウザから閲覧することをお勧めいたしますが
firefoxブラウザやスマートフォンから閲覧してる方にも伝わるように
画像を差し込みながら解説していこうと思います。

スクロールバーとは
- WordPressでスクロールバーを装飾する方法
- 2000年代のスクロールバー装飾
CSSを使わずスクロールバーを装飾する方法
- Scrollbar Designer
- WS Custom Scrollbar
スクロールバーを装飾してみた感想

スクロールバーとは

ブラウザの画面や、ページ内のテーブルなど
画面内や指定の範囲内に収まりきらないときは
右横や下にスクロールバーが表示されますよね。

このスクロールバーをアレンジしてみます。

動作環境：Windows10
ブラウザ：chrome

WordPressでスクロールバーを装飾する方法

今回ご紹介するCSSは、
WebKit対応のブラウザでしか反映されませんので
firefox、Edgeを利用されている方は申し訳ありません(;_;)

ブラウザ標準のスクロールバーは、
このように灰色で表示されています。
別に、このままでも特に支障はありません。

では、以下のCSSを
テーマファイルエディターに書き込みます。

::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-track {
  background: #eaedf7;
}

::-webkit-scrollbar-thumb {
  background: #c1e4e9;
}

ファイルを更新してみると・・・？

どうですか？

シンプルですが、色を変えるだけで可愛くなりましたよね！
ブログの雰囲気にもマッチしています。

まだ、サイト自体が発展途上なので
デザインが変わったときは
スクロールバーも一緒にカスタマイズしようと思います♪

今回のカスタマイズは、
かけちまるblogさんの記事を参考にさせて頂きました。
詳しく解説してくださっております。

2000年代のスクロールバー装飾

何の役にも立ちませんが
中学生の頃に使っていたHTMLタグをご紹介します。

インターネット老人会の方々なら、
あ〜懐かしいな〜と感じて頂けるかもしれません。

chromeブラウザでは再現できないので、
WordPressではなくメモ帳にhtmlタグを書いて
エクスプローラー内のブレビュー画面で表示しました。(笑)

タグは全部<head>内に記入してます。

ポップなスクロールバー

HTML

<style type=text/css>
<!--
body{
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:hotpink;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:hotpink;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#ffffff;}
-->
</style>

めちゃくちゃ可愛いですよね！
こういったポップな感じ、すごく好きです。

Windows7だとまた違う表示になります

古いパソコンで表示したらどうなるか、試してみました。
全く同じHTMLタグを使用しているのですが
少し違う仕上がりになっているのが分かりますか？

影響を及ぼしているのが、
OSによるバージョンの違いなのか、ブラウザのバージョンの違いなのか分かりませんが
（分からんのかい）

サイトやブログ等は、作りっぱなしで古いまま放置するのではなく
ある程度経ったらデザインを作り変えた方がよさそうですね。

OSやブラウザは日々どんどんアップデートされていってるので
自分の意図している表示がされなくなる可能性があります。

ちなみにですが、私はWindows7の方が好みです(笑)
ぷっくりしててかわいい！！

2色使いスクロールバー

HTML

<style type="text/css">
<!--
body
{
  scrollbar-face-color: white;
  scrollbar-highlight-color:deepskyblue;
  scrollbar-shadow-color:deeppink;
  scrollbar-3dlight-color: white;
  scrollbar-arrow-color: deepskyblue;
  scrollbar-track-color: white;
  scrollbar-darkshadow-color: white;
}
-->
</style>

さっきの応用＆アレンジです。

白抜きにしてシンプルにしつつ、
２色使っているのでカラフルで可愛いです。

は～かわいい。癒される。

シンプル系スクロールバー

HTML

<style type="text/css"> <!--
body {
  scrollbar-face-color: white; scrollbar-highlight-color:skyblue;
  scrollbar-shadow-color:skyblue; scrollbar-3dlight-color: white;
  scrollbar-arrow-color: white; scrollbar-track-color: white;
  scrollbar-darkshadow-color: white; }
--> </style>

上下の矢印が無い、シンプルなスクロールバー。

当時、シンプル系のテキストサイトが流行っていたので
スクロールバーもシンプルにスッキリさせている人が多かったです。

私もそのうちの一人(￣ー￣)

黒背景にオススメ

HTML

<style type="text/css">
<!--
body
{
  scrollbar-face-color: orange;
  scrollbar-highlight-color: orange;
  scrollbar-shadow-color: orange;
  scrollbar-3dlight-color: orange;
  scrollbar-arrow-color: black;
  scrollbar-track-color: black;
  scrollbar-darkshadow-color: orange;
}
-->
</style>

こちらは、黒い背景のサイトに最適です。
私は黒背景あんまり好きじゃなかったので使ったことないですが・・・