記事内、ソースコード、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. Search Console、登録方法、サイトマップ、送信方法、解説、HTMLタグ

    ツール

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

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

  2. WP External Links、使い方、設定

    SEO

    nofollowタグの自動生成プラグインWP External Linksの使い方と設定方法

    サイト運営を行う際には、ある程度基本的なSEOの知識が必要です。初心者…

  3. 記事、アクセス数、Post-Views

    プラグイン

    記事ごとのアクセス数がわかるプラグインPost-Viewsを導入しよう

    Wordpressを開設したらぜひ導入しておきたいプラグインのひとつに…

  4. プラグイン

    インスタグラムのタイムラインをWordPressに埋め込むプラグイン

    こんにちは、Hitomiです! 最近、インスタグラム始めました(遅…

  5. プラグイン

    2017年から続出!AdsenseManagerが使えないエラーへの対処法【エックスサーバー】

    2017年以降に新しくWordpressを立ち上げた人に続出しているの…

  6. 記事作成、効率化、TinyMCE Advanced

    プラグイン

    記事作成を効率化するプラグインTinyMCE Advancedの使い方を解説

    自分で記事をたくさん書くようになると、 “いかに効率良く記事を作成…

Twitter

  1. 賢威、グローバルメニュー、作成

    Wordpress

    賢威のサイトトップページにグローバルメニューを作成する方法
  2. アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

    DRM

    【アスメル】メルマガ登録フォームをCSSジェネレーターでおしゃれにデザインする方…
  3. Wordpress Related Posts、設定方法、設置位置

    プラグイン

    WordPress Related Postsで関連記事を表示させよう|設定方法…
  4. トレンドアフィリエイト、無料ブログ、有料ブログ

    トレンドアフィリエイト

    無料ブログでアフィリエイトをするのにおすすめはどこ?有料ブログとの違いと比較
  5. 迷惑メール、コンタクトフォーム7

    インターネットビジネス

    Contact Form7でチェックボックス付きお問い合わせフォームを作る方法
PAGE TOP