記事内、ソースコード、Crayon Syntax Highlighter

プラグイン

記事内にソースコードを埋め込むプラグインCrayon Syntax Highlighterの設定方法

カスタマイズ関連のことで説明したり、あるいは解説したりする際によく使っている『Crayon Syntax Highlighter』。こちらは、記事内にソースコードを綺麗に埋め込むのに大変重宝するプラグインです。

当プラグインさえインストールし、設定を施しておけばサイト運営者にとって非常に見やすく、そしてしっかりと記事を書いているんだなという印象を与えることもできてしまいます。

ぜひ、インストールし導入しておくことをオススメ致します。

Crayon Syntax Highlighterはなんで必要なの?

Crayon Syntax Highlighterを使って埋め込まれたソースコードとは、
具体的にこのようなものですね。

 

こんな風に、記事のなかにソースコードを綺麗に埋め込むに当プラグインは必要不可欠です。

サイトのカスタマイズの解説などをするときには必須ですし、
これを使っているだけでかなり信頼性の高い記事だと思ってもらえます。

と、いうのもPHPやCSSの編集をしたことがある方であれば分かるかと思いますが、
コードの編集というのはすごくデリケートで、
スペースや改行などが少しずれていただけでも
サイトのカスタマイズが大幅にずれてしまいます。

あなたがサイトに載せたコードをコピーして貼り付けた読者の方のサイトが、
真っ白になってしまった・・なんてことになったら大変ですよね^^;

信頼も失ってしまいますし、もう二度とサイトを見てもらえないかもしれません。

ですから、私たちのような情報発信者は日頃から、
確実で性格な情報だけを提供していかなければいけないですね。

『Crayon Syntax Highlighter』を使うことで、
ユーザーに対し正しいコード情報を提供することができます。

 

Crayon Syntax Highlighterのインストールと有効化

まずは、『Crayon Syntax Highlighter』のインストールと有効化をしていきましょう。

記事内、ソースコード、Crayon Syntax Highlighter

参考記事:WordPressにプラグインをインストールする方法

 

有効化が完了すると、『ダッシュボード設定』のなかに
Crayon』というメニューが新たに追加されます。

記事内、ソースコード、Crayon Syntax Highlighter

 

ここをクリックすると、当プラグインの設定画面が表示されます。

 

Crayon Syntax Highlighterの設定方法

設定画面を開いてみると、下まで様々な設定・変更が可能ですが
基本的には、デフォルトのままで問題ありません。

ご自分でこだわりがある場合は細かな設定はこちらのなかで出来ますので、
好みや用途に合わせて手を加えていくとよいでしょう。

一応見ておくべきなのは『テーマ』と『サイズ』の2点のみです。

 

記事内、ソースコード、Crayon Syntax Highlighter

 

● テーマ

ここでは、表示されるソースコードの色合いやデザインが選べます。
色々な種類があり、背景色なども様々です。

気になるものをクリックしてみると、
下に表示されているコードがテーマに合わせてプレビューしてくれますので、
サイトのデザイン等も考慮ししっくりくるものを選びましょう。

特にこだわらないという場合であればデフォルトの『Classic』で問題ありません^^

● サイズ

サイトの記事などの横幅や高さを調節するための場所です。
投稿した際にユーザーが見やすいと思う大きさに調節しましょう。

 

ここまでできれば、あとは記事に埋め込んでいくだけです!

 

Crayon Syntax Highlighterの使い方

さて、ここまではプラグインの設定を解説してきましたが、
ここからは実際に記事に埋め込む方法を解説していきます。

まず、当プラグインを有効化しますと
テキストエディタのなかに『<>』というマークが出現するようになります。

ソースを埋め込みたいところでこのマークをクリックすると、
次にhtmlを記述するタブが出てきます。

 

記事内、ソースコード、Crayon Syntax Highlighter

 

ここでも、下へスクロールすることができ詳細設定することが可能ですが
何もしなければ、上の章で解説した設定画面通りに表示されます。

コード』というところにソースコードをコピペしたら、
右上の<挿入>をクリックします。

 

記事内、ソースコード、Crayon Syntax Highlighter

 

これだけで、記事のなかに綺麗にソースコードが埋め込まれましたね。

 

記事内、ソースコード、Crayon Syntax Highlighter

 

設定通りに表示されているかどうかを確認するには、
一度プレビューでしっかりと確認してみてくださいね^^

 

これで、設定と使い方の解説は以上になります。
お疲れ様でした^^

 

まとめ

今回は、記事のなかに綺麗にソースコードを埋め込むためのプラグイン
『Crayon Syntax Highlighter』をご紹介致しました。

これをしっかりと使いこなすことで、
ユーザビリティはもちろんのこと、圧倒的に信頼度が向上します。

トレンドアフィリエイトだと当プラグインを使うことはなかなかないと思いますが、
情報発信を行ううえでは必ずインストールしておきたいプラグインです。

ぜひ、利用してみてくださいね。
それでは最後までご覧いただき、ありがとうございました。

画像の説明

関連記事

  1. Table of Contents、目次、設定

    プラグイン

    Table of Contents Plusで投稿記事に目次を自動生成する方法

    洗練されたサイトや記事には必ず、適切な位置に目次が設置されています。今…

  2. Search Console、登録方法、サイトマップ、送信方法、解説、HTMLタグ

    ツール

    Search Consoleの登録方法とサイトマップの送信方法を解説|HTMLタグをサイトに追加する…

    ネットビジネスを行う際に必ず必要な“自分用のサイト”。例えそのサイトが…

  3. Contact Form7、お問い合わせフォーム、作成

    プラグイン

    Contact Form7で簡単にお問い合わせフォームを作成する方法

    お問い合わせフォームは、 訪問者がサイトの管理人に接触するための機…

  4. Twitter、WordTwit、設定方法

    プラグイン

    記事とTwitterを連携させるプラグインWordTwitの使い方と設定方法

    Wordpressに記事を投稿した際、自動的にTwitterに連携し記…

  5. WP Social Bookmarking Light、ソーシャルボタン

    プラグイン

    WP Social Bookmarking Lightでソーシャルボタンをサイトに設置する方法

    サイトに記事を書き量産していくようになったら、気になるのはアクセス数で…

  6. Wordpress、CTA、プラグイン、WordPress Call To Action Plugin、使い方

    プラグイン

    WordPressにCTAを設置するプラグインWordPress Call To Action Pl…

    Wordpressのブログ記事に、簡単にCTAを作成できるプラグインと…

Twitter

  1. ネッビジネス、成功率

    マインドセット

    ネットビジネスの成功率が低い?その理由と成功方法を徹底解説
  2. iMac、壁紙、おしゃれ、Apple公式、壁紙、ダウンロード、設定

    Mac

    iMacの壁紙がおしゃれ…Apple公式の最新iMac壁紙ダウンロード&…
  3. JetPack、WordPress、インストール、方法、サイト統計情報

    プラグイン

    JetPackをWordPressにインストールする方法|サイト統計情報を一目で…
  4. ノマド

    ノジーさん×ホシノマオさん×Hitomi対談|インターネットビジネスで成功するた…
  5. ダイレクト出版、年間購読、月刊ビジネス選書、評価、レビュー、オススメ、理由

    DRM

    ダイレクト出版の月刊ビジネス選書評価レビュー|私が年間購読をオススメする理由
PAGE TOP