こんにちは、小泉です。
ネット上で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」を日本語化するためにはFTPを使ってサーバー内の指定ファイルを削除しなければなりません。
削除するファイルは以下の二つ。
- crayon-syntax-highlighter-ja.mo
- crayon-syntax-highlighter-ja.po
ここでは「エックスサーバー」を使っている場合の削除方法を紹介していきます。
「エックスサーバー」でのファイル削除手順
まずはじめにエックスサーバーの「ファイルマネージャ」にログインします。
ログインしたら「Crayon Syntax Highlighter」をインストールしたドメイン名のファイルを探してクリックしてください。
ドメイン名のファイルを開いたあと、
の順に開いていきます。
「plugins」まで開くと先に書いた「Crayon Syntax Highlighter」の指定ファイルが二つありますので、両方にチェックを入れてください。
チェックを入れたら「ファイルの削除」を押してファイルを削除します。
これで、日本語化するための作業は完了です。
ワードプレスに戻って「Crayon Syntax Highlighter」の設定を確認してみましょう。
はい、これで「Crayon Syntax Highlighter」が日本語で使えるようになりました。
あとは、自分の使いやすいように設定を変更していってください。