Stable Life
サイトアフィリやメルマガを駆使して稼ぐ元公務員社長井野瑛太のオフィシャルブログ
画像解説版

Crayon Syntax Highlighterのインストール方法と使い方【画像解説】

当サイトのように、ホームページの運営に関する解説を行う場合、記事上にhtmlやcssなどのコードを掲載したいことがあります。

記事本文にそのままコードを記載しても、コードにより返された結果しか記事上には見えません。

そこで、特殊な記号を使い、表示させる方法もあるのですが、WordPressブログであれば、プラグインを導入することにより簡単に記事上にコードを表示させることが出来ます。

今回は、コードを記事上に表示させるためのWordPressプラグイン『Crayon Syntax Highlighter』のインストール方法と使い方について画像を用いて丁寧に解説していきたいと思います。

Crayon Syntax Highlighterでできることと導入の必要性について

このプラグインを利用すれば、ただ、記事上にコードを表示させるられるだけでなく、下記のようにタグエディター上で表示させているかのような見やすい外観の装飾をコードに施すことが出来ます。

<h2>Crayon Syntax Highlighterのインストール方法と使い方【画像解説】</h2>

Crayon Syntax Heghlighterのインストール

WordPressへのログインとプラグインの新規追加

WordPressにログイン後、『プラグイン』⇒『新規追加』をクリックします。
CrayonSyntax Highlighter00

検索窓に『Crayon Syntax Highlighter』と入力し、Enterキーを押します。
CrayonSyntaxHighlighter01

検索結果に表示された『Crayon Syntax Highlighter』のところの『いますぐインストール』をクリックします。
CrayonSyntaxHighlighter02

『OK』をクリックします。
CrayonSyntaxHighlighter03

プラグインの有効化

『プラグインを有効化』をクリックします。
CrayonSyntaxHighlighter04

Crayon Syntax Highlighterの使い方

記事投稿画面を開く

Crayon Syntax Heghlighterは投稿画面のエディタに付加されたボタンから利用しますので、記事投稿画面を開きます。
すると、エディタに『crayon』というタグ挿入ボタンが追加されています。
これをクリックします。
CrayonSyntaxHighlighter05

1.記事に表示させたいタグを入力
2.『挿入』をクリック
CrayonSyntaxHighlighter06

記事本文にタグが挿入されています。
『プレビュー』を押して表示を確認してみます。
CrayonSyntaxHighlighter07

表示の確認

プレビューにより表示を確認すると、下記のようになっており、正しく設置できていることがわかります。
CrayonSyntaxHighlighter08

Crayon Syntax Highlighterの設定

このプラグインの詳細設定は、『設定』⇒『Crayon』から行えますが、特に設定を変更しなくても、十分使用可能です。
CrayonSyntaxHighlighter09

以上になります。