空白文字とは?コピペで簡単な空白文字のやり方やSEOに与える影響を解説
ホームページなどで空白文字(ㅤ)を使いたいのに、「上手く空白にならない…」と悩んでいる人は多いです。
単純にスペースキー( )で空白文字が入力できれば良いのですが、それでは思っていた表現と違う場合や、ホームページの仕様で空白にならないこともあります。
そこで今回は、コピペで使える空白文字や、さまざまな空白文字の表現方法について解説していきます。この記事が空白文字のやり方で悩んでいる方の参考になれば幸いです。
- SEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」
-
URLを入れるだけでサイト内部の問題を一括検出。
Googleと同じ視点でサイトクロール、
大規模サイトでも手軽に高度なSEO分析ができます!まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!
コピペ用空白文字一覧
まず初めに、コピペで使えてどんな環境でも空白文字として表示される「コピペ用空白文字一覧」を提示しておきます。
説明不要で今すぐ空白文字のやり方が知りたい場合は、下記の空白文字をコピーして使ってください。
空白文字1個~5個
- 1個:「ㅤ」
- 2個:「ㅤㅤ」
- 3個:「ㅤㅤㅤ」
- 4個:「ㅤㅤㅤㅤ」
- 5個:「ㅤㅤㅤㅤㅤ」
ここで打ち込んでいる空白文字は、「ハングルフィラー(HANGUL FILLER)」と呼ばれる文字です。
元々はハングル文字を表現するために使用される特殊な文字で、ハングルを使用せず単独で入力すると空白として表示されます。
そのため、日本やアメリカなどのハングル圏外の国では空白文字として活用される事が多いです。
ちなみに、Unicodeでの文字番号は「U+3164」です。日本語用キーボードでは打ち込むことができないため、常用するなら「くうはく」などで辞書登録することをおすすめします。
WordPressで設定する方はWordPress基礎知識大全で、日本語の文字化け対策や詳細な設定方法を解説しています。
空白文字のその他のやり方
次に前項でお伝えした方法以外に空白文字を挿入するやり方を、4つ解説していきます。
基本的には、ハングルフィラーを使えば空白文字を挿入できるのですが、SEOの視点で見た場合「無意味な文字列」が突然文中に現れることになるため、悪影響を及ぼします。
SEOをしっかりと考えたサイトを運営されているようでしたら、ここで紹介する「文字実体参照で直接空白を指定する」「CSSのinline-block要素で空白を表現する」のどちらかを活用するのがおすすめです。
特にCSSのinline-block要素をで空白を表現する方法は、幅の調整や高さの調整など自由が効きますので、デザインを重視される方は活用してください。
文字実体参照で直接空白を指定する
文字実体参照は、キーボードで直接入力できない文字をHTML上で表現する手法です。
実は“空白”という文字は、HTMLでも定義されています。そのため、文字実体参照で空白文字を直接指定すれば、SEOへの影響を最小限に抑えて空白文字を打つことができます。
文字実体参照では、下記の4つが空白を表現する文字にあたります。
-  
-
-  
-  
これらの文字列をHTMLファイルやWordPressのテキストエディタに入力すると、それぞれ下記の幅のスペースが表示されます。
- 細いスペース
- 改行禁止スペース
- nの文字幅のスペース
- mの文字幅のスペース
上から順に、空白の幅が狭い順に並べているので、それぞれコピペして確認してみて自分のイメージに近いものを活用してください。
また、これらの空白文字を「 」のように横並びに打ち込むと、打ち込んだ個数分の空白が挿入されます。
そのため、同じ空白文字を繰り返したり細いスペースと改行禁止のスペースを組み合わせたりすることで、自分のイメージに合った幅の空白文字を表現することも可能です。
CSSのinline-block要素で空白を表現する
CSSのinline-block要素で空白を表現する方法は、自由度が高く、SEOへの影響を最小限に抑えた手法です。
やり方は簡単で、空白文字を挿入したい文字と文字の間にinline-block要素で幅を指定した空白の<span>タグを挿入するだけです。
下記に、実際に使うCSSとHTMLの例を提示するので、CSS初心者の方はコピペして活用してください。
CSS
display:inline-block;
width:10px;
}
HTML
CSSのwidth:10px;の部分の数字をwidth:20px;のように変えることで、空白文字を自由な幅に変えることができます。
また、文字を入力している訳ではないので「SE O対策」のように、単語が「SE」と「O対策」に分断されることもなくSEOへの悪影響を最小限に抑えることができます。
全角スペースを使う
全角スペースで空白文字を表現する方法は、簡単で最も一般的と言えますが、SEOへの悪影響があるためおすすめできません。
全角スペースで空白文字を表現するためには、「あいう えお」のように、空白文字を入れたい文字と文字の間に好きな数だけ全角スペースを打ち込めば良いだけです。
この時、半角スペースを入力してしまうと何個入力しても1個の半角空白としか判定されないため注意が必要です。
この方法は、見てわかる通り「SE O対策」のように単語がスペースで分断されてしまいます。一般的にスペース( )は文字の余白を調整するための文字なので、「SE O対策」のように単語を分断してしまうと、Googleにきちんと単語が認識されない可能性が高いです。
その結果、Googleが文脈を読めなくなりSEOに悪影響を及ぼしてしまいます。
CSSで文字を透明にする
CSSで文字を透明にする方法も簡単ではありますが、SEOへの悪影響があるためおすすめできない空白文字のやり方です。
その方法は簡単で、「あいう<span class="kuhaku">ダミー文字列</span>えお」のように入力し「ダミー文字列」の色をCSSで透明にするだけです。
実際のコードは次のようになります。
CSS
color:transparent;
}
HTML
transparentは透明を表す文字色なので、上記指定をすることで「ダミー文字列」が透明になり、見た目上では「あいう」と「えお」の間に空白が入っているように見えます。
また、透明の文字列で空白を表現しているので<span class="kuhaku"></span>の間に入れる文字の幅で自由に空白の幅を調整でき、便利な方法ではあります。
ただし、見た目上空白に見えるだけで、Googleには「あいうダミー文字列えお」と認識されるため、SEOに悪影響を及ぼしてしまいます。
空白文字はSEOに悪影響があるので注意
ホームページを運営していくうえで、空白文字は文字の配置や間隔などを微調整できて便利な方法です。
ですが、SEOの側面から考えると、文中に突然不要な空白が現れるため不自然で良くない表現方法であると言えます。
また、「HTMLは文字を打ち込むためのもの」「CSSはデザインを整えるもの」と定義されています。
そのため、空白文字をHTML上で使って無理やり見た目を整えるのは、SEO的には悪影響が多い方法です。
そこで、ホームページ運営でデザインを調整したいのであれば、空白文字でなくCSSを使ってデザインを整えることを強くおすすめします。
WordPressでサイト運営されている方は、WordPress基礎知識大全にWordPressでSEO対策する方法が記載されています。無料でダウンロードできるので、興味のある方は参考にしてみてください。
まとめ
今回は、空白文字のやり方について紹介してきました。
最も簡単な空白文字のやり方は、ハングルフィラー(ㅤ)を使う方法です。ですが、この方法はSEOの側面から見ると、あまりおすすめできません。
SEOをあまり意識していないようでしたらハングルフィラーをコピペして空白文字を表現するのが簡単で早い方法ですが、少しでもSEOを意識してホームページを運営されているようでしたら、CSSを使ってデザインの調整を行いましょう。
- 【無料のおすすめ資料】WordPress基礎知識大全:SEO対策まで完全網羅
-
世界No.1 CMSのWordPressを徹底解説!
初心者でも簡単に始められる基本設定から、サイトの成功を左右するSEO対策まで網羅。新規ブロガーもベテランも必見の完全ガイドです。
今すぐ無料でダウンロードし、あなたのサイトを次のレベルへ!
- SEO対策でビジネスを加速させる
-
SEO対策でこんな思い込みしていませんか?
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します