Norifumi Nakazono's Blog.

【特殊文字 → 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^)/

相談やお問い合わせ、ご依頼など

お気軽にメッセージください。
» お問い合わせ

Webマーケティング基礎知識の学習用に、「【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ」をまとめました。

【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ

ブログを使ったWeb集客の基本を学習したい方向け。本記事は初心者がブログを開設するために必要な基礎をまとめました。情報が変われば常にアップデートしていきます。これからWebマーケティングをを学びたい人や現在学習中の人は是非ご覧ください。

» 詳細を読む

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

どうしても分からなかったり、1人で悩むことがあればご相談ください。
また質問やメッセージ、相談があればお気軽にお問い合わせください(*´∀`*)
» お問い合わせ

人気記事【Minimalカスタマイズ】マナブログをモデリングして、ブログを作る【manablog】

人気記事【目指せマナブログ】WordPressテーマコピー/相談チャット【無料】