家事・子育ての合間にブログ・アフィリエイト・メルマガで収入を得る!

WordPressで記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』の設定方法と使い方

miiko
WRITER
 
記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』
この記事を書いている人 - WRITER -
miiko
初心者さんのブログ運営をサポートしています。 Wordpress作成・ブログ記事の書き方・レポートや特典の作り方・メルマガ配信など、初心者さんの『困った(>_<)』をサポートします。
詳しいプロフィールはこちら

 

本文中で「HTML」「CSS」などの解説をするときに、そのまま入力すると、記事に反映されてしまったり、ユーザーがコピペできなかったり、何かと不便ですよね。

 

そこで今回は、ソースコードを反映せずにきれいに表示し、ユーザーはコピペもできる便利なプラグイン『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』の設定をしていきましょう。

 

 

『Crayon Syntax Highlighter』の設定方法

 

『Crayon Syntax Highlighter』は、初期設定のままでも、問題なく使用できますが、管理画面の設定「Crayon」から各設定を行うことができますので、一通りみていきましょう。

 

①管理画面の【設定】から②【Crayon】を選択します。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

 

 

設定画面が長いので、必要な個所を順に紹介します。

①【テーマ】デザインの変更ができます。

各テーマはプレビューで確認することができます。

②【フォント】フォントの種類・サイズ・行の高さが設定できます。

 

 

③【余白の設定】上下の余白の設定ができます。

④【ツールバー】ツールバーの表示設定ができます。

マウスをのせたときに表示する・常に表示する・表示しないから選択できます。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

 

 

⑤【行】行の表示設定ができます。

コードが長くなった時に、折り返して表示するか、スライドして表示させるかの設定ができます。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

 

 

⑥【その他】「必要なときにのみCrayonのCSSとJavaScriptを読み込もうと試みる」にチェックをいれることで、表示の最適がができます。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

 

 

⑦【変更を保存】変更を確定します。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

 

『Crayon Syntax Highlighter』の設定方法は以上です。

では、早速使ってみましょう。

 

 

『Crayon Syntax Highlighter』の使い方

 

投稿入力画面の右上にある【<>】をクリックします。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

 

 

コード以外は任意になります。

①【タイトル】ツールバーにタイトルが表示されます。(任意)

②【プログラム言語】ツールバーにプログラム言語が表示されます。(任意)

③【マーカーライン】コードにマーカーを引くことができます。(任意)

④【コード】コードを入力します。

⑤【挿入】

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

 

 

③マーカーで強調したい行数が、複数ある場合は【,】で区切ります。

例【1,3,5】

複数行続けて強調したいときは【-】で範囲指定をします。

例【1-5】

 

基本的には④コードを入力し、⑤挿入するだけでOKです。

 

入力画面では、こんな感じ↓に表示されても

 

 

実際のブログでは、こんな感じ↓に、きれいに表示されます。

 

 

まとめ

 

『Crayon Syntax Highlighter』を利用すれば、簡単にコードの表示を行うことが出来ます。

きれいに表示させるだけでなく、ユーザーは簡単にコピペすることができるようになり、便利なブログになりますね♪

ブログでソースコードを、表示させるときは『Crayon Syntax Highlighter』を利用してください(*’▽’)

 

 

 

最後までご覧いただきありがとうございます。

ポチッと応援してもらえると嬉しいです(*'▽')

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ

 

自宅でお仕事!ブログを仕事にしませんか?

初心者でも・実績がなくても自分のペースで

ブログで稼ぐ力を身に付けるための無料メルマガ講座です。

メルマガ登録透過2

さらに、ブログ運営に役立つ4つのプレゼント付き!

 

 

 

この記事を書いている人 - WRITER -
miiko
初心者さんのブログ運営をサポートしています。 Wordpress作成・ブログ記事の書き方・レポートや特典の作り方・メルマガ配信など、初心者さんの『困った(>_<)』をサポートします。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© みーこの自宅でネットビジネス , 2018 All Rights Reserved.