介護の仕事をしながらブログを運営している"ブロガーお助け屋”

”ブロガーお助け屋”ってなに?

【Crayon Syntax Highlighterとは?】記事内にコードを簡単挿入!

 
この記事を書いている人 - WRITER -
青木なおと
プロ野球のブログを書いていくうちにSEO関連に興味を持ち猛勉強しています。今、ブログ集客に悩んでる方の少しでも参考になるブログを目指してのんびり更新しています。
詳しいプロフィールはこちら

プログラミングのブログやwordPress関連のブログを運営している方でHTMLやCSSのコードを見本として記事内に挿入したいと思うときありますよね?

 

今回は簡単にHTMLやCSSのコードを挿入できるプラグイン「Crayon Syntax Highlighter」を解説していきます。

 

  • 記事内にコードを挿入してわかりやすく見本を書きたい
  • 記事内に挿入してコピペをしてもらって簡単に設定をしてもらいたい

 

といった方におすすめの記事となっています。

 

私自身、プログラミングの知識はありませんがブログ運営に役立コードを発信したいときにはこのプラグインを使用して記事内に挿入しています。

 

 

Crayon Syntax Highlighterは記事内にコードを挿入できる?

 

「Crayon Syntax Highlighter」は↓のように記事の中にこのようにソースコードを表示できるようにするプラグインです↓

 

 

ただ記事の中にコードを表示するだけでなくタグエディッターを表示してコピペが楽に行えるようになります。

 

またコードを表示する外観を「設定」で変更することができるのでサイトの色にあった装飾にするのもありです!

 

Crayon Syntax Highlighterのインストール方法

インストール方法

 

「プラグイン」「新規追加」をクリックします。検索欄に「Crayon Syntax Highlighter」と入力してください。

 

 

そうすると出てくるので「今すぐインストール」をクリックし「有効化」を押してください。次は設定を行っていきます。

 

Crayon Syntax Highlighterを設定していく

設定方法

 

「有効化」が完了しますと「設定」の欄に「Crayon」と追加されますのでクリックしてください。

 

そうすると英語でズラーーっと文字が出てくると思います。

 

ブラウザが「グーグルクローム」ならマウスの右クリックをおして「日本語翻訳」を押すと、わかりやすくなります。

 

↓変更が必要な部分は以下の通りです↓

 

 

 お好きデザインを選択してください
 フォントの種類や、大きさ、高さを選択できるので見やすいよう設定してください
③ 上下の余白「12」「24」がおすすめです。
 ツールバーを常に表示に設定
 チェックをいれる
 チェックを入れる
 変更内容を保存してください!

 

これで設定は完了です。実際の投稿画面を見てみましょう!

 

Crayon Syntax Highlighterを使ってコードを簡単に記事に挿入!

実際に投稿してみよう!

 

「投稿」から「新規追加」をクリックし入力画面になると「<>」こんなのがなのが追加されていると思います。

 

 

ここをクリックするとまた英語だらけの入力画面が出てくると思います。

 

↓以下の通りに入力をしていってください↓

 

入力手順

 挿入したいソースコードを入力(必須)
 入力するとツールバーにタイトルが表示される。見分けがつくよう設定しておこう!
 ツールバーに言語が表示されます(任意)
 入力した数字の行が黄色でハイライトされます(任意)
 クリックすると挿入されます!

 

挿入をしたコードを確認

 

上記の通り設定し挿入をしたらこんな感じで挿入されます。

 

例 画像の影付き投稿

 

 

ちゃんと表示がされていますね!これで完了です!

 

これでCSSやHTMLコードを記事内に見本として挿入することができるね!

NAOTO

 

まとめ

 

ここまで「Crayon Syntax Highlighter」の解説記事を見ていただいたありがとうございます!

 

最後になりますが、ざっくりとこの記事の内容をまとめていきます。

 

 記事内にソースコードを挿入するなら「Crayon Syntax Highlighter」
 プラグインの為、インストールが必要
 設定は非常に簡単
 外観の装飾も可能
 ユーザーがコピペしやすくなっている

 

こんな感じとなりました。これでCSSやHTMLのソースコードを記事内に見本として掲載するときも方法に困らなくて済みますね!

 

読んでいただきありがとうございました。

 

↓ブログ運営に役立つプラグインを紹介中↓

>>【wordPress・プラグイン】ブログ運営に役立つおすすめの16選!<<

この記事を書いている人 - WRITER -
青木なおと
プロ野球のブログを書いていくうちにSEO関連に興味を持ち猛勉強しています。今、ブログ集客に悩んでる方の少しでも参考になるブログを目指してのんびり更新しています。
詳しいプロフィールはこちら

- Comments -

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

CAPTCHA


Copyright© 青木なおとのブログ , 2018 All Rights Reserved.