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

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

 

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

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

以下のようにスクロールバーが
非常に細いです。
Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 デフォルト
 

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

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

を紹介します。

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

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

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

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

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

WordPressのダッシュボードにある
「外観」→「テーマエディター」をクリックします。
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 スクロールバー 高さ 幅 変更方法 外観 テーマエディター ファイルを更新
 

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

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

↓変更前
Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 デフォルト

↓変更後
Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 編集後
 

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

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。