エディタの複製と編集機能でテーマをカスタマイズしてみる【 Crayon-Syntax-Highlighter 】

Crayon-Syntax-Highlighterはサイトの記事内にエディタのような画面を使ってCSSコードなどを
分かりやすく表示させることができるツールです。

WordPressではプラグインで無料でかんたんに利用することができます。

表示するエディタ画面も数種類のテーマから選択することができますし
詳細な設定によってテーマのデザインは多様にあります。

サイトのイメージや好みに合うエディタがあればそのまま使用でいいのですが
表示画面のデザイン、主に色の指定になりますが細かくこだわるなら
テーマの複製と編集機能を使ってテーマをカスタマイズすることができ
オリジナルのテキストエディタに仕上げることが可能となります。

Contents - 目次 -

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

その原因は、テーマの名前が同じ。ということでした。

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

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

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

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

Posted by 45