【WordPressプラグイン】Crayon Syntax Highlighterのカスタマイズ

Crayon Syntax Highlighterはコードをブログで紹介するのに便利なプラグインです。テーマも色々あって嬉しいのですが、もっと自分好みにカスタマイズしたい!と思ったことはありませんか。そんな時に便利な機能を紹介します。

事前準備

 
Crayon Syntax Highlighterをインストールしてない場合はインストールします。

Crayon Syntax Highlighterをインストール

管理画面からプラグインの新規追加を選択します。「Crayon Syntax Highlighter」を検索して「今すぐインストール」をクリック→「有効化」をクリックして準備は完了です。

設定や使い方は、こちらの記事で解説してます。

関連記事:Crayon Syntax Highlighterの設定と使い方
関連記事:Crayon Syntax Highlighter全テーマ58種まとめ

Crayon Syntax Highlighterのカスタマイズ

 
管理画面から設定 → 「Crayon」を選択して「Crayon Syntax Highlighter」の設定画面を開きます。

ストックテーマをコピー

カスタマイズは↓の手順で行います。

  1. デフォルトのClassicテーマを選ぶ
  2. 「Duplicate(複製)」ボタンを押してテーマをコピー
  3. テーマを編集

まずは、デフォルトのClassicテーマを選びます。他の人が色々とカスタマイズ済みのテーマだと、変更できないところがあったりします。

ですが、今回はカスタマイズした事がわかりやすいように、色がほとんど付いてない「Xcode」で解説していきます。

 
黄色い線で囲われた「Duplicate」複製ボタンを押してコピーします。

コピーしたテーマに名前をつけます。

OKを押すと先ほどつけた名前の横に*マークが追加され、カスタマイズしたテーマだとわかります。そして「Edit」編集ボタンが使えるようになっているのでクリックします。

 
すると、テーマエディターが表示されます。新しく作ったテーマのCSSファイルが自動で作成され、上のほうにURLが載っているのがわかるかと思います。

 

各項目の解説

右側の各項目について解説します。まずは「Information」ここには作者情報を記入できます。後で解説しますが、作ったテーマを公開したい時だけ記入すれば大丈夫だと思います。

i」マークの隣にあるカラーパレットをクリックします。

ここでは、コードをハイライト表示する色を変更できます。

次は、「フレーム」の色を変更できます。

続いて「」ストライプになっている部分の変更ができます。

左にある「行番号」の設定ができます。

最後が「ツールバー」の設定です。タイトルやボタンの色を変更できます。

実際に色を変えてみる

 
試しにブルーの色がついてる部分を変更してみます。

Background(背景)をクリックすると、カラーパレットが表示されます。

そのままだと使いづらいので、ドラッグして見やすい場所に移動してください。色を選んで「OK」を押します。なくしたい場合は「None」を押してから「OK」を押すと空欄になります。

補足
用意されている色を選んでもいいですが、ネットで検索すると色々なカラーチャートが見られるので、それを参考にすると簡単に変更できます。
 
参考サイト:WEB色見本 原色大辞典 – HTMLカラーコード

自分好みにカスタマイズ

では、実際にカスタマイズしていきます。まずは「ツールバー」のフレーム背景色を変更してみます。

Backgroundをクリックして、カラーパレットで色を選択 → OK を押します。

タイトルに#ffffffと入れると白い文字色になります。(※このテーマは文字の色を変えられません)

ここで変更できるのは↓

  • Background:フレームの背景
  • Bottom Border:下線の追加/変更
  • Title:左上のSmaple Codeの部分
  • Buttons:ボタンの背景/マウスオーバー時の色など
  • Information (Used for Copy/Paste):「コピー」ボタン(右から2番目)を押した時の背景や文字色
  • Language:(プログラム言語を表示する設定にした場合)一番右に表示された時の文字色

 
次に「行番号」の背景色を変えてみます。ノーマルが基本の背景で、ストライプが偶数行の色になります。

変更したい場所をクリック → 色を選択 → OKを押します。

ここで変更できるところは↓

  • Right Border:右にボーダー(線)を追加
  • Normal:基本の背景/文字色
  • Striped:偶数行の背景/文字色
  • Marked:重要な行(5~7)の背景/文字色/ボーダーの追加
  • Striped & Marked:6行目の背景/文字色

文字色を変えたい時は「Text」に色を指定します。

続いて「フレーム」のボーダーを2pxに変更して色もつけてみます。通常はsolidですが、画像のように種類があります。
ボーダーをなくしたい時はnoneにします。

Inline:「1文章として表示」を設定した時のみ表示します。

 
最後に「」の偶数行に背景色をつけてみます。

ここで変更できるところは↓

  • Normal:基本の背景
  • Striped:偶数行の背景
  • Marked:重要な行(5~7)の背景/ボーダーの追加
  • Striped & Marked:6行目の背景

以上でカスタマイズは終了です。

 

「更新」ボタンを押して変更を保存します。

 

カスタマイズしたテーマを公開する

カスタマイズしたテーマを誰でも使えるように公開したい(ストックテーマに追加したい)という人に、公開できるかもしれない!?方法を紹介します。

設定画面に戻り、「Submit」ボタンを押します。

このような画面が表示され、開発者にメールでテーマを送ることができます。

本当に追加されるのか?は未確認です。プラグインのアップデートも2年前なので・・・

テーマの削除

もし、カスタマイズしたテーマを削除したくなった場合は「Delete」を押します。

本当に削除するか確認されますが、Yesを押して削除完了です。

 
以上で終わりです。ぜひ、テーマをカスタマイズしてみてください。