ブログのカスタマイズとかの解説記事で
『ここの記述をこう書き換えて・・・』
って説明したいときに、綺麗に分かりやすくソースコードを表示させたいですよね！
そのまま記事中にコードを記載すると、見にくかったりコピー＆ペーストをした時におかしくなったりする事もあるので、
便利なプラグイン【Crayon Syntax Highlighter】を使っていきましょう。
設定もほとんど必要なく、使い方も簡単です。
それではインストールから順番にご紹介していきますね(^-^)
目次
『Crayon Syntax Highlighter』のインストールから有効化
①WordPressダッシュボードの『プラグイン』から【新規追加】をクリック
②右上の検索窓に【Crayon Syntax Highlighter】と入力すると、左の赤枠のように表示されます
③【今すぐインストール】をクリック
④ボタンが【有効化】に変わるのでクリック
これでインストールと有効化は完了です！
『Crayon Syntax Highlighter』の設定
このプラグインは特別な設定をしなくても使えますが、デザインや文字サイズなどを変更もできますので一通り見ていきましょう。
①ダッシュボードの『設定』から【Crayon 】をクリック
②『テンプレート』と『文字』の変更
①・・・テンプレートの変更ができます。
下にプレビューが表示されるので、ここで各種設定後のデザインを確認しましょう。
②・・・フォントの種類・フォントサイズ（文字サイズ）の変更ができます
③赤枠部分で『上下の余白』を調整
④『ツールバー』をどのように表示させるか選択
初期状態では『マウスを載せた時に表示させる』設定になっています。
私は常に表示させる【Always】にしました。
⑤下の方の『Attempt to load Crayon’s CSS and JavaScript only when needed』にチェックを入れる
『必要なときにのみCrayonのCSSとJavaScriptを読み込もうと試みる』という意味で、ここにチェックを入れておくと表示速度への影響を多少抑えられるかもしれません。
⑥最後に【Save Changes(変更を保存)】をクリック
以上で設定は完了です。
プレビューを見ながらお好みで変更してみてください(^-^)
記事にソースコードを表示させる方法
今回は記事内のこの場所に↓表示させていきたいと思います！
①『ビジュアルエディタ』で【＜＞】のマークをクリック
②必要箇所を入力します（④以外は未入力でもOK）
①タイトル
入力するとツールバーに表示されます（未入力でもOK）
②言語
選択するとツールバーに表示されます（未選択でもOK）
③マーカー
入力すると黄色いマーカーがひかれます（未入力でもOK）
何行目かを指定するので、複数の場合は【2,5,8】など『,』で区切って入力、
複数行にわたってマーカーをひく場合は【3-5】など『–』でつなげて入力します
④コード
表示させたいコードを入力します（必須）
③下の部分でデザインやフォントなどを個別に設定することもできます
※ここでの設定は、このコードに限って有効です。
すべての設定を変えたい場合はダッシュボードの『設定→Crayon』から設定変更をする必要があります。
④【Add（挿入）】をクリック
⑤記事内にソースコードが表示されました。（入力画面ではこのような表示です）
⑥記事を公開すると、実際にはこのように見やすく設定されています(^-^)
記事内からコピーするときは・・・
これはあなたが自分のブログにソースコードを記述するときではなく、他のサイトやブログからソースコードをコピー＆ペーストするときの方法です。
①ツールバーの右から２番目のマークをクリック
②コードがすべて選択されて、【CTRL+C】でコピーして、【CTRL+V】で貼付けるように指示が出ます
③該当の箇所に貼り付けます
おわりに
【Crayon Syntax Highlighter】はいかがでしたでしょうか？
読者さんにとって見やすいことはもちろん、コピペがしやすく便利になります(^-^)
（そのまま記載されていると、正しく選択できなかったりするので。。。）
ブログカスタマイズの方法の記事を書く事があるなら、ぜひ使ってみてくださいね。
こんばんは！
ブログにソースコードを表示させる方法、使ってみようと思います。
一つづつこの通りすれば、出来ると思います。
有難う御座いました。
鬼藤さん
ご訪問・コメントありがとうございます。
操作をひとつひとつ紹介しているので、見たまま進めていただけると思います。
うまくいかなかったらぜひご連絡くださいね。