Crayon Syntax Highlighter – 行番号とコードがずれて表示されてしまう
前回、ソースコードをきれいにサイトに表示させるための
Crayon Syntax Highlighter というプラグインの
解説と使い方についておはなしさせていただきました。
こちらのプラグインはしばらく更新されていませんので
私の使用している WPのバージョンはテストされておらず
そのせいかどうかはわかりませんが
行番号と表示したいコードがズレてしまいました。
これは テキストの内側 padding が設定されていることによって
スペースが設けられていますので こちらの設定を変更してあげることで
改善することが出来ます。
また、全体的に番号と文字のサイズが合わないケースもありますので
一緒にコードを表示しておきます。
コードはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 余白の調整 */ .crayon-syntax .crayon-pre { padding-top: 0px !important; padding-bottom: 0px !important; } .crayon-pre .crayon-line{ padding-top: 0px !important; padding-bottom: 0px !important; } /* ナンバーの余白の調整 */ .crayon-theme-flatui-light .crayon-marked-num { border-width: 0px !important; } |
編集は外観カスタマイズ 追加CSS または 子テーマの編集の style.css に記述します。
編集画面 - 外観カスタマイズからの編集
ダッシュボードの外観からカスタマイズを選択
カスタマイズ一覧の一番下に 追加CSS の項目があり
こちらをクリックしてコードを記述します。
コードを記述しましたら 公開 をクリックして終了です。
編集画面 - 子テーマの編集からのCSS追加
子テーマの編集はダッシュボードの Luxeritas から子テーマの編集を選択
子テーマの編集 style.css 画面で
1 /*! Luxeritas child css */ から始まるコードが書かれています。
スクロールして頂くと注意書きがありますので こちらだけ気を付けてください。
コードを記述しましたら 左上の 保存 をクリックします。
警告でこのページを離れますか? と聞かれますが YES で大丈夫です。
これで 修正されたと思いますので 画面を確認してみてください。