さとり喫茶店~無個性なぼっちからの脱却物語~

ブログでhtml ソースコードを簡単に表示する方法とは?

ブログでちょっとしたカスタムコードを載せたい時、CSSやHTMLをいじるときに載せたいんですが

そのままブラウザで表示しちゃうと、コードはちゃんと表示されません。

こちらをコピペして自分のブログへ!って言ってもそのコードがちゃんと表示されてなかったら意味がない。

そこで記事にソースコードを簡単に表示するための方法をご紹介!

結論から言うと調べてたら、ソースコードを作ってくれるサイトと、プラグインを使う方法があったのでどっちも紹介します!

 

ブログでhtml ソースコードを簡単に表示する方法「サイト編」

ブログでhtml ソースコードを簡単に表示する方法というとプラグインが思い浮かんだんですが、意外とソッコーできる方法を見つけました!

ソースを「そのまま表示する為のHTMLソース」に変換するサイトを発見!調べるといくつかあるんですが一番簡単で早いな~と思ったのはこれ!

→ソースをHTMLに変換するツール – マージナルソフト

 

使い方を画像で解説

html

html2

 

実際にやるとこうなります↓

 

  1. aaaa

 

簡単でしょ?

サイトが無くなることもあるので確実なのは次のプラグイン!

ワードプレスブログでhtml ソースコードを簡単に表示する方法「プラグイン編」

SyntaxHighlighter Evolved

  • ワードプレス管理画面より「プラグイン」→「新規追加」

post1

  • 検索窓にSyntaxHighlighter Evolvedを入力
  • SyntaxHighlighter Evolvedをインストール

html%e3%82%b3%e3%83%bc%e3%83%89

 

  • 「プラグインを有効化」をクリック!

 

2html%e3%82%b3%e3%83%bc%e3%83%89

 

  • ワードプレスの「設定画面」→「SyntaxHighlighter Evolved」をクリック

html3

詳細設定ですが、ここは特に変更しなくてもOK!

画像のようになってればOKです!

 

html4 html5

 

 

実際にやるとこんな感じ↓

 

やり方としてはソースコードとして表示させたいコードを[html]と[/html]の間に入れます。([]の部分は半角に直してください、半角にしちゃうと上記のようなソースコード表示になるので今回は全角[]で表示しました)

[html]
.post_content a { color:#438bc5; }
[/html]

 

となっているというわけです。

 

まとめ

というわけで、ブログでソースコードをきれいに表示させる方法をまとめました!

ワードプレスでブログを書いてるならSyntaxHighlighter Evolvedのプラグインをインストールして使うことですかね。

表示もきれいで設定も楽なので一度やっちゃえば問題なし!

html ソースコード表示させたい時は使ってみてください!

それでは。

楽天で月67,000円稼ぐまでの道のりをまとめた貴重なレポートをプレゼント中!

楽天で月67,000円稼ぐまでの道のりをまとめた貴重なレポートをプレゼント中!
「自分の力でブログで稼ぎたい」「でも、専門的な知識なんてない・・・」

「かと言って、稼ぐために興味ない事をひたすら作業するなんて苦痛・・・」

「まず1万円稼ぎたいんです!」

って人は僕の楽天に関するレポートを見てください。
僕が楽天で月67,000円稼ぐまでの道のりをまとめた貴重なレポートです。

今なら無料で配布中!!
ブログアフィリエイト初心者は楽天から始めるのがおすすめ。
このレポート一つで今すぐ楽天アフィリエイトで稼げます!
URL :
TRACKBACK URL :

*
*
* (公開されません)

Return Top