PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁
★ワードプレスバージョン6.8-jaから「投稿を編集」の画面で「ビジュアル」隣の「テキスト」
が「コード」に変更されてしまいました。以前の解説では「テキスト」と表現しておりますのでご留意いただければ助かります。

HTMLで特殊文字の「 」をそのままブログに表示させる方法

スポンサーリンク
 をWeb上で表示する方法のロゴ画像
こんにちは、解説ゾロです!
ゾロ
ゾロ

「 」って、

 ブログに表示できるの知ってるかい?

エレナ
エレナ

えっ!表示できるの?

    教えて!教えて!

ゾロ
ゾロ

オケ!
じゃあ今日は「 」を表示させる方法を、

      わかりやすく解説するゾロ・・・笑!

エレナ
エレナ

・・・

今日は初めて「ゾロ」と「エレナ」の会話からスタートしてみました!笑
改めまして、こんにちは!解説ゾロです。
「 」は、地味に便利な働きをしますのでブログで紹介しようとしても「 」をそのまま表示することができずにお困りの方もいらっしゃるかと思いますが、大丈夫です。このように、簡単に表示することができます。
今日は、Webサイト上やブログに、そのままの「 」を表示させる方法の解説をいたします。とても簡単ですので一緒にやりましょ!
前回の記事では「<>」のソースコードをブログに表示させる内容です!
HTMLソースコードをそのままブログサイトに表示させる方法
ブログにソースコードをそのまま表示させる方法の解説です。コードによく出てくる小なり記号「<」や大なり記号「>」には特殊文字を使えばそのままの「<」や「>」をサイトに表示することができます。簡単ですので、一緒にやりましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

HTMLの「&nbsp;」って何?

「&nbsp;」の「nbsp」は「non-breaking space」の略で、読む機会があまりない文字列ですが「ノーブレークスペース」と読みます。
HTMLでの指令内容は「改行されない空白文字(スペース)」という意味で、キーボードのスペースキーで入れた、ただのスペース(空白)とは異なります。
スポンサーリンク

HTMLの「&nbsp;」の使い方

例えば、Web上やブログの行末で、時速「100Km」の「100」と「km」の間で勝手に改行されると、とても読みずらくなります・・・よね!笑
そんな時、ワードプレスの「コード」の画面で「100&nbsp;km」と書くことで「100」と「km」が離れないように改行を禁止することができます。
ブログ上には「100 km」と表示され「100」と「km」の間には、半角スペース(ただの半角スペースではなく、改行禁止の半角スペース)が入ります。見た目はほぼ同じですが!笑
「&nbsp;」はこのような使い方をしますが、今日は、半角スペースを表示したいのではなく、その「&nbsp;」という文字列をそのまま表示する方法です。
スポンサーリンク

HTMLの「&nbsp;」をそのままブログに表示させる方法

ソースコードには、HTMLで特別な指令をする文字や記号がありますが、その指令の機能を無効化して、ソースコードの文字列や記号をそのまま出力して表示できる「HTMLエンティティ(今回は文字参照)」という特殊な文字があります。

エンティティは、特別な文字や記号に、それぞれのエンティティが決まっており「&」(アンパサンド)で始まり「;」(セミコロン)で終わる文字列になっています。

今日のお題の「空白」(スペース)のエンティティも「」で始まり「」で終わる「&nbsp;」です。

改行禁止のスペースをWeb上やブログで表示させるには、コードの画面に「&nbsp;」を書けば、改行禁止の意味のある半角スペースがWeb上やブログに表示(空白ですが!笑)できます・・・が、

今日は、エンティティ自体の文字列「&nbsp;」をブログに表示したいので、今度は「&nbsp;」の頭の「」をWeb上やブログで表示させることのできるエンティティに変換しなければ表示できません。

よく使われる、4つの「HTMLエンティティ」

下記によく使われるエンティティを4つだけ書いて解説いたします。(実際には数千種類の文字参照があるようです)

「&」を表示させるには、3番目のアンパサンド(&)のエンティティである「&amp;」という文字列を「&nbsp;」の頭の「」と入れ替えて「コード」の画面に書きます。

  呼び方 表示される記号 エンティティ(文字参照
1 小なり記号 < &lt;
2 大なり記号 > &gt;
3 アンパサンド & &amp;
4 スペース 空白  &nbsp;

おさらいですが「&」を表示させるエンティティは「&amp;」ですので「&nbsp;」のの部分と入れ替えると「コード」の画面には「&amp;nbsp;」と書くことになります。

さらにおさらいですが(しつこ!笑)「&amp;」は「&」を表示させるためのコードです。ですので、Web上やブログに「&nbsp;」と表示させるには、まず頭の「&」を表示させるために「コード」の画面に「&」を「&amp;」に変換し、残りの「nbsp;」を書けば、Web上やブログには「&nbsp;」と表示されます。
& nbsp;
 
 &amp; nbsp;

他の記号も同じで、例えば「<」(小なり記号)のエンティティである「&lt;」をそのままWeb上やブログに表示したい場合も「&lt;」の頭の「&」を「&amp;」に入れ替えて、「&amp;lt;」と書けば、Web上やブログには、「&lt;」と表示することができます。

少しややこしいですよね!スミマセン!笑

まとめ

Web上やブログに「&nbsp;」を表示させたい場合は、ワードプレス「投稿を編集」の画面右上にある「コード」をクリックした画面で「&amp;nbsp;」と書けば「&nbsp;」が表示されます。

ぜひ、お試しくださいませ!プログラマーになった気分になります・・・!笑

最近は、エンティティを使わずにそのまま書けるHTML仕様も増えているようですが、ブラウザ間で表示が異なる場合などはエンティティを利用する方が安心なようです。

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!

関連記事:HTMLソースコードをそのままブログサイトに表示させる方法
関連記事:ワードプレスで囲み枠のHTMLソースコードから読み方と意味を解く
関連記事:ワードプレスで「角を丸くする囲み枠」のコピペ用サンプルとソースコード集
関連記事:すぐわかる!「padding」と「margin」の違いと使い分けが図解で納得
関連記事:社会人におすすめのオンライン「プログラミングスクール」5選

※当サイトの記事内容は執筆者の体験や個人の見解によるもので、内容の有効性を保証するものではありません。また可能な限り正確な情報を掲載するよう努めておりますが、情報の内容が変化したり情報が古くなることもご了承くださいませ。詳しくはこちら

\♡プレゼント!楽しみに待ってる人がいる♡/

スポンサーリンク

スポンサーリンク
ブログワードプレス
シェアする
解説ゾロをフォローする
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました