WordPress

wordpress

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]

と囲む感じになります。

このようなプラグインでコードの見せ方を工夫するだけで、プロっぽく見えますね。使い方もかなり簡単なので、コードを紹介する機会があれば積極的に使ってみましょう。

 

関連記事

  1. wordpress

    WordPressの画像をポップアップするLightboxプラグイン【…

  2. Cloud Flareのキャッシュを削除する方法|サイト更新が反映され…

  3. server

    お名前.com共用サーバーからWPXクラウドへWordPressを移転…

  4. wordpress

    WordPressテンプレートの買い過ぎはノウハウコレクターへの第一歩…

  5. wordpress

    AddQuicktagプラグインのJSONファイルのエクスポート、イン…

  6. wordpress

    YARPPのサムネイル画像が潰れる状況を改善する方法

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

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

最強のWordPressテンプレート「賢威」

wordpress-keni

WordPressのSEO対策が気になるならWordPressテンプレートの最高峰「賢威」で間違いありません。

SAKU限定特典&レビュー

究極のサイト作成ツール「シリウス」

sirius

サイトアフィリエイトをより効率的に効果的に進めるサイト作成ツールならシリウス一択です。サイトアフィリエイトの神器みたいなものですよ!

SAKU限定特典&レビュー

アフィリエイトのバイブル「LUREA plus」

LUREA-plus

本気で稼ぐために必要なノウハウがギュッと詰め込まれた、全てのアフィリエイターのバイブルとなる教材です。 アフィリエイトの基礎からしっかりと取り組めます。 再現性も抜群です!

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP