顔文字がレイアウトに悪影響を与えることがあります【FC2ブログ旧投稿画面】

htmlエディターとウィジウィグの違い

もう既に答え書いてますが、htmlタグを受け付けるかどうか が大きな違いです。

例えば以下のようなhtml要素を書いたとします。

<span style="color: red;">この文字は赤色です</span>

旧投稿画面には リアルタイムプレビューがついています ので、上記スクリーンショットのような形です。

赤文字が反映されています。
では今度は新投稿画面の場合

新投稿画面に リアルタイムプレビューはありません ので、上記スクリーンショットのような形です。

赤文字になりません。

旧投稿画面は直接htmlを書いた場合、そのままhtmlとして受け取ります。
新投稿画面は直接htmlを書いた場合、単なる文字列として受け取ります。

htmlエディターとウィジウィグの切り替えは両投稿画面共に可能

旧投稿画面は

右の方に W のアイコンがあります。ここがウィジウィグモードへの切り替えです。
WはWYSIWYGの頭文字「W」の意味です。

新投稿画面は

右の方に HTML表示 のアイコンがあります。ここがhtmlモードへの切り替えです。

つまり新旧投稿画面ではデフォルトのモードが逆転している というわけです。

ウィジウィグは日本国内だと 見たまんま編集 とも言われます。
What You See Is What You Get
の略がウィジウィグの語源ですので、「君が得るものは君が見ているもの」イコール「見たまんま編集」

昨今のブログサービスでは圧倒的にウィジウィグがデフォルトという場合が多いです。
ウィジウィグの良いところは htmlタグを気にせずに書けること ですので、画面上になにやら小難しい英語や記号が出てこないのは初心者にとって歓迎すべき点です。
必要と思われるhtmlタグについてはエディター上部のツールバーによって補完されます。
文字色を変えたり、大きくしたり、テキストの位置揃えをしたり、といったものがそうですよね。

ウィジウィグ画面でhtmlタグが出てこないからといって、htmlタグを使っていないわけではない んです。
web上に何かを記すにはhtmlタグが必ず必要。
ウィジウィグはそれを即座に変換し、htmlタグを見せないだけです。
つまり 旧投稿画面のリアルタイムプレビューの状態がウィジウィグ だってことですね。

ここまでで投稿画面別の特徴はご理解頂けたかと思います。
というわけで、
旧投稿画面でhtmlタグ「っぽいもの」を記載してしまうとどうなるか
についてです。

顔文字は英数字や記号の組み合わせ

htmlタグっぽいもの というのは即ち 顔文字 のことです。

html要素というのは大抵こんな感じです ↓

<div style="text-align: center;">あいうえお</div>

緑と赤の記号に注目。
緑の部位はhtmlタグの括りを示す Angle brackets (あんぐるぶらけっつ, 山かっこ)
赤の部位は属性の値を示すDouble quotation (ダブルクオーテーション, 二重引用符)
です。

例えばこの顔文字
<(_ _)>
これは htmlタグの括りではないか と判断されてしまいます。
バリデートにかけると以下のような警告を受けます。
Bad character ( after <. Probable cause: Unescaped <. Try escaping it as &lt;
〝< の後ろの ( はこの位置で使ってはいけない文字です。恐らく原因は エスケープされていない < の記号にあります。< ではなく &lt; とエスケープしてください。〟

なんのこっちゃ？？？ って感じですかね ^^;
平たく言うと、
〝山かっこはそのまま書いちゃうとhtmlタグかと思っちまうぜ。htmlタグの山かっこでないのならちゃんと エスケープ処理 しなはれや。〟 です。
* エスケープ処理 = エンティティ文字表記
のことです。
エンティティについては下記のページを参照のこと。

上記リンク先の記事(私が書いたものです)は内容が クソ なんですが、ページの下の方にエンティティ一覧載せてますのでそれだけ見るということで(すまんこってす)

なんで勝手にそんな解釈するんだよ (;`ｰ´)o
という理由は、旧投稿画面で書いているから です。
旧投稿画面はhtmlタグを受け付けるモードなのですから、「っぽいもの」を書いてしまうとhtmlタグだと思われてしまいます。
不便のように感じますが、「htmlであること」をきちんと解釈してもらわなければ旧投稿画面自体が成り立ちませんので、これは仕様云々ってより 当たり前のこと なんですね。

どんな顔文字が引っかかるかというのは、先に記したように Angle brackets と Double quotation です。
これらの記号が顔文字内のどこかに含まれている場合におかしなことになります。

バリデーションでエラー警告されるだけならば特に問題ない(とかホントは言っちゃいけないけど)ですが、明らかにページに悪影響を与えることもありますよ。
顔文字でなくとも例えば以下のようなもの。

<divタグの"説明ページ"はコチラです>       >>>

上記内容を旧投稿画面に書いたとしますわね。
するとこうなる ↓

最後の3つの記号並びしか出てませんよね。
これはブラウザがこんな感じで思ってる。
「div要素…？で属性が「説明ページ」…？？？はぁ？なにそれ？ よくわからんがdiv要素ってこと… でいいんだよね？？？」
みたいな (´・ω・｀)
こんななったらもう整合性もクソもあったもんじゃないです。
最近のブラウザは賢いので、こういった「もどき」に対して無理くり 終了タグ を突っ込むことでレイアウト崩れは防止してくれますが、ちょっと前のブラウザだと
終了タグの数が足りない = レイアウト総崩れ
という悲しい事態になっておりました。
だって開始タグと終了タグの数が合わないわけですから、全体のレイアウトなんて簡単に狂ってしまいますよね。

まとめと閑話休題

思わぬ落とし穴というか、盲点なのかもしれませんが。
普段からhtmlを繰っている人は顔文字にもエンティティ使ってます。めんどくさくても、です(笑)
「顔文字めっちゃ使うわー。どないしよ 」
な方は、エンティティが面倒であれば 新投稿画面の利用をおすすめします。

ところで、日本が誇る「顔文字文化」ですが、海外の方への認知度がかなり高まりましたよね。
4〜5年前は顔文字使うと
「どうやって見るのかわからない」「全部おっぱいに見える」
なんてよく言われました。
どの顔文字も全部boobs(おっぱい)に見えるらしい(笑)
でも少しづつ「にっぽんの顔文字すげーな！かわいいな！」が広まって。
今ではGoogleの中の人たちも積極的に使ってます。Johnさんとか。

pic.twitter.com/4V6SiV0Ewu

— John ☆.o(≧▽≦)o.☆ (@JohnMu) 2015年12月31日

Kawaii (かわいい) も今やフツーに通じます(笑)
日本文化ばんざい (´・ω・｀)

Education トラブル対処 旧投稿画面 Validation