コピペで使える「空白文字」一覧！SNSやブログでの使い方や使用時の注意点

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

コピペ以外に空白文字を使う方法として、以下をご紹介します。

・文字実体参照を使用
・CSSのinline-block要素で空白を表現
・全角スペースを使用

「」など文字実体参照で空白指定

文字実体参照は、キーボードでは入力できない文字など、特殊な文字をHTMLで表現する方法。空白文字もHTMLで定義されているため、文字実体参照で指定することで、空白を直接入力できます。

以下の文字列をHTMLファイルやWordPressのテキストエディタに入力すると、空白を指定できます。

	細いスペース
	改行禁止スペース
	nの文字幅のスペース
	mの文字幅のスペース

これらの空白文字を「」のように繰り返し入力すると、その分の空白が挿入されます。たとえば細いスペースと改行禁止のスペースを組み合わせるなど、複数の空白文字を組み合わせることで、自分のイメージに合った幅の空白文字を入力することも可能。

CSSで空白を表現する

CSSのinline-block要素で空白を表示できます。

実際に使うCSSとHTMLの例は以下の通り。

		備考
CSS	.blank_space{ display:inline-block; width:10px; }	「width:10px」は空白文字の幅を表わしています。数字を変更することで幅を変えることが可能。
HTML	いろはにほへと

空白として全角スペースを使う

空白文字を表現するためには、「いろはに　ほへと」のように全角スペースを打ち込む方法があります。ただし、これは文章や段落を区切る場合以外ではあまりおすすめできません。なぜなら、「いろはに　ほへと」は「いろはにほへと」という一つの単語ではなく、「いろは」と「ほへ」という二つの単語だと解釈されてしまうからです。これではGoogle検索やSNS内の検索で見つけられなくなってしまいます。

空白文字をSNSやブログで利用する際の注意点 | SEO対策には不向き

Instagramのハイライトの名前に空白文字を使うと、見た目がおしゃれになりますね。しかし、ウェブサイトやブログで空白文字を使うと、SEOに悪影響があります。

その理由は空白文字は文中に不要なスペースを作ることで、検索エンジンが単語をきちんと認識できない可能性があるから。だからこそ、ウェブサイトやブログで空白を表現したい場合は、CSSで調整することがおすすめです。

まとめ

SNSのサブアカウントの名前を考えるときに便利な空白文字。しかし、サイトやブログに使うと、SEOに悪影響があるので注意が必要。CSSでの表現方法も覚えておきましょう。

文・オトナライフ／提供元・オトナライフ