crayon-syntax-highlighter-setting

WordPressブログ運営

Crayon Syntax Highlighterとは?導入方法と使い方【ソースコード表示・WordPressプラグイン】

更新日:

この記事では、

  • WordPressプラグイン「Crayon Syntax Highlighter」とは?
  • 「Crayon Syntax Highlighter」の導入方法(インストールと有効化)
  • 「Crayon Syntax Highlighter」の基本的な使い方

この3点について、わかりやすく見ていきます。ちなみに「Crayon Syntax Highlighter」は通常無料のプラグインです。

初心者向けな内容です。

【この記事の執筆者について】まるといいます。主にブログ・アフィリエイトで生きています。

はじめに

プラグインの種類によっては、導入済みのテーマやプラグインとの相性、プラグイン自体の問題などにより、WordPressに不具合が発生する可能性があります。プラグインのご利用にあたっては、あらかじめバックアップを取られた上で全て自己責任でお願いいたします。

【関連記事】⇒BackWPUpの設定方法と使い方を優しく解説【バックアップ・WordPressプラグイン】

WordPressプラグイン「Crayon Syntax Highlighter」とは?

「Crayon Syntax Highlighter」は、WordPressブログの記事などに、

こんな感じでソースコード(CSSやPHPなどのこと)を綺麗に表示できるプラグインです。

使い方も非常に簡単です。さっそく見ていきましょう。

wing_300_blog

「Crayon Syntax Highlighter」の導入方法(インストールと有効化)

普通に「インストールと有効化」をするだけなので、わかる方は飛ばしてください♪

WordPress管理画面 > プラグイン > 新規追加 をクリックします。

crayon-syntax-highlighter-setting_01

画像はクリックで拡大されます

検索欄に、「Crayon Syntax Highlighter」と入力します。

プラグイン「Crayon Syntax Highlighter」が表示されますので、 今すぐインストール > 有効化 の順にクリックします。

crayon-syntax-highlighter-setting_02

画像はクリックで拡大されます

インストールと有効化はこれでOKです♪

「Crayon Syntax Highlighter」の基本的な使い方

本文中の、ソースコードを挿入したい場所でカーソルをクリックします。

ビジュアルエディタの「<>」ボタンをクリックします。

crayon-syntax-highlighter-setting_08

画像はクリックで拡大されます

全く別のプラグイン「TinyMCE Advanced」も導入している場合、「<>」ボタンが酷似しているためご注意ください。

crayon-syntax-highlighter-setting_12

画像はクリックで拡大されます

ちなみに、「ビジュアルモード」ではなく「テキストモード」を使用している場合は、テキストエディタの「crayon」ボタンをクリックします。

crayon-syntax-highlighter-setting_09

画像はクリックで拡大されます

「Code」入力欄に、記事中に挿入したいソースコードを入力します。

画面上部の「Add」をクリックします。

crayon-syntax-highlighter-setting_10

画像はクリックで拡大されます

記事編集の画面では、(ビジュアルモードの場合)↓の画面のように表示されています。

crayon-syntax-highlighter-setting_11

画像はクリックで拡大されます

この記事作成画面では、まだ完成イメージと違いますね。プレビューで見てみましょう♪

↓の画面のようにプレビュー表示されていれば、ソースコードは正常に表示されています。

crayon-syntax-highlighter-setting_07

画像はクリックで拡大されます

ちなみに、先ほどのソースコード入力画面でデザインの変更もできます。

「Crayon Syntax Highlighter」の基本的な使い方は以上です。

wing_300_blog

この記事を書いている人

まる

丸10年の会社員生活から独立して、WEB業界でフリーランスをやってます。このブログでは、

・『WordPressブログ』の初心者向けマニュアル

・大好きな『東野・岡村の旅猿』ネタ

この2つを中心に発信しています。

-WordPressブログ運営

Copyright© MAL LiFE LOG , 2019 All Rights Reserved.