オンラインティーチャー・ゾノのブログ

» 【特別配信講義】只今、完全在宅で先生開業!オンラインティーチャーを目指すための講座『先生2.0 〜毎日感謝される働き方を作ろう〜』を無料配信中! ← 無料視聴はこちらをクリック!

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

MEMO & TEMPLATE TOOL

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

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

こんにちは、ゾノです。

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

本記事の内容

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

HTMLエスケープツール【特殊文字 → 1分で変換】
HTMLには特殊文字で表示される文字がいくつもあります。
よく使うものですと、「& → &amp;」「< → &lt;」「> → &gt;」ですね。

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

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

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

手順は、6ステップです\(^o^)/

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

これだけです。

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

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

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

これは、画像ファイルです
※当然、コピペして使えない、、、

直接貼ると、こんな感じ

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

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

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

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

ちなみに、変換後はこんな感じです。
HTMLエスケープツールを使用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後までお読みいただき、ありがとうございます。下記の特別無料講座「先生2.0」も、是非チェックしてくださると喜びます🙇‍
講座を受講すると、当ブログで無料配布している「ブログの書き方テンプレート」もプレゼントさせていただきますので、この機会にどうぞ💁‍♂️

【無料開催】人気オンラインティーチャー養成講座

オンラインビジネスの悩みを解決して、効果的に前進するワークショップです。 「オンライン開催」なので、ご自宅からお気軽にご参加いただけます😌

» 今すぐ無料参加(今夜21時〜放送)

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

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

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

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

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

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

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

僕は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師(Teachable特化型)・メディア運営の基礎・ヒット商品企画。『2〜3歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約300名。「オンラインで先生開業を目指すための講座」を無料配信中!朝大好きです→ #01blog朝活の会
» プロフィール詳細はこちら

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


特別配信【先生2.0】毎日感謝される働き方を作ろう【無料で受講できる特別講座】

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