コピペOK！空白文字一覧

ここまで空白文字の概要や種類などを解説しましたが、本記事を読んでいる人の中には実際の使い方や空白文字の一覧などが分からない人も多いのではないでしょうか。

そこで、ここからはコピペして使用できる空白文字の一覧を紹介します。下記に頻繁に用いる空白文字を例としてあげます。必要な際には下記よりコピーしてご活用ください。

空白文字1個～5個

● 1個：「ㅤ」
● 2個：「ㅤㅤ」
● 3個：「ㅤㅤㅤ」
● 4個：「ㅤㅤㅤㅤ」
● 5個：「ㅤㅤㅤㅤㅤ」

また、半角スペースの空白文字は下記のような記号になります。

● 【 】
● 【  】
● 【   】

上述の文字をコピペするのみで空白文字を手軽に使用できます。各自、必要に応じてぜひ使用してみてください。

その他の空白文字のやり方

ここまで、コピペして使える空白文字を紹介しました。以下では、その他の空白文字の使い方について下記に列挙したものを解説します。

● 文字実体参照を使って空白を指定する
● CSSのinline-block要素を活用する
● CSSを使って透明にする
● 全角スペース

それぞれ順番に見ていきましょう。

文字実体参照を使って指定する

1つ目の空白文字のやり方は、文字実体参照を使用して指定する方法です。文字実体参照とは、HTML上で入力できない文字を表示する方法のことです。表現する方法は4つあり、下記のような空白表現になります。

●  
●  
●  
●  

これらを使用することで空白文字を打つことができるため、SEO対策を行ううえでは必須になります。

CSSのinline-block要素を活用する

次に、CSSのinline-block要素を活用する方法が存在します。これはSEOへの悪影響を抑える方法です。使い方としては、のタグ文字を挿入することによって空白を表現します。

また、コピーしてそのまま使えるコードを下記に用意したので、ぜひ活用してください。

HTML
たちつてと

CSS
.blank_space{
display:inline-block;
width:10px;
}

上記のCSSに関しては「width:10px;」の部分を変更することで空白文字の幅を変えることができます。単語が分断されないような表示方法になり、SEOに悪影響が出るのを抑えることが可能です。

CSSを使って透明にする

ここでは、CSSを使用して透明にする方法を解説します。また、両方を設定することで文字列を透明にする方法も詳しく紹介するので、ぜひ参考にしてください。

  • 透明にするCSS

CSSを使用して文字を透明にするやり方は「たちつてと」と入力した後に、ダミー文字列の色を透明にするという方法です。また、実際は下記のようなコードを用います。しかし、SEOに対して悪影響が出てしまう恐れがあるため、あまり推奨できない方法です。

.kuhaku{
color:transparent;
}

  • 透明にするHTML

下記のようなコードを用いて行います。

たちつダミー文字列てと

また、の間に入る文字幅を調節できるため、非常に利便性が高いです。上記のHTMLでは、ダミー文字列が透明になる効果があるため「たちつ」と「てと」の間には空白が見えるのです。

全角スペース

結論からいうと、全角スペースを使用した空白方法はおすすめできません。なぜなら、全角スペースは、他の空白方法と比較して簡易的であるものの、SEOへの悪影響が非常に大きいからです。

ホームページ制作やブログ作成などを行う際、全角スペースは使用しないほうが良いでしょう。敢えて全角スペースで空白を表現する場合は「あかさたな　　　　はまや」のようにスペースを空けて表現します。

しかし、文字列を途中で分断してしまうと、Googleに誤った認識をされてしまう恐れがあります。このため、この方法を使用する際には注意が必要です。 なお、スペースの活用は、エクセルやワードなどで使用することが多いため、SEO対策を考えた場合おすすめできません。。