ソースコード表示プラグインCrayon Syntax Highlighterの使い方

ソースコード

今回はWordPressブログにソースコードを表示させるプラグイン『Crayon Syntax Highlighter』の使い方を解説していきます。

ネットビジネスで情報発信をやっている方や、WordPressのカスタマイズに関するブログを運営している方にとって、『ソースコード』の表記をする必要のある場面は頻繁に訪れますが、ソースコードはプラグインを使うことで簡単に表示させることができます。

ソースコード表示用のプラグインは他にもいくつかありますが、数種類使ってみた中でも、特に『Crayon Syntax Highlighter』が使いやすかったという印象です。

(というか、他のプラグインが上手く機能してくれませんでした・・・)

ソースコード表示って何のためにするの?

そもそも、『ソースコード』とは何かというと、ウィキペディアなどでは小難しいことが書かれていますが、要するにPHPやCSSなどのコードのことだと思っていただければ結構です。

普通に、物販系のアフィリエイトや、トレンドアフィリエイト、ブログを行う場合には特にソースコードを記事に載せる機会はないかと思いますが、ネットビジネスのノウハウを発信したりWordPressのカスタマイズ術などをブログで発信する際には、ソースコードを綺麗に表示すべき機会は必ずやってきます。

参考までに、実際にソースコード表示している記事を載せておきますね。

参考:WordPressブログに記事の最終更新日時を自動的に表示させる方法

見本例として、プラグインを使ってソースコードを貼ってみるとこんな感じです。


 このように、非常に綺麗にソースコードを表示させることができます。

それでは、『どうしてソースコードをプラグインで表示させなきゃいけないの?ブログの記事に直接貼り付ければいいじゃん!』と思うかもしれませんが、プラグインで表示させなければいけない理由があります。

  • 貼り付けたコードがそのまま表示されない
  • 改行などがずれてしまう

このような可能性があるため、しっかりと専用のプラグインを使って表示させていきましょう。

あなたの記事で紹介したコードの改行などがずれてしまったり、そのまま表示されなかったりしたら、そのコードを参考に作業をした人のサイトに不具合が生じたりデザインが崩れてしまう恐れがあります。

そうなってしまうと、あなたの記事は信ぴょう性がないとか、クオリティが低いと思われてしまいますので、ソースコードはプラグインを使って丁寧に表示させていくことが必要です。

Crayon Syntax Highlighterがソースコード表示プラグインで一番オススメ

今現在で一番オススメなソースコード表示プラグインは『Cryon Syntax Highliter』です。

恐らく最も有名なソースコード表示プラグインは『SyntaxHighlighter Evolved』で、その次に有名なものが『Auto SyntaxHighlighter』だと思います。

僕も最初は、『SyntaxHighlighter Evolved』を使っていたのですが、コードが綺麗に表示されず。

仕方ないから『Auto SyntaxHigjliter』に変えたものの、やはりコードと行番号がズレるなどの不具合が生じてしまいました。

そこで、ダメ元で『Crayon Sytax Highlighter』をインストールして使ってみたところ、ようやく綺麗にコード表示されたということで一安心です。

一時期は、『もうソースコード表示はこのブログでは無理か』と諦めていたので、本当に良かったです。

Crayon Syntax Highlighterの使い方

まず、『プラグイン>新規追加』からCrayon Syntax Highlighterをインストールしていきます。

参考:WordPressプラグインのインストールと有効化の方法

普通にソースコードを表示させていくだけなら特に設定は必要ありません。ソースコード表示方法の解説に移ります。

記事新規投稿画面のビジュアルエディタを開くと、下記画像の赤枠で囲った『挿入画面』というボタンが追加されています。

ソースコード

このボタンをクリックすると、下記画像のように、コード投稿画面が表示されます。

Cryon SyntaxHighliter

『プログラム言語』というところから、これから挿入するコードの種類を選択し、『コード』に表示させたいコードを貼り付けます。

そして、『挿入』というボタンをクリックしたら、ソースコードが綺麗に表示されています。

このように、非常に簡単な作業でソースコードを綺麗な形式で表示させることができます。

最後に

ソースコードが綺麗に貼られていたら、サイト訪問者の方にとって役に立つ上に、初めてサイトを訪れる人に対して『このサイトは良いサイトだな』、『このサイトの運営者はスゴそうな人だな』と思わせることができそうです。

つまり、ネットビジネスのブランディングでいうところの『機能的価値』と『感情的価値』の両方を高めてくれるかもしれません。

参考:ブランディング講座『機能的価値』を初心者向けに解説

参考:ブランディング講座『感情的価値』を初心者向けに解説

作業自体もとても簡単なので、WordPressのカスタマイズやプラグインの使い方を開設する時に、ソースコードを表示させたいのであれば、ぜひCrayon Syntax Highlighterを使ってみてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でnozzieをフォローしよう!

記事公開日:2014年7月29日

無料メールマガジン

ネットビジネス




ネットビジネスで自由な人生を描くノジーのブログへ戻る

    
サブコンテンツ

このページの先頭へ