![](https://firsthp.info/wp-content/uploads/2018/02/Teacher-Introduction-010-1.jpg)
WordPressでコードを表記する際に使うプラグイン「Crayon Syntax Highlighter」について説明します。
![](https://firsthp.info/wp-content/uploads/2018/02/Student-Question-020.jpg)
私は、記事にコードを貼り付ける時、「Power Point」を使って、画像を作成し、それにコードを貼り付けていました。
![](https://firsthp.info/wp-content/uploads/2018/02/Teacher-smile-020-1.jpg)
「Crayon Syntax Highlighter」を使うと、そのような手間をかけずに、貼り付けることができますよ。
Sponcerd Link
Contents
1.プラグイン「Crayon Syntax Highlighter」のインストー、有効化
まず「Crayon Syntax Highlighter」をインストールし、有効化ましょう。
手順を説明して行きます。
①「プラグイン」-【新規追加】をクリックしてください。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-010.jpg)
②キーワードに「crayon」と入力し、「Crayon Syntax Highlighter」の【今すぐインストール】をクリックしてください。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-020.jpg)
③【有効化】をクリックしてください。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-030.jpg)
![](https://firsthp.info/wp-content/uploads/2018/02/student-smile-020.jpg)
できました。
![](https://firsthp.info/wp-content/uploads/2018/02/Teacher-smile-010.jpg)
設定を選択し、【Crayon】をクリックしてみてください。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-040.jpg)
![](https://firsthp.info/wp-content/uploads/2018/02/Student-Question-010.jpg)
英語で表示されていて、よくわかりません。
![](https://firsthp.info/wp-content/uploads/2018/02/Teacher-Introduction-010-1.jpg)
WordPressのバージョンによっては、日本語表示されない場合があります。日本語表示させる方法を説明します。
2.「Crayon Syntax Highlighter」の日本語化
以下の2つのファイルを削除すると日本語化されるのでやってみましょう。
「crayon-syntax-highlighter-ja.mo」「crayon-syntax-highlighter-ja.po」
①FTP接続するのにフリーソフトの「FileZilla」を使います。サイトのSSL化の際も使いましたので覚えていますね。
忘れているようなら、以下の記事を読んでみてください。
ロリポップサーバーでSSL化(無料)の設定方法(WordPress)②「.htaccess」ファイルの設定
②「FileZilla」で接続したら、リモートサイト(サーバー側)「 /wp-content/languages/plugins」 に移動してください。
③ 「crayon-syntax-highlighter-ja.mo」「crayon-syntax-highlighter-ja.po」のファイルは削除しても良いですが、このディレクトリにバックアップ用のディレクトリ(例:backup)を作り、そちらに移動させましょう。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-060.jpg)
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-075.jpg)
![](https://firsthp.info/wp-content/uploads/2018/02/student-smile-020.jpg)
日本語化できました。
3.「Crayon Syntax Highlighter」の設定
![](https://firsthp.info/wp-content/uploads/2018/02/Teacher-Introduction-020-1.jpg)
日本語化できましたので、「Crayon Syntax Highlighter」の設定について見ておきましょう。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-100.jpg)
①「テーマ」:表示の設定。②「フォント」:コードのフォント、サイズの設定。
③「サイズ」:コードを表示させる枠の大きさの設定。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-110.jpg)
④「ツールバー」:コードにカーソルを当てたときのツールバーの表示設定。
⑤「行」:コードを表示する行について色や行番号の表示を設定。
⑥「コード」:表示とその制限の設定。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-120.jpg)
⑦「タグ」:「Crayonsとして<pre>タグをキャプチャ」はチェックを入れておく。
⑧「タグエディタ」:表示がおかしくなる場合があるので、チェックを外した方が良い。
4.実際の使用
①投稿の編集画面でタブを「ビジュアル」→「テキスト」へ変更します。
②メニューボタンの中から【crayon】をクリックします。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-140.jpg)
③「Crayon Syntax Highlighter」のメニューが表示されます。
タイトル欄にタイトルを入力し、プログラム言語はDefaultのままでかまいません。
![](https://firsthp.info/wp-content/uploads/2018/02/Crayon-130.jpg)
④コード欄にコードを入力し、右上の【挿入】をクリックします。
⑤コードが追加されます。
![](https://firsthp.info/wp-content/uploads/2018/01/Thanks2.jpg)
![komiya](https://firsthp.info/wp-content/uploads/2018/02/cat-000.jpg)