ソースコードを記事に表示させる方法【ブログ別方法】

   

ブログをカスタマイズしていくとHTMLやCSSのようなソースコード紹介する記事を目にした事があるでしょう。では実際コードを記事中で張り付けてきれいに表示させる方法はどうすればよいか。今回WordPressのプラグインを使った方法と、FC2ブログなどの無料ブログでの方法を解説していきます。

Sponsored Link

Crayon Syntax Highlighterを何故使用するのか?

 Crayon Syntax HighlighterはPHPやCSSのコードを記事に表示するために使用します。ブログの種類によっては縁がないかもしれませんが、How to系ブログでは「このようなコードを貼付けます」というような場合に使用する機会が多々あります。

こんな感じです↓

「そのまま貼付ければいいんじゃないの?」そう思った方は一度試して下さい。コードを表示したくてもプレビューにした時に見れなくなってしまいます。

 

Crayon Syntax Highlighterをインストールする

crayon-syntax-highlighter

こちらのリンクから▶️Crayon Syntax Highlighter または

  1. プラグイン→新規追加
  2. Crayon Syntax Highlighterと検索
  3. 今すぐインストール
  4. 有効化する

設定する

crayon-syntax-highlighter2

設定→Crayonで一般設定詳細を設定していきます。

設定はそのままでも問題なく使用できるので、状況に応じてプレビューで確認しながら調整していくと良いでしょう。

Crayon Syntax Highlighterの使い方

ビジュアルエディタの場合

crayon-syntax-highlighter3

上の写真の <> この部分をクリックします。

テキストエディタの場合

crayon-syntax-highlighter4

上の写真の <> この部分をクリックします。

コードを貼付ける

crayon-syntax-highlighter5

先ほどのボタンをクリックするの上のようなウィンドウが出てきますので、表示させたいコードを張り付けて右上の Add (日本語では挿入)をクリックします。すると、下のようにコードがブロックで表示されるようになります。

これで完成です。

FC2など無料ブログでの場合

htmlcode

▶︎WEBサイト・ブログの為のHTMLソースコード変換
↑こちらのサイトはHTMLで< & ” >を < & ” > にエスケープ・エンコード、WEB用に一発で置換変換してくれるのでそのままコピー&ペーストでき非常に便利です。
オプション等も選べ以前は筆者も利用させて頂いていました。

まとめ

 ソースコードの張り付けもきれいに表示させるなど様々なプラグイン、方法がありますが自分にあったものを選びより見やすい記事にしていけるようにすることで、コンテンツの質を上げていけるようにしましょう。

 

 

 - WordPress, ブログ関連