2019/09/02 (更新日: 2020/03/11)

【特殊文字 → １分で変換】僕がよく使う、HTMLエスケープツール

世界No.1の“本物のオールインワンツール”をゾノ先生と同じように使えるビデオコース「はじめてのコンテンツ作成コース（49,700円相当）」が大人気です。30日間無料の特別招待ページをご用意しているので、下のバナーをタップして詳細をご覧ください！
こちらから確認することができます↓

HTMLの特殊文字をブラウザで見ても、ソースコードのままの表示したいと思っている人「ブログにソースコードを掲載したいときに、ブラウザが自動で認識して、変換されて困る…。ソースコードのまま表示したいときは、どうしたらいいのかなぁ。」

今回の記事では、上記のような悩みの解決をお手伝いします。

こんにちは、ゾノです。

この記事を書いている僕は、現役でWebデザイナー＆マーケターとして活動しつつ、ブログを運営しながら生活しています。今では、外出せずに学べるパソコン教室を運営し、ブログ初心者に特化したブログ指導活動にも取り組んでいます。

本記事の内容

HTMLエスケープツール【特殊文字 → １分で変換】
HTMLエスケープツールを使って、自分用のメモをブログに残す

HTMLエスケープツール【特殊文字 → １分で変換】

HTMLには特殊文字で表示される文字がいくつもあります。
よく使うものですと、「& → &」「< → <」「> → >」ですね。

このような特殊文字は、ブラウザが自動認識してしまいます。
なので、そのままソースコードが表示されるようにするには、下記の方法を使うといいです。

「Web制作小物ツール」by dounokounoさんのツールを使う

HTMLエスケープツールは、「Web制作小物ツール」by dounokounoさんのツールを使うといいです。
僕もよく使わせてもらっていますm(_ _)m
» 「Web制作小物ツール」by dounokouno

手順は、６ステップです＼(^o^)／

右サイドバーのMENU
HTMLエスケープツール
変換前のソースコードを入力
オプションの２つ「code」「pre」にチェック
変換をクリック
変換後をコピーして貼り付け

これだけです。

実際の流れは、こんな感じです

たとえば、このソースコードを貼り付けたい場合。

これは、画像ファイルです

※当然、コピペして使えない、、、

直接貼ると、こんな感じ

01blog「ゼロイチブログ」
※普通に、リンク表示になりHTMLのソースコードは表示されない、、、

HTMLエスケープツールを使用

<a href="https://01blog.org/">01blog「ゼロイチブログ」</a>

※HTMLソースコードで表示されました。これをコピペして使えばOK＼(^o^)／

ちなみに、変換後はこんな感じです。

HTMLエスケープツールを使って、自分用のメモをブログに残す

HTMLエスケープツールを使用して、自分のブログにメモを残す習慣をつけることがおすすめです。

いろんなソースコードを、メモとして残すメリット

自分のブログにメモ用として、ソースコードなどを残すと下記のようなメリットがあります。

忘れたときに、自分のブログを見ればわかる【自分のため】
メモとして残すと、検索されたときに表示されるかも【人のため】

ざっくりと、こんな感じのメリットですね。
ローカル上で管理するだけでは、ただのメモですが、Web上にアップしておけば人のためにもなります。

しかも、検索してブログを見に来てくれたときに参考になれば、またブログを見に来てくれる可能性も高まります。

僕のメモ用ブログ記事は、下記のとおりです

僕が自分でもよく使い、わりとアクセス数もある記事は下記のとおりです。

「メモ」というカテゴリーを用意して、メモしたい内容があれば記事にしています。

「メモ一覧」ページは、下記のリンクからチェックすることができます。
» 「MEMO」カテゴリーの一覧ページ

まとめ：自分のメモは、きっと誰かの役に立つと思う

本記事では、HTMLエスケープツールの使い方をまとめましたが、自分のメモが誰かの役に立つことがきっとあると思います。

なので、メモとしてブログに公開しておくといいと思います＼(^o^)／

最後までお読みいただき、ありがとうございます。「オールインワンWeb集客サイト完全レポート」というレポートが大人気です。ぜひご覧になってくださると嬉しいです。
こちらから受け取ることができます↓

お知らせ：厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク（テレビ会議システム）の導入をご検討の方は、ぜひどうぞ🙇‍

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】３０分の無料相談会＆体験レッスン（オンライン開催）に初回限定で参加できることです。

どうしても分からなかったり、１人で悩むことがあればご相談ください。

その他、ご相談＆ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01BLOG COLLEGE」に参加はお済みですか？メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

私は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師（Kajabi特化型）・メディア運営の基礎・ヒット商品企画。『２〜３歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約510名。「オンラインで先生開業を目指すための講座」を無料配信中！

チップをいただけると、心から喜びます

無料配信【先生2.0】完全在宅＆好きなことで稼ぎ毎日感謝される働き方【無料】

人気記事【Zoom】会議などの案内メールのテンプレート【セミナー時にも使える】

ツール情報｜参考メモ