プラグイン

ブログ記事にHTMLソースコード表示させる方法!Crayon Syntax Highlighterの使い方

WordPressブログの記事本文にPHPやCSSのソースコードをテキスト表示させたい時、Crayon Syntax Highlighterというプラグインを使用すればシンプルでスマートな設定方法が可能です。

今回はソースコードプラグイン、Crayon Syntax Highlighterの使い方を紹介します!

ソースコードとは?どんな時に使うの?

ソースコードというのはブログ作成の際に、記事本文に表示させるPHPやCSSのテキストコードのこと。

ブログを立ち上げたばかりの時やサイトデザインをカスタマイズする際は、様々なサイトを参考にされることも多いと思いますが、そういう時に「このコードをコピペしましょう」みたいなことが書いてあるのを見たことがあるかもしれません。

私のサイトだと、こちらの記事の後半部分に多く使用しています。

例えばこういう感じですね⬇︎

 

実際にカーソルを当ててドラッグしてみるとお分かりになる様に、全てのコードをコピーすることが出来ます。

記事本文にそのままコードを書くことも出来ますが、その場合改行などでコードが正しく表示されない可能性があります。

何よりも見やすくないですよね。

 

HTMLコードというのは非常に繊細なので、サイトのテーマ編集で誤ったコードを貼り付けると一気にデザインが崩れたり、サイト自体がエラーになってしまう可能性もあります。

読者さんに正しい情報を分かりやすく伝える為にも、是非ソースコード表示させる専用プラグインを使用していきましょう。

ブログ記事本文にソースコードを表示させる方法!おすすめプラグインCrayon Syntax Highlighter設定方法&使い方

ブログ記事内にソースコード表示させるWordPress専用プラグインは、「Crayon Syntax Highlighter」がオススメです。

Crayon Syntax Highlighterの設定方法は?

ダッシュボードのプラグイン新規追加から「Crayon Syntax Highlighter」をインストール&有効化まで進めます。

 参考記事:WordPressにプラグインをインストール&有効化する方法

 

インストールが完了したら、記事新規投稿画面のビジュアルエディタを開くと、<>というボタンが追加されています。

 

ここまできたら、後は簡単です^^

Crayon Syntax Highlighterの使い方

記事本文で新しく追加されたこちらのボタンを開くと、⬇︎キャプチャの様な画面が開きますので、

Language→挿入するコードの種類

Code→表示させたいコード

上記を入力し、右上の「Add」をクリックします。

以上で完了です。

非常に簡単にソースコードを表示させられますので、是非ご参考くださいね^^

〜自由なライフスタイルを実現させたいアナタへ〜  

COMMENT

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