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

FC2ブログのあれこれ
2017/10/19
7
vanillaice (Akira)
vanillaice (Akira)
Educationトラブル対処旧投稿画面Validation

FC2ブログの旧投稿画面では」という括りつき。

2017年10月現在、FC2ブログで記事を書くには2種類のエディターを選べます。

  • 旧投稿画面
  • 新投稿画面

旧投稿画面(旧エディター)というのは htmlタグを直接受け付けるエディター です。
つまり「htmlエディター」なんですね (´・ω・`)

一方、新投稿画面の方は htmlを直接は受け付けないエディター
こういうのを「WYSIWYG(ウィジウィグ)」と言います。

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さんとか。

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

Related post

Comments  7

-
2020/07/09 (Thu) 17:54

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/07/11 (Sat) 14:38

To ダブルクォーテーションの件 内緒さん

ご無沙汰しております :)

「日本語の会話は『ののかぎ』を使う」と教えてもらってそうしていたんですが、その後「『ののかぎ』は縦書きの時のみ、横書きは『ダブルクォーテーション』」と知り、まぁでもいっかー、とそのまま使っています(笑)

会話はイギリスは普通はシングル、アメリカはダブルだと思います。そして日本は横書きがダブル、日本語のカギカッコってどうなんですかね。引用?
会話はhtmlマークアップでは ol が適しているんじゃないかなぁ、と個人的に思っているんですが、 blockquote だと言う方も居て。英文法も日本語文法もhtmlも確実な正解がわからない ^^;

hige
2020/07/11 (Sat) 16:06

ののかぎ

なんのこと?
で、ググって見たら、ひらがなではなくて「ノノカギ」とカタカナにしないとヒットしません。
引用はカギ括弧「」を使用すると云う記述も発見しました。もともと会話の記述ですよね。

会話は ol とか blockquote とかはなんかピンときません。

なんか、へぇ~っ というのと、結構面白い話ですね。

それはそうと、お久なご登場で、お疲れ様です。

bon
2020/07/11 (Sat) 22:51

Akiraさん、お疲れ様です。

私も、ののかぎ?と思って検索しました。知らなかったです。

人の発言を q タグで囲うと、カギ括弧が付くので時々使っています。
が、会話をol や blockquote というのは、私もイメージができません。どんな感じなんでしょう。

Akiraさんがブログに登場されて、嬉しい門下生の一人です(^^)

-
2020/07/12 (Sun) 08:11

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/07/18 (Sat) 20:09

To higeさん, To bonさん

お返事大変遅くなりました (*_ _)

「ノノカギ」とカタカナなんですね。漢字あるのかと思っていました ^^;
マークアップでどれが正解というのははっきりしませんが、読む人にとってわかりやすければ良い、と思っています(笑)

vanillaice (Akira)
Akira
2020/07/18 (Sat) 20:14

To 会話の件 内緒さん

お返事大変遅くなりました (*_ _)
* 会話の件

「フニフニ」は二本指でやりますね。それだけ一応お伝えしておこうと思います(笑)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)