スクロールバーの高さと幅を太くしてマウスのクリックやドラッグを楽にする

公開日 2014/07/13 更新日 2016/01/31

Contents

1 ソースコードを綺麗に表示するためのプラグイン
2 使ってみて、唯一不便と思った課題
3 それでもカスタマイズしたい！
4 変更後の使用感
5 変更暦

ソースコードを綺麗に表示するためのプラグイン

Crayon Syntax Highlighterはブログ記事に掲載したソースコードを綺麗に整形して表示するためのプラグインです。
綺麗な表示ができることが一番のポイントですが、Crayonプラグインでは更に、次のような使い勝手が良い特長があります。

多彩なプログラム言語に対応、色分けされ可視性が向上
予め複数のスタイルが用意されていて、サイトにマッチしたデザインが選択できて、独自性を出しやすい
グラフィカル編集ダイアログが用意されているのでショートコードを覚えなくて良い

しかしながら、1点どうしても使いにくいと思った点があります。
本記事ではこの使いにくい点の説明と、私がやっている改善についてまとめようと思います。

Information
ある時期からCrayon Syntax highlighterのスタイルシートの定義位置が変更になってました。
これにより本記事の修正が反映されていなくなっていたので記事内容を若干修正しています。

使ってみて、唯一不便と思った課題

Crayonプラグインは、使い勝手の点からも優れたプラグインといえるのですが、表示結果で1点使いにくいと感じた課題があります。
それは、スクロールバーのデザインです！

入力したソースコードがCrayonの表示領域からはみ出すときに、自動的にスクロールバーを表示してくれるのですが、この時表示されるスクロールバーは次の点が不満です。

幅や高さが小さいのでマウスを重ねるのが難しくクリックやドラッグが大変やりにくい
立体的なデザインだけど影の色が強いので違和感がある

そして残念なことに、WordPress管理画面にある

設定 -> Crayon

のCrayon設定ページでは、このスクロールバーのデザインはカスタマイズすることができません。

それでもカスタマイズしたい！

Crayonプラグインのソースを読んでいくと、スクロールバーはCSSでデザインを定義していることがわかりました。
このCSSを修正することでスクロールバーを好みのデザインにしたいと思います。

オリジナルのスタイルが定義されている対象ファイル

スクロールバーのデザインが定義されているのは、次のファイルです。

WordPressインストールフォルダ / wp-content / plugins / crayon-syntax-highlighter / css / min / crayon.min.css

該当箇所は次の箇所です。
便宜上改行を入れていますが実物では改行を含まず1行で書かれています。

