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

ブログによく、htmlソースコードを

 

見やすいように表示している人を見かけます。

 

 

特に情報発信者ですと、

 

ノウハウを紹介がてら、

 

htmlのソースコードをブログ記事に掲載する場面があります。

 

 

では、ブログ記事にhtmlソースコードを

 

わかりやすく表示するにはどんな方法があるんでしょうか?

 

 

ブログ記事にhtmlソースコードをかんたんに表示する方法

 

テキストモードでhtmlコードを書くと?

htmlソースコードは手書きでも書けなくはないです。

 

ワードプレスであれば、テキストモードにし、

 

htmlコードを書いていけばいいんですが、

 

これをいざ記事公開すると、

 

htmlコードを書いて読者に伝えたいだけなのに、

 

ワードプレス自体がそのhtmlコードを読み込んでしまい、

 

意図せずスペースが自動で反映されてしまったり、

 

何よりブログ読者は「見にくい」です。

 

ブログが見にくいのは読者に不親切ですし、

 

サイトの離脱率も高くなってしまいますね?

 

 

そうであればプラグインを使ってよりブログ読者に見やすい

 

htmlコードを表示させていきましょう^^

 

htmlソースコードをブログ記事にかんたんに表示する方法

 

htmlソースコードはプラグインの

 

Crayon Syntax Highlighterでかんたんにブログ記事に表示できます。

 

導入例ですが、以下のような感じ。

 

 

この表示方法であれば、

 

ブログ読者は見やすいですし、htmlコードをそのままコピーもできるます。

 

 

導入方法も使い方もかんたんなので

 

一緒にやっていきましょう!

 

Crayon Syntax Highlighterの導入方法

 

ワードプレスのプラグインでインストールしていきます。

 

①ダッシュボードのプラグイン⇒新規追加をクリック。

 

②プラグインの検索窓に「Crayon Syntax Highlighter」と入力⇒Enterキーを押す。

 

③インストールをクリック

 

これで、Crayon Syntax Highlighterのインストールは完了です。

 

Crayon Syntax Highlighterの使い方

 

では早速Crayon Syntax Highlighterを使ってhtmlコードを

 

見やすい表示にしていきましょう。

 

 

①ブログ記事の「ビジュアルモード」にし、

 

「<>」マークをクリック。

 

 

②表示させたいhtmlコードを入れる

 

 

入れ方なんですが、

 

 

①LanguageはDefaultがいいです。

 

②実際にブログ記事に表示させたいhtmlコードを入れます。

 

③最後にAddをクリック

 

 

ここまで操作すれば、

 

 

このような見やすくてコピーもできる

 

htmlコードが一瞬で表示できるようになります。

 

かんたんなのでぜひ参考にしてみてください。

 

 

あーこでした^^




・ノウハウコレクターになってしまっている
・アフィリエイトって稼げるの?

などなど、アフィリエイトのご相談はお気軽にあーこまでお問い合わせください♪

お問い合わせには100%回答していますし、
みなさんに喜んでいただいています^^
↓ ↓ ↓
>>あーこに問い合わせしてみる

コメントを残す

サブコンテンツ

稼げる戦略を無料で公開中!

アフィリエイトで大きく

稼ぐための必ず必要な戦略を

メルマガ限定で無料公開中!!
↓  ↓  ↓
メルマガについて

このページの先頭へ