顔文字が改行で崩れる！崩れないようにCSSで文字列をグループ化だ！

昔からメールなどでお馴染みの顔文字。テキスト（文字）だけで感情が表現できる、今でも非常にポピュラーな表現手段の１つ。

喜怒哀楽が手軽に表現できる、日本オリジナル感が漂うものが沢山あり、文字入力から手軽に入力できて、相手にも必ず同じように表示されるのがなんといっても一番の魅力。

ブログを書いたり、ホームページを作ったりする人も今でも愛用してますが、簡単に使える反面、画像と異なり、改行での文字崩れなどの問題もあったりします。

ここでは文字列を１つのグループにして、改行でも崩れないようにするちょっとしたひと工夫を見てみましょう。

Contents

1 よく使う顔文字たち
2 問題点の文字崩れ
3 回避策は単純。CSS
4 結果はどうなる？
- 4.1 横幅が十分ある場合
- 4.2 横幅が短く、折り返してしまう場合
5 長いのが嫌いな人
6 URLやサイト名称への応用
7 まとめ
8 今後を考える

よく使う顔文字たち

顔文字といえば様々なものがありますが、私が使うのはその中でもオーソドックスな以下のもの。

喜び　(^-^)
驚き (゜o゜)
哀しい ;.;）
楽しいヽ(^。^)ノ

まぁ、基本形。その他にも結構使うぞ、というものは、

焦り　^-^;)
それは私　σ^-^;)
いやー　^◇^)ゞ

とかですね。

さて、そんな手軽な顔文字ですが、文字が崩れるという問題とは．．．

問題点の文字崩れ

例えば、以下のように使ったとしましょう。

コンサートがあるんだ。( ^ 0 ^ )/

普通にパソコンのブラウザとかで見ている分には問題ありませんが、表示の幅（ブラウザのウインドウサイズなど）が変えられたり、スマフォなどの横幅の小さな画面で見ると、表示できる文字数によっては崩れてしまう場合があるんですね。

例えば、．．．

今度、コンサートがあるんだ。( ^
0 ^ )/

とか

今度、コンサートがあるんだ。( ^ 0
^ )/

といったかんじです。

インターネットで色々とブログを見ている人は、あーそういえばこういうの見たことあるある、っていう人多いかもしれません。

実際に書いてる人は、こうなるとは思ってないんですが、見る人の環境によってはこうなってしまうんですね。

回避策は単純。CSS

これの問題を割けるには、CSSを使います。

以前はパソコンの画面で見て、崩れないかどうか確認しながら書いていたこともありますが、よくよく考えてみれば話は単純。CSSを使って顔文字を「ひと塊の文字」として使えばいいんですね。

CSSとは、表示されるスタイル（文字色や背景色を指定したり、太文字にしたり、枠をつけたりなど）を指定するもの。これを使って以下のように記述します。

1. 顔文字をタグ ...で囲む　
( ^ 0 ^ )/
2. タグにつけるスタイルを決める（これがCSS）
style="display:inline-block;"
3. タグにスタイルを挿入
( ^ 0 ^ )/

分かりづらいかもしれませんが、要するに３のように記述します。

こうすることで、顔文字「( ^ 0 ^ )/」が１つの塊として扱われ、決して途中で改行されることがなくなります。

結果はどうなる？

さて、こうすることで、表示がどうなるかというと．．．

横幅が十分ある場合

横幅が十分ある場合は、何も変わりません。

今度、コンサートがあるんだ。( ^ 0 ^ )/

横幅が短く、折り返してしまう場合

今度、コンサートがあるんだ。
( ^ 0 ^ )/

と、顔文字は崩れずに改行されました。これならどんな幅で表示されても顔文字は途中から崩れる心配はありません。^◇^)ゞ

長いのが嫌いな人

記述が長くなるのが嫌！記述が面倒！、という人で、class の使い方を知っている人はこちらを使いましょう。

1.クラスの名前を決める
ここでは分かりやすく、例えば kaomoji とします。
2.クラスを外部ファイルなどに定義する
span.kaomoji {
display: inline-block;
}
3.タグにクラスを記述する
( ^ 0 ^ )/

URLやサイト名称への応用

サイト名やサイトのURLなどで、「折り返されたくない」という場合もありますが、同様に使えます。

例えば、

このサイトのURLは tabibitojin.com です。

前後の文章や、表示する画面の幅によっては、

このサイトのURLは tabibit
ojin.com です。

などと表示されますが、これはちょっと避けたいなという場合、折り返されたくない文字列に対して顔文字と同じように

tabibitojin.com

と指定すれば良いわけです。
こうすることで、先ほどの結果はどうなるかというと、

このサイトのURLは
tabibitojin.com です。

「tabibitojin.com」は１つの塊と扱われるため、まるごと下に移動しました。やったね。^-^)v

まとめ

顔文字が折り返しなどで崩れる場合にはCSSを使えば良い
顔文字をタグ …で囲む
タグにスタイルを挿入 style=”display:inline-block;”
classを使っても良い
URLやサイト名など、折り返しさせないで一塊の文字列として扱いたいものも、同じようにCSSを使えば良い

これでどんな画面サイズで閲覧されてもバッチリですね。

今後を考える

この記事を読んでいるあなたは、きっとホームページを作っていたり、ブログで実際に記事を書いてたりしてますね？

今後はそれらに加えて、ホームページやブログから収益をあげて活動の輪を更に広げてみることにもチャレンジしてみましょう！きっと凄く嬉しい結果につながると思いますよ。

私の場合も、自慢じゃないですが初めは中々結果がでませんでしたが、ある順番にそって１つずつステップをクリアすることで順調に成果を残せるようになりました。

これからは、良いコンテンツを作る！収益もそれに見合ってあげていく！更によいコンテンツを作る！ということでネットビジネス界を駆け抜けて行きましょう！

私はネットビジネスで初心者からでも収益があげられるよう、無料メールマガジンで情報配信しています。詳しくは以下をご覧ください。

早期退職して海外で奮闘する JIN のメールマガジン

無料メールマガジンの詳しい内容を見る！