【WordPress】コードやソースをブログ本文・記事に記載する方法!

★記事が気に入ったらシェアお願いします★

ブログ記事やサイトにコードやソースを表示したい!

ブログを書いていてプラグインやらデザインやらを軽く紹介したりするのですが、ある時使用しているコードを記事に書いて紹介したくなったのです。

しかし!

コードをそのまま書くと変換されちゃって、コード自体が表示されない!!

でも他のブロガーさんとかも普通に使われているので、何か方法があるはずだ!と探してみました。

そこで見つけたのが、“Crayon Syntax Highlighter”というプラグイン。

良く見かける、

ですね。
これを使うとコードも変換されずに文字列で表示する事ができます。

  Crayon Syntax Highlighterのインストール

インストールの仕方はいつも通り。

ダッシュボードの“プラグイン→新規追加”から、右上の選択窓で“Crayon Syntax Highlighter”と入力し検索します。

“今すぐインストール”をクリックし、インストールしたら“有効化”しておきます。

crayon2

  Crayon Syntax Highlighterの設定

ダッシュボードの“設定→Crayou”で初期設定が出来ます。
基本的にデフォルトで大丈夫だと思いますが、自分のサイトに合わせて初期設定を行っておくと使用する時に便利です。

今回は当サイトの設定を載せておきますので良ければ参考にして下さい。

 

crayon3

テーマ:Vs2012を使用。変更する事でデザインを変えられます。サンプルを下に載せていますので参考にして下さい。

フォント:Consolasを使用。サンプルを下に載せています。

サイズ:横幅を480に設定し、記事の横幅に合わせて狭めにスマホでもスライドバーが出ない程度に設定しています。

 

crayon4

ツールバー:あまり使わないと思うので(使用する様な上級者は当サイトに来ない!?)と思い表示しないにしています。

行:デフォルトで行表示は外しておいても大丈夫だと。現在はこの記事でサンプル表示させたいので、表示設定しています。

コード:単純なコードビューを…のチェックを外しています。

 

crayon5

その他:“必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる”にチェックを入れ、表示の無い時は読み込みが無いよう設定しています。

 

  Crayon Syntax Highlighterの使い方

ではでは使い方ですがとっても簡単。
Crayonをインストールすると投稿画面のツールバーに下の画像の<>のようなアイコンが出来ています。

crayon6

 

このアイコンをクリックすると下の様な画面が表示されます。
“ここにコードを記入して下さい”というところにコードを入力します。
設定以降は初期設定の欄と同じです。
記事に合わせて高さや余白等を設定すると良いでしょう。
入力が完了すると右上の“挿入”をクリックします。
すると記事の中にコードの書かれた窓が出来ているのでプレビューで確認してみましょう。

crayon7

 

以上でCrayon Syntax Highlighterの使用方法は終了です。

以下にテーマのとフォントサンプルを載せているので良ければ参考にして下さい。

 

  Crayon Syntax Highlighterのテーマ一覧

2行目がテーマの名前です。
挿入時の“設定→テーマ”、または初期設定でテーマを変更することでデザインを変える事が出来ます。またフォントも同様です。

crayon8

 

以下サンプルです

  Crayon Syntax Highlighterのフォント一覧

以上です。せっかくなので好きなデザインに変更しちゃいましょう!

Facebookで“いいね”
スポンサーリンク

★記事が気に入ったらシェアお願いします★

★フォローはこちら★

onlineshop-banner-moba

コメントをどうぞ

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