.crayon-main::-webkit-scrollbar,.crayon-plain::-webkit-scrollbar{height:6px;overflow:visible;width:6px;background:#EEE}
.crayon-main::-webkit-scrollbar-thumb,.crayon-plain::-webkit-scrollbar-thumb{background-color:#CCC;background-clip:padding-box;border:1px solid #AAA;box-shadow:inset 0 0 2px #999;min-height:8px;padding:0;border-width:1px}
.crayon-main::-webkit-scrollbar-button,.crayon-plain::-webkit-scrollbar-button{height:0;width:0;padding:0}
.crayon-main::-webkit-scrollbar-track,.crayon-plain::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 4px;border:1px solid #BBB;border-right:0;border-bottom:0}
.crayon-main::-webkit-scrollbar-corner,.crayon-plain::-webkit-scrollbar-corner{background:#EEE}
.crayon-main::-webkit-scrollbar-thumb:hover,.crayon-plain::-webkit-scrollbar-thumb:hover{background:#AAA;border:1px solid #777;box-shadow:inset 0 0 2px #777}

.crayon-main::-webkit-scrollbar,.crayon-plain::-webkit-scrollbar{height:6px;overflow:visible;width:6px;background:#EEE}

.crayon-main::-webkit-scrollbar-thumb,.crayon-plain::-webkit-scrollbar-thumb{background-color:#CCC;background-clip:padding-box;border:1px solid #AAA;box-shadow:inset 0 0 2px #999;min-height:8px;padding:0;border-width:1px}

.crayon-main::-webkit-scrollbar-button,.crayon-plain::-webkit-scrollbar-button{height:0;width:0;padding:0}

.crayon-main::-webkit-scrollbar-track,.crayon-plain::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 4px;border:1px solid #BBB;border-right:0;border-bottom:0}

.crayon-main::-webkit-scrollbar-corner,.crayon-plain::-webkit-scrollbar-corner{background:#EEE}

.crayon-main::-webkit-scrollbar-thumb:hover,.crayon-plain::-webkit-scrollbar-thumb:hover{background:#AAA;border:1px solid #777;box-shadow:inset 0 0 2px #777}

修正のやり方についての考え方

Crayon Syntax highlighter画提供するオリジナルのCSSファイル(crayon.min.css)を直接編集してもよいのですが、プラグインの再インストールやバージョンアップで、せっかく変更した修正がリセットされてしまいます。
実際に再インストールして確認済みです。

そこでプラグインのスタイルを直接編集するのではなく、次の管理画面でCrayon Syntax highlighterプラグインとは別に、テーマの設定として追加します。

WordPress管理画面 – 外観 – テーマ編集 – テーマフッター(footer.php)

この設定画面はWordPressテーマとしてSTINGERだった場合のファイルです。
たぶん、STINGER以外でも同様にフッターに関する記載箇所を探せば同じことができると思います。

修正方法

テーマフッター(footer.php)を開いたら、次のスタイルを追加します。
プラグインにて提供されるスタイルは、wp_footer()で表示されていて、このwp_footer()に設定を追加しても良いのかも知れませんが、ここでは単純に後続処理という形で追加しています。

:
<?php wp_footer(); ?>

<style>
.crayon-main::-webkit-scrollbar,.crayon-plain::-webkit-scrollbar{height:15px;width:15px;}
.crayon-main::-webkit-scrollbar-thumb,.crayon-plain::-webkit-scrollbar-thumb{border:1px solid #DDD;box-shadow:inset 0 0 2px #BBB;}
.crayon-main::-webkit-scrollbar-thumb:hover,.crayon-plain::-webkit-scrollbar-thumb:hover{border:1px solid #BBB;box-shadow:inset 0 0 2px #999}
</style>

</body></html>

<?php wp_footer(); ?>

<style>

.crayon-main::-webkit-scrollbar,.crayon-plain::-webkit-scrollbar{height:15px;width:15px;}

.crayon-main::-webkit-scrollbar-thumb,.crayon-plain::-webkit-scrollbar-thumb{border:1px solid #DDD;box-shadow:inset 0 0 2px #BBB;}

.crayon-main::-webkit-scrollbar-thumb:hover,.crayon-plain::-webkit-scrollbar-thumb:hover{border:1px solid #BBB;box-shadow:inset 0 0 2px #999}

</style>

</body></html>

変更のポイントは次の2点です。

スクロールバーの幅と高さを15ピクセルに変更
スクロールバーを立体的に見せる影のデザインを弱めに設定

変更後の使用感

マウスのつまみやすさが半端ない！
デザイン性も違和感がなくなって申し分ない。

HTMLをベースに作られたツールというのはソースコードが提供されている前提なので、気に入らないところは自分で治せるというところが素晴らしい。
プラグインでの拡張が良い例だと思うのですが、ベースとなる技術は他の方の成果を活用させてもらって、若干の修正をすることで完成形に近づけさせる、という開発スタイルが手軽さになるのだと思いました。

変更暦

2016年1月31日
Crayon Syntax Highlighterのスタイルシート定義場所がフッターに変更になり、本記事の修正が無効化されてしまっていたので、記事中の説明をプラグインのフッター定義よりも後に来るように変更。
2014年7月13日
初版公開