『Crayon Syntax Highlighter』プラグインでブログ記事にソースコードを表示しよう

 

こんにちは、栗丘 まみです。

先日の記事でLineやFacebookのような吹き出しをブログにも使える

『speech bubble』というプラグインをご紹介しました。

 

コレってどういう意味なのかな?
コレはですね・・・

こんな感じで会話形式になってブログが楽しくなりますよね。

⇒ 『speech bubble』の記事はコチラ

 

この記事をブログに掲載する時、ひとつ問題がありました。

 

『speech bubble』のコードをコピペして使えるようにしたかったのですが、

その方法がどうしても分からなくて、仕方なくコードを画像で表示して

記事を公開しました。

 

記事を公開した後もコードをコピペして使える方法を探していたところ、

私の記事を見たアフィリエイト仲間の「Gさん」という方が解決策を

教えてくれました o(≧▽≦)o

 

『Crayon Syntax Highlighter』

というWordPressのプラグインでできちゃうそうです!

 

Gさんのコチラのブログ記事の中にありますので、見てみてくださいね。

⇒ あった!吹き出しで楽しい記事が書けるWordPressのプラグイン<speech bubble>

Gさん、本当にありがとうございます☆

 

私もGさんのブログ記事を参考にして『Crayon Syntax Highlighter』の

インストールが完了しました!

早速、『Crayon Syntax Highlighter』を使って、コードをコピペして

使えるようにブログに表示してみましょう。

 

『Crayon Syntax Highlighter』の設定方法

①WordPress左側のメニューから「設定」-「Crayon」をクリックします。

設定-4-1

 

②「Crayon Syntax Highlighter設定」画面が開きます。

ほとんどデフォルト(初期設定)のままで変更しなくてOKですが、

「タグエディタ」の赤枠で囲った2つにチェックが入っていると、

ブログの表示が崩れることがあるようなので、この2つはチェックを外します。

画面を一番下までスクロールして左下の「変更を保存」をクリックします。

設定-1-3

 

③投稿画面を開き、テキストモードに切り替えて【crayon】をクリックします。

設定-2-1

 

④「Add Code」画面が開くので、真ん中の「コード」欄にコードを入力し、

「挿入」をクリックします。

設定-3-4

※タイトルは入力・未入力どちらでもOKです。

 

ビジュアルモードに切り替えて、下のように表示されていればOKです。

設定-5

 

 

⑥いったん記事を下書きとして保存し、プレビューで確認してみましょう。

下のように表示されていればOKです。

 

 

ツールバーを使って簡単にコードをコピペしよう

『Crayon Syntax Highlighter』のツールバーを使うと、簡単にコードを

コピペすることができます。

コードの上にマウスポインタを合わせると、ツールバーが表示されます。

設定-6

 

左から3番目のボタン(Toggle Line Wrap)をクリックすると、コードが右端で折り返されて全て表示されます。

設定-7-1-2

 

右から2番目のボタン(コピー)をクリックすると、コードが選択されます。

コピーはキーボードの「Ctrl+C」、貼り付けは「Ctrl+V」を押します。

設定-8-1

 

この方法が一番簡単だと思いますが、キーボードの操作が苦手な場合は下記の方法をお試しください。

 

 一番右のボタンをクリックすると、コードが別ウィンドウで表示されます。

設定-9-1

 

別ウィンドウで表示されたコードをマウスで範囲選択→右クリックのショート

カットメニューからコピペできます。

やりやすい方法でコードをコピペしてくださいね。

 

 

最後までお読みいただき、ありがとうございました。

 

 




ポチっと押してくれると泣いて喜びます(*´ω`*)

Comment

  1. カトウ より:

    こんにちは^^

    先日は訪問ありがとうございました。

    変わったプラグインあるもんですね!

    使っている人も少ないので目立ちますね!

    特に物販している人には
    使いやすいんじゃないでしょうか?

    対話形式での悩み解決に使うのでしょうね?

    また訪問します。

    ポチッと!

    • 栗丘 まみ より:

      カトウさん、こんにちは。

      コメントありがとうございます。

      通常のコードはビジュアルモードで入力すると
      そのままコードで表示されるのですが、
      「speech bubble」プラグインは、ビジュアル
      モードでの入力もOKという、ちょっと変わった
      プラグインでしたので、Crayonプラグインが
      役に立ちました!

      これからもよろしくお願いします。
      応援ありがとうございました。

  2. ルナクス より:

    栗丘 まみ様
    いつもお世話になります。
    ルナクスです。

    色々なプラグインがありますね。
    それを活用するには、こうやって
    情報交流をして、初めて有意義な
    ブログ運営生活が送れるかと。

    私も何かあれば良いのですが、
    特に思い浮かばず…。
    (申し訳ありません)

    これからも色々と教えて下さい。
    宜しくお願い申し上げます。

    せめて、応援を押させて下さい。
    ポチ☆ 宜しくです。

    • 栗丘 まみ より:

      ルナクスさん、こんにちは。

      いつもコメントありがとうございます。

      本当にいろいろなプラグインがあって、
      何か発見がある度に嬉しくなります。

      ルナクスさんは貯蓄術についての有益な
      情報をブログで発信してらっしゃるので
      私もいつも勉強させてもらってます。

      これからも有益な情報交換をお願いします☆
      応援ありがとうございました。

  3. めいこ より:

    栗丘さん、こんにちは
    めいこです。

    ブログの記事上にソースコードを
    表示させる方法とても参考になりました!
    たまにほかの人のブログでやられているのを見て
    どんな風にしているのかが気になっていたので
    疑問が解決できました!まだまだ自分の知らないことばかり
    が多いなと実感します。

    応援完了です。
    また読みに来ます。

    • 栗丘 まみ より:

      めいこさん、こんにちは。

      いつもコメントありがとうございます。

      ブログ記事内にコードを表示するのもまさかWordPress
      プラグインでできてしまうなんて、私も驚きました!

      本当に知らないことばかりですが、何か発見があるのって
      嬉しいですよね。

      これからも皆さまのお役に立てるような情報を
      ブログに掲載していきたいと思います。

      応援ありがとうございました。
      これからもよろしくお願いします。

  4. より:

    栗丘さん
    こんばんは!

    さっそくやって来ました。

    Gの記事も紹介していただいて
    ありがとうございます。

    栗丘さんの記事は丁寧で
    すごく分かりやすいですね~。
    勉強になるところが
    たくさんありました。

    Gも見習います。(^^♪

    ありがとうございました。
    これからもよろしくお願いします。

    応援ポチも完了です。

    • 栗丘 まみ より:

      Gさん、こんにちは。

      さっそくのご来訪ありがとうございます(≧▽≦)

      >栗丘さんの記事は丁寧ですごく分かりやすいですね~。
      勉強になるところがたくさんありました。

      Gさんにそう言っていただけてとても嬉しいです。
      励みになります。

      応援ありがとうございました。
      これからもよろしくお願いします。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ブログ運営者

ブログ運営者

はじめまして。
ブログ運営者の栗丘 まみと申します。

非正規(契約社員)としてフルタイムで働きながら主婦業もしている、いわゆる兼業主婦です。

「夢をかなえて充実した人生にしたい」という思いからアフィリエイトを始めました。

⇒ 詳しくはコチラ

人気ブログランキング

栗丘まみの最新e-Book

ブログ,記事,遅い,早く

オススメ電子書籍

オススメ電子書籍

Amazonでランキング1位を獲得した電子書籍が今なら期間限定で¥0でダウンロードできます!

▲トップへ戻る