Crayon Syntax Highlighterのスクロールバーを太くする

Crayon Syntax Highlighterのスクロールバーを太くする WordPress

記事の中にソースコードを綺麗に表示したいときに人気の「Crayon Syntax Highlighter」ですが、プラグインの設定画面ではスクロールバーの太さ(height)を変更することができません。

ですが、CSSを追加するという簡単な操作だけでスクロールバーの太さを直接変更することが可能です。

スポンサーリンク

変更方法

スクロールバーの太さだけ変更する場合

WordPressメニューの「外観」→「カスタマイズ」をクリックし、テーマの「追加 CSS」編集画面を開きます。

WordPressのメニューの「外観」→「カスタマイズ」をクリック

入力欄に以下のCSSを書き込み「公開」をクリックするだけで完了です。

「追加 CSS」編集画面にCSSを追加して公開

※太さを微調整したい場合は「height: 14px !important;」の14pxの値を変更してください。

更に操作性と見栄えを良くするためにもう一つ設定しておきましょう。

「設定」→「Crayon 」でCrayon Syntax Highlighterの設定画面を開き、「Code」の部分の「Always display scrollbars」にチェックを入れて設定を保存します。

Crayon Syntax Highlighter設定の「Always display scrollbars」にチェック

Crayon Syntax Highlighterのデフォルト設定では、マウスオーバーを感知した際にスクロールバーが表示されるのでそのアクションが余分です。しかし「Always display scrollbars」(スクロールバーを常に表示する)にチェックを入れておくと余分なアクションが無くなってスッキリします。

スクロールバーの角も丸くしたい場合

追加でスクロールバーの角を丸くしたい場合は以下のCSSを更に追加します。

更にカスタマイズしたい場合

調べてみたところ、Crayon Syntax Highlighterのスクロールバー関連のCSSのデフォルト設定は以下の通りとなっていました。

更にカスタマイズしたい場合は上記のCSSセレクタ(クラス)を参考にCSSを追加してカスタマイズすることもできます。

※カスタマイズが効かない場合は、プロパティの値に「!important」を付与すると優先度が上がって効くようになります。

※ちなみに今回のスクロールバーの太さ変更(height値変更)の際は、Chromeで動作確認したところ「!important」を入れないと効きませんでした。原因は「crayon.min.css」がページの最後のほうで読み込まれているので追加CSSの設定が上書きされてしまうためです。

スポンサーリンク

変更前と変更後の比較

変更前

CSS追加前のCrayon Syntax Highlighterのスクロールバー

変更後

CSS追加後のCrayon Syntax Highlighterのスクロールバー

今回設定を追加した内容

  • スクロールバーを太くした(heightをデフォルトの6pxから14pxに変更)
  • スクロールバーの角を丸くした
  • スクロールバーを常時表示(Crayon Syntax Highlighterで設定)

イイ感じですね。

以上で解決です。

WordPress
スポンサーリンク
スポンサーリンク
Ketsunosukeをフォローする
己で解決!泣かぬなら己で鳴こうホトトギス