「Crayon Syntax Highlighter」は
ワードプレスサイト内にソースコードを
挿入するためのプラグインです。

非常に便利なプラグインなんですが、
使っていて1つ問題が。。。それは、

「スクロールバーの高さが低くてわかりにくい」
ということです。

以下のようにスクロールバーが
非常に細いです。

 

実際にコンサル生の方から
「スクロールできるとは気づきませんでした！」
とメッセージをもらったこともあります。

そこで今回は、
「Crayon Syntax Highlighter」の
スクロールバー高さ(幅)を変更する方法
を紹介します。

Crayon Syntax Highlighterのスクロールバー高さ(幅)の設定方法

「Crayon Syntax Highlighter」の
スクロールバー高さの変更は、
「設定」→「Crayon」では設定できません。

また、「Crayon Syntax Highlighter」を
定義しているCSSを編集して変更することもできますが、
プラグインが更新された時に元に戻ってしまう可能性があります。

そこで今回はプラグイン内ではなく
「header.php」を編集することによって、
スクロールバーの高さを変更する方法を紹介します。

※WordPressテーマを変更する時は、
その都度「header.php」を編集する必要があります。
 

WordPressのダッシュボードにある
「外観」→「テーマエディター」をクリックします。

 

「テーマヘッダー(header.php)」を
クリックします。

 

「テーマヘッダー(header.php)」で
以下を探します。

ここを以下のように編集します。(2～5行目を追加)

<?php wp_head(); ?>
<style>
.crayon-main::-webkit-scrollbar,.crayon-plain::-webkit-scrollbar{height:13px;}
.crayon-main::-webkit-scrollbar-thumb,.crayon-plain::-webkit-scrollbar-thumb{border:1px solid #808080;}
</style>

編集したら、
「ファイルを更新」をクリックします。

 

以上で、編集は完了です。
 

スクロールバーのデザインが
以下のように変更することができます。

↓変更前

↓変更後

 

「Crayon Syntax Highlighter」をインストールしたら、
初めに設定しておくことをおすすめします。