顔文字がレイアウトに悪影響を与えることがあります【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タグの山かっこでないのならちゃんと エスケープ処理 しなはれや。〟 です。
* エスケープ処理 = エンティティ文字表記
のことです。
エンティティについては下記のページを参照のこと。

FC2ブログのタイトルに於けるエンティティ - FC2ブログのあれこれ

----- 追記 この記事内容は私がFC2のエンコード独自変数を知らなかったために書いたものです(笑)エンコード用変数を利用することで解決します。お恥ずかしい&申し訳ございません。以下本文 -----記事のタイトルに関する内容です・記事のタイトルに記号(絵文字含む)を用いるのはどうなのか・記事タイトル中の記号をエンティティで表示したらどうなるかこの2つに的を絞ります (●'ω')ノ...

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

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

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

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

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

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

プレビューの様子

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

まとめと閑話休題

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

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

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

 7

There are no comments yet.
-
管理人のみ閲覧できます

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

2020/07/09 (Thu) 17:54
vanillaice (Akira)
Akira
To ダブルクォーテーションの件 内緒さん

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

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

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

2020/07/11 (Sat) 14:38
hige
ののかぎ

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

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

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

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

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

Akiraさん、お疲れ様です。

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

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

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

2020/07/11 (Sat) 22:51
-
管理人のみ閲覧できます

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

2020/07/12 (Sun) 08:11
vanillaice (Akira)
Akira
To higeさん, To bonさん

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

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

2020/07/18 (Sat) 20:09
vanillaice (Akira)
Akira
To 会話の件 内緒さん

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

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

2020/07/18 (Sat) 20:14

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

FC2ブログのあれこれ