記事内、ソースコード、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. XML Sitemaps、使い方、Search Console

    ツール

    XML Sitemapsの使い方とSearch Consoleとの紐付け方法を解説

    Googleが提供する無料プラグイン『Google XML Sitem…

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

    プラグイン

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

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

  3. ネットビジネス、Pretty Link Lite、使い方

    プラグイン

    短縮URLが自由に作成できるプラグインPretty Link Liteの使い方

    情報発信などを行うようになると、メールマガジンや外部サイトなどから自分…

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

    プラグイン

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

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

  5. Youtube動画、集客、収益化、YoutubeAddsPro、使い方、解説

    YouTube

    Youtube動画からの集客と収益化に活用したい!YoutubeAddsProの魅力

    今や、インターネットビジネスにおいてYoutubeは欠かせません。…

  6. All in One SEO Pack、設定方法、使い方

    SEO

    All in One SEO Packの導入&設定方法と記事投稿時の使い方を解説

    Wordpressでサイトを運営していく際導入すべきプラグインとして、…

PRESENT

Hitomiefu,インターネットビジネス,無料プレゼント,Canvas

MAIL MAGAZINE

MAIL MAGAZINE

Twitter

LINE@

Hitomi、LINE@、登録
  1. トレンドアフィリエイト、インストール、便利、携帯アプリ

    トレンドアフィリエイト

    トレンドアフィリエイトをするのにインストールするべき便利な携帯アプリまとめ
  2. 和田アキ子、何様、パワハラ、問題、行方、上下関係、社会問題

    アーティストから学ぶ

    『和田アキ子は何様』問題の行方は?|上下関係によるパワハラは社会問題に
  3. アフィリエイト,種類,トレンドアフィリエイト,サイトアフィリエイト,違い,稼ぎやすさ,比較

    インターネットビジネス

    【アフィリエイトの種類】トレンドアフィリエイトとサイトアフィリエイトの違いと稼ぎ…
  4. ダイレクト出版、年間購読、レビュー、口コミ

    DRM

    ダイレクト出版の年間購読、半年経って再レビュー!|年間購読の価値はあるか?
  5. 江角マキコ,芸能界,引退,なぜ,マスコミ,過剰,報道,情報過多

    アーティストから学ぶ

    江角マキコが芸能界を引退したのはなぜか|マスコミの過剰報道と情報過多について
PAGE TOP