<>

Crayon-Syntax-Highlighter – 日本語変換と各項目の設定のしかた【WordPress プラグイン】

Crayon-Syntax-Highlighterをインストールすると英文での表記になっていますので
これを 日本語表記にする方法から エディタ画面の詳細設定をしていきます。

Crayon-Syntax-Highlighter -日本語変換

Setting画面の開け方はインストール済み プラグインの欄の
Crayon-Syntax-Highlighter にあります Settings を押していただくか
ダッシュボード画面の項目 設定から Crayon の項目をクリックします。

日本語に変換する方法

セッティング画面は英語表記になっています。
日本語に変換の方法は2種類あり お使いのパソコンによっては
マウスの右クリックで 日本語に翻訳 させることができます。

マウスを使って翻訳する方法
こちらで翻訳ができない場合 FTPファイルを編集して翻訳させます。

英語表記のままでも十分利用できますので
変換が難しい方はこのままセッティングに進んで頂いても構いません。

 Xserver  – FTPファイルの編集

今回、 Xserver の FTPファイルと FTPソフトの FFFTP の2種類で解説していきます。
どちらも ほぼ同じ方法ですが わかりやすく図にしてみました。

関連記事はこちら

FTPの設定・FFFTPのダウンロードに関してはこちらの記事にまとめています。
関連記事:FFFTP-のダウンロードと Xserver での FTPソフトの設定

Xserver-ファイル管理選択画面
Xserver はログイン後のサーバー画面でファイル管理 を選択します。

WebFTP ファイルの画面の中にあります 今回編集したい ご自分のサイトのファイルをクリックします。
WebFTP-ファイルの編集画面
図のように 編集したいサイト(今回の場合、eureka45.xsrv.jp)ファイルから
順に選択して頂き plugins のファイルまで進みます。
plugins のファイルの中にこちらの2つのファイルがあります。
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po
この二つのファイルにチェックを入れてファイルを削除します。

WebFTP-ファイルの削除の仕方
ファイルを削除しましたら完了です。

FFFTPソフトの編集の場合

FFFTPソフトの実行の仕方
FFFTP のアイコンをクリック または
スタートアイコンから FFFTP を選択して実行します。

FFFTP-プラグイン日本語化の手順1
ホスト一覧から 編集したいホストを選択し接続をクリックします。

FFFTP-プラグイン日本語化の手順2
先ほどと同じ要領で 編集したいアドレスをクリックし 順にフォルダを開いていきます。

plugins のファイルまで進み こちらの2つのファイルを削除します。
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po

削除できましたら完了ですのでFFFTPを終了します。

Crayon-Syntax-Highlighter -Settings

ここからテーマを指定し、詳細設定をしていきます。

Theme (テーマ)

ボックスから テーマを選択します。
Crayon-Settings-Themeの選択とプレビュー画面

プレビュー画面下の change the fallback language ランゲージ(言語)の変更画面へ移動でき
言語によって ソースコードの表示される色がかわります。

プレビュー画面下のチェックボックス
Enable Live Preview リアルタイムのプレビュー画面を有効にする
テーマのイメージや カスタマイズしたイメージを確認しながら設定していくことができます。

Toolbar

各設定の名称について分かりやすく表示してみました。
Crayon-画面名称を分かりやすく図解

外観のポイントは ツールバーの設定になります。
チェックを入れていない項目もありますが  こちらはお好みですのでご自由に選択してみてください。
Crayon-Syntax-Highlighter-Setting解説-toolbar
Display the Toolbar  ツールバーの表示の仕方について
On mouseOver   マウスオーバーを選択した場合、1~3の設定をします。
Crayon-Settings画面-マウスオーバーのイメージ画像

ツールバーが表示される時、1段目の文章に重なって表示(オーバーレイ)するのか
1段目に重ならないように1段下がって表示(プッシュダウン)させるか
Toolbar-Overlayのイメージ画像

1で オーバーレイを選択した場合、
マウスのシングルクリックでツールバーを表示させたり、隠したりできる機能

Line

Crayon-Syntax-Highlighter-Setting解説-line

Crayon-カスタマイズーストライプのイメージ画像
コード画面をストライプ状にする
選択するテーマによってこちらの機能が無い場合もあります。

重要な行のマーキングを有効にする
こちらは投稿画面でマーキングを設定した場合その行に色がついて表示されます。

は行範囲の指定です。こちらはチェックなしで大丈夫です。

4 5 行番号の表示について
Crayon-Tag-Line-numberの画像

6  7 長文のコードの場合の表示のしかた
折り返しタグのイメージ画像
Wrap lines by default  デフォルトで行を折り返す
7  Enable line warp toggling 行折り返しの有効化
長文のコードの場合  Toolbar にタグが表示され スライドバーが出現します。

コード全体が見やすいのは折り返し表示ですね。
どちらも選択しない場合、Toolbar にタグは表示されずにスライドバーが出現します。

Code

コードについては こちらの6項目 ツールバーに表示されるタグについての設定です。
タグのクリックで ON  OFF を切り替えることができます。
Crayon-Syntax-Highlighter-Setting解説-code

1 2 コードの表示
はこちらのハイライトなしの状態の設定
コードタグをクリックした時のイメージ画像

4 コピー機能について
コピーをクリックした時のイメージ画像
コピーのタグをクリックし全体選択されたら コピー&ペーストします。

記事作成 エディタ画面での使いかた

Crayon投稿画面での使いかた-投稿エディタ画面
投稿のエディタ画面 右上にありますコードのマーク <> 
crayon-syntax-highlighter の入力画面になります。こちらをクリックします。

Crayon投稿画面での使いかた-コード入力画面

ポイントは タイトルとマークするライン マークするラインは先ほどの Line の項目の
2番 重要な行のマーキングを有効にする チェックを付けている場合に 利用できる機能です。

1行ごとの設定は ,(カンマ)で区切り 数行の場合はマーキングしたい行
例えば 1-3 や 2-5 のようにハイフンをいれて記述します。

特に必要なければ 空白のままで大丈夫です。
コードの入力を済ませたら add (更新)をクリックして完了です。

画面下にテーマからコードまでのカスタマイズ設定画面がありますが
こちらの画面だけ、設定を変更したいときに使用します。