「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 <
〝< の後ろの ( はこの位置で使ってはいけない文字です。恐らく原因は エスケープされていない < の記号にあります。< ではなく < とエスケープしてください。〟
なんのこっちゃ??? って感じですかね ^^;
平たく言うと、
〝山かっこはそのまま書いちゃうとhtmlタグかと思っちまうぜ。htmlタグの山かっこでないのならちゃんと エスケープ処理 しなはれや。〟
です。
* エスケープ処理 = エンティティ文字表記
のことです。
エンティティについては下記のページを参照のこと。
FC2ブログのタイトルに於けるエンティティ - FC2ブログのあれこれ
----- 追記 この記事内容は私がFC2のエンコード独自変数を知らなかったために書いたものです(笑)エンコード用変数を利用することで解決します。お恥ずかしい&申し訳ございません。以下本文 -----記事のタイトルに関する内容です・記事のタイトルに記号(絵文字含む)を用いるのはどうなのか・記事タイトル中の記号をエンティティで表示したらどうなるかこの2つに的を絞ります (●'ω')ノ...
上記リンク先の記事(私が書いたものです)は内容が クソ なんですが、ページの下の方にエンティティ一覧載せてますのでそれだけ見るということで(すまんこってす)
なんで勝手にそんな解釈するんだよ (;`ー´)o
という理由は、旧投稿画面で書いているから です。
旧投稿画面はhtmlタグを受け付けるモードなのですから、「っぽいもの」を書いてしまうとhtmlタグだと思われてしまいます。
不便のように感じますが、「htmlであること」をきちんと解釈してもらわなければ旧投稿画面自体が成り立ちませんので、これは仕様云々ってより 当たり前のこと なんですね。
どんな顔文字が引っかかるかというのは、先に記したように Angle brackets と Double quotation です。
これらの記号が顔文字内のどこかに含まれている場合におかしなことになります。
バリデーションでエラー警告されるだけならば特に問題ない(とかホントは言っちゃいけないけど)ですが、明らかにページに悪影響を与えることもありますよ。
顔文字でなくとも例えば以下のようなもの。
<divタグの"説明ページ"はコチラです> >>>
上記内容を旧投稿画面に書いたとしますわね。
するとこうなる ↓

最後の3つの記号並びしか出てませんよね。
これはブラウザがこんな感じで思ってる。
「div要素…?で属性が「説明ページ」…???はぁ?なにそれ? よくわからんがdiv要素ってこと… でいいんだよね???」
みたいな (´・ω・`)
こんななったらもう整合性もクソもあったもんじゃないです。
最近のブラウザは賢いので、こういった「もどき」に対して無理くり 終了タグ を突っ込むことでレイアウト崩れは防止してくれますが、ちょっと前のブラウザだと
終了タグの数が足りない = レイアウト総崩れ
という悲しい事態になっておりました。
だって開始タグと終了タグの数が合わないわけですから、全体のレイアウトなんて簡単に狂ってしまいますよね。
まとめと閑話休題
思わぬ落とし穴というか、盲点なのかもしれませんが。
普段からhtmlを繰っている人は顔文字にもエンティティ使ってます。めんどくさくても、です(笑)
「顔文字めっちゃ使うわー。どないしよ 」
な方は、エンティティが面倒であれば 新投稿画面の利用をおすすめします。
ところで、日本が誇る「顔文字文化」ですが、海外の方への認知度がかなり高まりましたよね。
4〜5年前は顔文字使うと
「どうやって見るのかわからない」「全部おっぱいに見える」
なんてよく言われました。
どの顔文字も全部boobs(おっぱい)に見えるらしい(笑)
でも少しづつ「にっぽんの顔文字すげーな!かわいいな!」が広まって。
今ではGoogleの中の人たちも積極的に使ってます。Johnさんとか。
— John ☆.o(≧▽≦)o.☆ (@JohnMu) 2015年12月31日
Kawaii (かわいい) も今やフツーに通じます(笑)
日本文化ばんざい (´・ω・`)
- 【注意喚起】SSL化の件を放置して泣くのは自分2017/11/20
- FC2ブログ【限定記事の場合のみ出力する変数】が追加されました2017/11/08
- FC2ブログでSSLにすべきか否か2017/11/07
- FC2ブログ SSL有効化のボタンが出てこない方はこうすると出来るよ2017/10/28
- FC2ブログのSSLで301リダイレクト提供が始まりました2017/10/18
- FC2ブログ SSL対応中にチェックするアドレスバーの警告は鍵マークだけではない2017/10/14
- FC2ブログ独自変数 index_area はログオフ + モバイル環境では効かない2017/10/03
- FC2ブログのテンプレートプレビューでトップページ以外を確認する方法2017/10/01