CSSでできる!おしゃれなスクロールバー[コピペOK]

webデザイン

この記事では、PCで見た場合の右側スクロールバーをおしゃれにするCSSを紹介します。さりげないおしゃれを楽しみたいかたは是非やってみてください。

今どきパソコンで見る人は少ないけど、カスタマイズ中の自分のテンションを上げるために実装しました

IEでは動かないみたいです。ChromeとFirefoxで確認済み。

サービス別CSSをコピペする場所

  • WordPress:ダッシュボード>外観>カスタマイズ>追加CSS
  • はてなブログ:デザイン>>デザインCSS。スマホ用はのフッタに<style></style>と入力、この中にコピペ
  • Livedoor:ブログ設定>カスタマイズ>CSS
  • FC2:設定>テンプレートの設定>スタイルシートの編集
  • Blogger:テーマ>カスタマイズ>上級者向け>CSSを追加

標準的なコピペ場所です。それ以外の方法でもできるので、ご自身のやりやすい場所にコピペしてください。

レインボーデザイン

 

淡いグラデーションデザイン

実装例

運営中のわたしのサイトです。(閉鎖しました)画像を目立たせるために、文字装飾や配色はできるだけ抑えたミニマムデザインになっています。スクロールバーは意外と視界に入らないため、サイトアイコンと統一させたレインボースクロールバーにしてみました。そうすることで、サイト全体で見た時の印象が地味すぎずパキッとしておしゃれになったと感じます。

コメント

タイトルとURLをコピーしました