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」を編集する必要があります。
 
 
ダッシュボードの「外観」→「テーマの編集」→「header.php」
Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 外観 テーマの編集 Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 ヘッダー header.php
 

「header.php」内の以下を探します。

 

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

編集したら、【ファイルを更新】をクリックします。
Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 外観 テーマの編集 ファイルを更新
 

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

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

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

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

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

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

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

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

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

メルマガ登録フォーム

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

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




コメントを残す



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

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

CAPTCHA