こんにちは、小泉です。

ネット上でHTMLのコードを調べたりしていると、実際のエディタに書いたようにキレイな表示で解説しているサイトがあります。

HTMLコード解説

こんな感じで。

どうやってこんな風に書いているんだろうと思って調べてみたら、こらはどうやら「Crayon Syntax Highlighterというプラグインを使って書いているみたいなんですね。

僕のブログでもHTMLやCSSのコードをキレイに表示させたいと思い早速「Crayon Syntax Highlighter」をインストールしました。

でもインストールが終わっていざ使おうと思ったら全部「英語表記」になっていて使い方がよくわからない!

 

そんなわけで今回は、これから「Crayon Syntax Highlighter」を導入しようと考えている人のために、インストールから「日本語化」までの手順を紹介していこうと思います。

尚、ここで紹介する日本語化の手順は「エックスサーバー」のWebFTPを利用した方法になりますので、その他のサーバーを利用している人は同じような手順が踏めるかどうか確認してみてください。


コード解説プラグイン「Crayon Syntax Highlighter」のインストール

プラグイン」新規追加

ワードプレスの管理画面を開いたら、左サイドバーの「プラグイン」から「新規追加」を選択します。

 

Crayon Syntax Highlighterインストール

追加画面の検索窓に「Crayon Syntax Highlighter」と入力すると、プラグインが表示されますので「今すぐインストール」をクリックしてください。

 

Crayon Syntax Highlighter有効化

インストールが終わったら「有効化」をクリックします。
これで「Crayon Syntax Highlighter」のインストールは完了です。


Crayon Syntax Highlighter」の日本語化

プラグインを有効化すればとりあえず「Crayon Syntax Highlighter」の使用は可能になります。

Crayon Syntax Highlighter英語

しかしこのままの状態では全てが英語表記になっているため、英語に詳しい人でなければなかなか使いづらいですね。

なのでこれから、使いやすいように日本語化するための作業に入りたいと思います。

「Crayon Syntax Highlighter」を日本語化するためにはFTPを使ってサーバー内の指定ファイルを削除しなければなりません。

削除するファイルは以下の二つ。

  • crayon-syntax-highlighter-ja.mo
  • crayon-syntax-highlighter-ja.po

ここでは「エックスサーバー」を使っている場合の削除方法を紹介していきます。


「エックスサーバー」でのファイル削除手順


ファイルマネージャログイン

まずはじめにエックスサーバーの「ファイルマネージャ」にログインします。

 

インストール、ドメイン

ログインしたら「Crayon Syntax Highlighter」をインストールしたドメイン名のファイルを探してクリックしてください。

ドメイン名のファイルを開いたあと、

「public_html」⇒「wp-content」⇒「languages」⇒「plugins」

の順に開いていきます。

 

ファイル選択

「plugins」まで開くと先に書いた「Crayon Syntax Highlighter」の指定ファイルが二つありますので、両方にチェックを入れてください。

 

ファイル削除

チェックを入れたら「ファイルの削除」を押してファイルを削除します。
これで、日本語化するための作業は完了です。

ワードプレスに戻って「Crayon Syntax Highlighter」の設定を確認してみましょう。

 

日本語化完了

はい、これで「Crayon Syntax Highlighter」が日本語で使えるようになりました。

あとは、自分の使いやすいように設定を変更していってください。