◆当サイト一押し教材『ルレアプラス』◆

WordPressプラグイン【Crayon Syntax Highlighter】の使い方や設定方法

    インターネットをしていて、以下のようにソースコードを掲載しているブログを見たことありますよね。

    どうやって表示しているのかなーっと思っていたんだけど、WordPressプラグインでした。

    かなり便利なプラグインなので、HTMLとかのソースコードを掲載する機会があるのならオススメの機能ですよ。

    Crayon Syntax Highlighterの設定方法

    この手のプラグインは他にも似たようなのがいくつもあるけど、「SyntaxHighlighter Evolved」か「Crayon Syntax Highlighter」が特に使っている人が多いみたいです。

    試しに両方使ってみたけど、「SyntaxHighlighter Evolved」だと私の使用しているWordPressテンプレート(リファインPRO)だと表示が崩れてしまったので、「Crayon Syntax Highlighter」で決定。

    Exif_JPEG_PICTURE

     

    1.プラグインの新規追加から、「Crayon Syntax Highlighter」を検索。

    今すぐインストールをクリックして、インストールを実行。

    pic0309

     

    2.WordPressダッシュボードサイドバーの「設定」に「Crayon」が追加されているので、クリックして設定画面を表示させる。

    pic0310

     

    3.「一般設定」-「テーマ」で視覚的な項目を設定できます。お好みのデザインのものを選べばOKです。

    pic0312

     

    4.「フォント」で表示させるコードのフォントやサイズを選択できます。ここもお好みで決めていけばOK。

    pic0313

     

    5.「サイズ」ではコードを表示させる枠組みのサイズを指定できます。特にこだわりがなければ初期値のままでも問題ないです。

    pic0314

     

    6.「ツールバー」では訪問者がコード部分にマウスカーソルを当てたときにツールバーを表示させるかどうかが選択できます。

    私は邪魔なので「表示しない」にしてます。

    pic0315

     

    7.「行」でコードを表示する行について設定が可能です。

    行ごとに色を変えたり、行番号の表示有無、重要な行にマーキングをするなど、用途に合わせて決めていきましょう。

    pic0316

     

    8.「コード」では、コードの見せ方や制限について設定することができます。

    小難しいことを書いてあるけど、基本的に初期値のままでOKです。

    pic0317

     

    9.タグのキャプチャについての設定ができます。と言われてもよくわからない項目も多いです。とりあえず「Crayonsとして<pre>タグをキャプチャ」にチェックが入っていればOKです。

    pic0318

     

    10.「タグエディタ」の項目の赤枠で囲ってる部分はチェックを外した方がいいです。

    チェックが入っていると、ブログ内の表示が崩れることがあります。

    pic0319

     

    以上の設定で一通り問題無く使用できるようになります。

     

    Crayon Syntax Highlighterの使い方

    実際にこのプラグインを使うには2通りの方法があります。

    まずは、WordPressのエディターからの挿入

    エディターに「crayon」が追加されているので、そこをクリック。

    pic0320

    そうすると挿入画面が表示されるので、ここに表示させたいコードを入れればOKです。

    注意事項としては、「プログラム言語」を記入するコードに合わせておかないと、キレイに表示されないことがあります。

    HTMLのタグを書くなら「XHTML」を選択すればOKです。

    pic0321

     

    もうひとつがショートコードでタグを囲んで表示する方法です。

    [言語]~[/言語]または[crayon]~[/crayon]でコードを囲えばOK。

    例えば、

    [crayon]

    <html>
    <head>
    <title>タイトル</title>
    </head>
    <body>
    本文
    </body>
    </html>

    [/crayon]

    と囲む感じになります。

     

    このようなプラグインでコードの見せ方を工夫するだけで、プロっぽく見えますね。

    使い方もかなり簡単なので、コードを紹介する機会があれば積極的に使ってみましょう。

     

      ◆アフィリエイトで成功するためのオススメ情報商材◆

      オススメ情報商材ランキング
      実際に私が実践しているアフィリエイトで稼ぐための情報商材をランキング形式でご紹介します。
      便利ツールランキング
      アフィリエイトの実践を補助する役立つ便利ツールをランキング形式でご紹介します。

      ◆Facebook始めました◆

      最新記事もチェック

      ◆SAKUの無料メルマガ購読のご案内◆

      mail-magazine

      コメントを残す

      日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)