【プラグイン】Crayon-Syntax-Highlighter をカスタマイズする方法

WordPressのプラグイン Crayon-Syntax-Highlighter は
サイト内で CSSコードなどを分かりやすく表示させるための
テキストエディタになります。

プラグインをインストールするだけで数種類のエディタテーマから
自身のサイトイメージに合ったものを使用することができますが
さらに、こちらをカスタマイズすることでよりオリジナルの
テキストエディタにすることが可能となります。

★ 目次

Crayon-Syntax-Highlighter のカスタマイズ

管理画面かの設定から Crayon を開きます。

テーマは、イメージに近いものから選択するのが良いでしょう。
テーマを選択したら Duplicate 複製する を選択します。

オリジナルのテーマ名を設定します。こちらは後で何度でも変更できます。

複製されたテーマは編集画面から編集・削除することができます。
作成したエディタを submit 参加するから公開することもできます。

編集画面をクリックすると、左にプレビュー画面と右側に各項目の編集画面が表示されます。

i 情報画面ではエディタ名を編集することができます。

初めに背景の設定をしていきます。文字色は背景の色によって見え方に影響が出るので
先に背景の設定をするのが望ましいと思います。

各項目の色の部分をクリックするとこのような色の設定画面が表示されます。
いろんな方法でかんたんにイメージの色を表示することができます。

イメージが決まったら OK をクリック
キャンセル以外はすべて変更されてしまいますので気を付けてください！！

フレーム・番号・ツールバーも同じ要領で設定していってください。

文字色の設定は特に必要ない場合もありますが
今回選択した SublimeTextでは背景の黒に合わせて白を使用しているコードが多いようです。

濃い色のテーマでは白や薄い色を使用している場合が多く
薄い色に変更した場合などはコードが見えなくなってしまうことがありますので
変更する必要があります。

文字色の編集画面では、たくさんの項目がありますが CSSで使用するコードは主に、6つ。
本格的なプログラミングなどではないのでこの辺を押さえておけばいいかと思います。

一度ではなかなか全体のバランスが思うようにいかないと思います。
私も何度も設定しなおしました。

その都度、保存をしますがサイトの画面上で
編集したデザインが反映されていませんでした。

原因は、テーマの名前です。
メディアのアップロードでも同じですが、同じ名前のモノは
初めのモノからアップロードされずにいますので名前を変更する必要があります。

ですので、テーマを作成する場合、ほんとに仮の名前で設定しておいて
編集のたびに “0” ゼロを足してみたりして名前を変更・保存していました。

最終、納得のいくデザインに仕上がったら、正式な名称を付けてあげると
いう方法がいいのではないでしょうか？

凝りだすと、大変時間のかかる作業ですが、ぜひ一度
オリジナルのテーマを作成してみてください！！