Urvanov Syntax Highlighterのスクロールバーを太く、そして見やすく。

ソースコード等を埋め込み表示するのに優れたプラグイン｢Urvanov Syntax Highlighter｣は、preタグを使う事で、ソースコードを簡単に埋め込み表示する事ができるので、ブログなどで｢HTML｣、｢CSS｣、｢PHP｣等々のソースを表示するのに重宝してます！Wordpressのブロックエディターにも対応していますので、本当に簡単にソースの掲載をすることができます。

ただ、見やすさを求めると、やはり設定値を変更したりする必要があります。特に気になったのは、デフォルトのスクロールバーがめっちゃくちゃ細いので、今回は少しマニアックですが、｢Urvanov Syntax Highlighter｣プラグインのそのスクロールバーの見やすさをよくするための方法について記載します。

1.Urvanov Syntax Highlighterのスクロールバーを太くする。

スクロールバーのデフォルト細いです。それを太くします。

Urvanov Syntax Highlighterのデフォルトのスクロールバー(細い)

スタイル反映後(スクロールバーが太く)

以下のスタイルを反映することで太くすることが出来ます。
15pxの箇所を変更する事で太くしたり細くしたりできます。

WordPressメニューの｢外観｣→｢カスタマイズ｣→｢追加CSS｣から追加しても良いですし、お使いのテーマのスタイルシートに追加しても良いです。

2.スクロールバーの常時表示

デフォルト設定では、マウスをホバーさせないとスクロールバーが表示されませんので、わかりにくいです。そのため、常時表示させます。以下の設定から可能です。

スクロールバーを常時表示

もちろんスクロールバーが表示されるのは必要な時だけです。枠内に収まっていれば表示されません。

以上、皆さまのお役に立てれば幸いです。