FC2新投稿画面について知っておきたいこと

はじめに

リニューアル版の管理画面に切り替えると、エディターが強制的に 新投稿画面 つまり WYSIWYGエディター (ビジュアルエディター)に切り替わります。そこでいろいろとユーザーさんからの不満などが出てきているわけなんですが、私が感じたのは やはり新投稿画面利用者はそんなに多くなかった という点ですね (´・ω・｀)

目にすることができる「改善希望・要望」「(不具合らしき)指摘」「不満」など、実際にはリニューアル前の新投稿画面にから続いているもの、あるいは仕様なども含まれています。今ここに来て目立つようになったということは、要するに 旧投稿画面を利用していたから だろうと思います。

そこでこれからいくつか私が分かる範囲で説明をするんですが、主に以下のような内容です。

• 「旧投稿画面」が非常に特殊であった、という事実説明
• 「改行」とは？
• よく目にする「新投稿画面を利用するとゴミタグが勝手につく」の真相
• 見たまま編集とHTML編集の共存について
• 「見たまま」と言いながら見たままじゃない理由
• エディターに対する個人的見解

など。説明し、理解したところで問題が解消されるわけではないですし、納得できない点もあるだろうと思いますが、知らないよりは知っていたほうが良い、知っていればもしかすると自分で対処できるかもしれないね、ということで ('0')/

それから、現時点で既知の「恐らく何かの手違いであろう挙動」があります。

• htmlモード利用時、画像挿入を行うと前後の文章を含め p要素 としてできあがってしまう。
• 画像挿入の位置が微妙
• 引用アイコンが無い
• 集中モード利用時、入力範囲の高さが増えず、また、ブラウズサイズを変更するとボタンを含む下半分が消失する(というよりも入力範囲がボタンに被さり、入力範囲自体も不明瞭になる) --- 2021.2.22 追加

上記については問い合わせ済みで、調査・対処予定の旨の返信を頂いていますので、今回はこの点には触れません。画像挿入アイコンの位置はたぶんですが、引用が抜けているので上に上がっちゃった、的な(笑)
恐らく引用アイコンが設置されれば下段の左端に移動してもらえるのではないかな、と思います。

特殊エディター「旧投稿画面」

新投稿画面の特徴

記事タイトルの付け方が下手 orz =3 えっと、管理画面リニューアルに伴い、新投稿画面利用者の増加 が見込まれます。この点については後述します。その新投稿画面についてこれまでで私が気づいている「特徴」についていくつかお伝えできれば、と思います。...

vanillaice000.blog.fc2.com

旧投稿画面が 非常に特殊 なんだ、というのをこれまで事あるごとに書いています。直近の記事は上記ブログカードから。

まず、旧投稿画面というのは HTMLエディター です。htmlモードがデフォルトです。FC2ブログユーザーにその意識がにあるかどうか。

「改行の扱い」変更は「編集モード」変更ではない という点も重要です。これについては多くの方が勘違いをされているなぁ、と個人的に感じています。

旧投稿画面の何が特殊かというと、ズバリ Enterキー押下で <br> 入力とみなす という設定がある点です。ここで察しの良い方は気づくと思いますが、みなさんがよく口にする「改行」というのはhtmlの世界では <br> というhtml要素を書き記すことで機能します。そして「Enterで改行とみなす」ということはつまり、書いていないbr要素を書いたものとする という意味ともうひとつ 実際の <br> 入力はEnterキー押下 ではない ということでもあります。「みなす」というのはそういうこと。そうでないものをそうとして扱うから「みなす」になる。

意図的に <br> として 行替え をしたい場合は、実際には

Enter 押下

Shift + Enter 押下

通常は Shift と Enter と2つのキーを押下することで <br> と書き出される。これはweb上のほとんどがそういう仕組みになっています。ですから 行替え をbr要素で行いたいという明確な目的があるならばEnterではなく Shif + Enter 押してください (´・ω・｀)

で、先程から 行替え と太字で書いていますが、行替えについての説明は次章。本章に於いて、旧投稿画面では「書いてないbrタグを書いたことにしてくれる(自動入力)」「その自動入力も本来はShif+Enterで行うべきところをShiftだけで認めてくれる」という2点が重要です。そしてこの簡略化によって ユーザーの作業がとても便利になっている 点と、逆に 間違い・勘違いに気づけない という弊害もあります。

旧投稿画面はHTMLエディターなので、本来の使い方というのは以下のような感じです。

<h2>これは見出しです</h2>

<p>あいうえお</p>

<p>かきくけこ</p>

上記は「改行の扱い『HTMLタグのみ』」なので、Enterを押しても 行は替わりませんし空白もできません。あくまでも br要素による空白はできません。この但し書きが後々重要になりますが今はスルー。

で、「あいうえお」「かきくけこ」は p要素 としてマークアップされています。こういうことをやるのがhtmlモードの本来なんですね。でもFC2でこういうことをやっている人は恐らくほとんど居ません。たいていの場合は以下のような形。

<h2>これは見出しです</h2>↩
↩
あいうえお↩
↩
かきくけこ

↩ の記号はEnterキー押下をわかりやすくするため追加していますので、実際には存在しない記号です。上記は「改行の扱い『自動』」に設定しています。

これはコーダー(htmlを書く人、htmlを書くことを生業としている人)からすれば、「なんでそんな中途半端なことするねん (´・ω・｀)」と。見出しだけ h要素 としてマークアップし、以降のテキストは平で書いてなんの定義もしていない。でもFC2ブロガーさんの場合はこれが最も多いですね。是非を問う記事ではありませんので良いとか悪いとかの話ではありません。

でもって、Enterキーによって見出しから「あいうえお」「かきくけこ」などの間に 空白行 を設けています。Enterを押せば押しただけ空白が空くことになります。書いたコードの見た目がすっきりしていますね。でもこれが勘違いを生む原因になっている んですよぅ (´・ｪ・｀)

自分が書いたコードの見た目はこうです ↓

<h2>これは見出しです</h2>

あいうえお

かきくけこ

けれどもこれは 実際のhtmlコードとは違う という点を知っておかないといけません。実際のコード、つまりブラウザが受け取っているhtml内容は

<h2>これは見出しです</h2><br>
<br>
あいうえお<br>
<br>
かきくけこ

けれども気が付かないんですよ。表に出てこないから。でも実際はそんなにスッキリでもなく上記のような内容になっているわけ。それを知らずに「ちょっと拾ったコードで装飾でもしてみようか」という気になったとします。旧投稿画面はその場ですぐにhtmlも書けて便利ですね。でも改行の扱い設定をちゃんと確認していますか？ しないとこういうことになる。

記事内でhtmlを使う方は「改行の扱い」指定に注意が必要

これまでも何度か注意喚起をしております。FC2ブログエディターと改行の関係 についてです。記事内でエディターツールで利用できるもの「以外」のhtmlを「使うことがある」という方はこの点が非常に重大な意味を持ちますので是非お読みください。...

vanillaice000.blog.fc2.com

目に見えない <br> のせいでデザイン大崩れ、htmlコード崩壊、という憂き目にあうことがあります。これは旧投稿画面の便利さの弊害だと思ってる (´・ω・｀)
あと 自分はすっきりしたコードを書いているつもりでも、実際は大量のbrが存在しているのですっきりでもなんでもない という点を認識するべし。すると後述する「ゴミタグと言うが本当にゴミなのか？」の章を理解しやすいと思います。

そして何度もしつこく言うように、htmlモードの本来は「文書をhtmlで定義する」ことにあるので、ところどころでhtmlタグで囲ったり、逆に囲わなかったり、という使い方ではあまり意味が無いんですね (´・ω・｀)
とは言っても「装飾をちょっと楽しみたい」という方も少なくありませんし、個人的にそこは否定しません。出来る範囲で愉しめば良い話。けれどもそうであるならば htmlの整合性云々を気にしてはいけない という反語でもありますYO

改行とは

「改行」と聞いて真っ先に思い浮かぶのはやはり <br> ではないかと思います。brなんて知らん、という場合は「Enterを押すこと」になるのかな。FC2ブロガーさんの多くと、そしてスマホ利用者さんもそうだと思います。

<br> というhtml要素は break の略なので、つまりは line break(改行) ということで合ってます。

ところがですね、web上で 行替え つまり言い換えると行を改めるという意味でもありますけれど、下の行に移動するには主に2つの方法があります。

• <br> と記す
• 前後の文章をブロック化する

今回は便宜上「ブロック化」という表現を取りたいと思います。「ブロック block」というのは「固まり」のことですけれども、ブロック化することで これ以上横にものが並ばない状態にする という説明で伝わりますでしょうか。

テキスト・文章というのは普通に記せばどんどん横につながっていきますね。記入の領域横幅制限、つまり右端に到達すると勝手に下の行に進みますが、これは 改行とは言いません。これは 折返し(wrap) です。改行がbreak(ぶれいく)、折返しはwrap(らっぷ)

改行というのは文章を書く人物が意図的に下へ行替えすることを言いますので、つまりは今回の説明で言えば「brと書く」「ブロック化する」ことです。しかし通常「改行」と言えばそれは「brと書く」ことですけれどもね。

文章をブロック化するとはこういうことです ↓

<div>あいうえお</div><div>かきくけこ<div>

Enterキーに気を取られないよう横に繋げて書きました。結果は

枠線はわかりやすく付けただけです。大事なのはテキストの状態です。
「あいうえおかきくけこ」と横並びにはなっていませんよね。<div> と </div> でテキストを囲う、つまり div要素 として各々をブロック化することで、横並びになるのを避けているわけです。

こうして <br> と書かずともテキスト横並びを避けることができます。でもってそれがすっごく重要。何故なら ほとんどのWYSIWYGエディターは行替えの手段にブロック化を取っているから です。

ほとんどのWYSIWYG、つまり FC2ブログ新投稿画面 も同様です。そして それがhtmlでは最も正攻法 と言えます。私個人としてもそれ以外の解答は無いです。「行替えはbrではなくブロック化で行う」これが正しい。これが最適解(言い切る)

ゴミと言うが、本当にゴミなのかちょっと考えよう

ゴミとは。

• 必要ないからゴミ
• 自分が意図していないのに勝手に存在する(付け加えられる)からゴミ
• 見た目がややこしくなるからゴミ

必要無いはずがない。だって並べたくないのでしょう？さきほどの

<div>あいうえお</div><div>かきくけこ<div>

この緑のdivタグが「必要無いゴミ」として削除してこうしたら

あいうえおかきくけこ

こうなってしまうやん (´・ω・｀)
並べたくないのでは (´・ω・｀)

いやいや、そうやないねん、br で改行したらよろしいやん、と。この場合は「見た目が煩わしい」「勝手なことするな」に該当するのかな、と思いますが、仮に 行替えを <br> で行うようなエディターは私ならば絶対に使いたくない です。

こうしたらどうか、ということよね。

ブロック化

<div>あいうえお</div><div>かきくけこ<div>

↓

br改行

あいうえお<br>かきくけこ

確かにbrの方が文字数が少ないですし管理しやすそう。だとしても こちら(br改行)の方がよほど ゴミ。個人的理由2つあります。

• htmlは見た目ではなく意味。定義である
• brは高さ調整が非常に困難(通常は「できない」)

brというのは行を替えるためだけにあるhtmlタグです。それ以外の意味の存在価値もありません。ここでやっぱり「人間の言語」の特性の話をまた出したいと思うんですが、日本語の現代語というのは改行が非常に多く見受けられるのだな、と思っています。これもひとつの文化。例えば

こういうの割と普通に見かけます。英語だと

せいぜいこうですね。こう書くことはまず無い。 ↓

日本語でも作文などでは「一文ごと、句点を迎える度に行を改める」なんてことはしないだろうと思います。しかしweb上ではとてもよく見かけます。これが意味するのは br要素の多用 なわけなんですが、brというのは昔から「連続して利用しても良いのかどうかの是非」が問われています。問われるということは 連続使用はアカンのやない？という考え方があるからに他ならない。詳細と個人的見解は以下でどうぞ。

pタグとbrタグについて考えてみる

段落を意味する <p> というタグと 改行を意味する <br> というタグ それぞれの使い所や、FC2に於いては「新投稿画面で 改行 を行うと勝手に <div> で挟まれてしまう 問題(？)」も絡めていきます。...

vanillaice000.blog.fc2.com

仮に「見た目がまだマシ」「管理しやすい」という理由でブロックではなくbrで行替えされてしまっては、htmlの有識者ユーザーはFC2ブログからみな離れてしまいます(笑)
いやホントにですね、「ブログを書くのにbrタグは一切利用しません」という方もいらっしゃいます。そういう方はたいていの場合みなさんにとってブログ作成の手助け、SEOの手助けになるような記事を書いてくれてたりします。私はどうかというと、マイルールがありまして、顔文字入れたらbr って決めてる(笑)

なので自分に極端な縛りを課すことはないと思いますが、brの利用はほどほどに、という感じでしょうか。brを使わずに段落で意味をわける、これこそブロック化なわけなので、「ゴミだらけ」とお嘆きの方はもしかしたらエディターの仕様云々の前に文章の書き方を再考するのが先決かもしれません。

そしてもうひとつの理由 brは高さ調整ができない という点。br改行で空けた空白というのは「大体1行分」なのであって、正確な数値にはなりません。なのでコントロールが非常に難しい。htmlやCSSというのは突き詰めれば「コントロール」でもありますので、コントロールできないものが大量にある、というのはあまり良くはない。margin や padding で設けた余白というのは正確な数値なのでコントロールしやすいんですね。

というわけで、WYSIWYGエディターにおいて行替えをbrで行う、というのはナシです。Enterキー押下で空の要素ができるとしてもです。以下のような感じ。

<div>あいうえお</div>
<div></div>
<div>かきくけこ</div>

だとしてもこれ ↓ よりよほど良い、という個人的見解です。

あいうえお<br>
<br>
かきくけこ

ただしこれが div ではなく p だとするとちょっと事情が変わってきますね。p要素で囲うのは危険。pで囲われてしまう、という現象も確認できていますし、ここはなんとかうまく調整してもらいたいところです(報告済案件)

htmlモードでしっかりhtmlを書いているのに何かしら勝手な要素に書き換わる、勝手にタグがついてくる、というのであればそれはまごうことなき「ゴミ」ですが、そうでない場合、新投稿画面のデフォルトモードである「見たまま編集」を利用している場合にはそれが本当にゴミなのか、果たしてそのゴミは誰が発生させているのか、を考えてみると良いかもしれません。

これ書くと反感招くかもだけど、私としては「見たまま編集」を利用するということはつまり「自分でコードを書かない」「自分でコントロールしない」「htmlのことは知らないし気にしてない」という若干初心者寄りの層のはずで、WYSIWYGというのはもともと「いかにhtmlを意識させずに使ってもらうか」という点に特化したエディターです。そのモードを利用しているのに「ゴミがゴミが」と、バックグラウンドの状態を気にする理由がちょっとわからない (´・ω・｀)
ならばhtmlモードを使うべきなのでは… とか思ってる。ごめんなさい ^^;

見たまま編集とHTML編集の共存

うーん。本質的問題に切り込んでいく心意気 (;`ｰ´)o

FC2ブログの新投稿画面というのは、「見たまま編集」と「html編集」の双方を行き来することができますよね。これ自体が実は特殊 ですよね。

他社ブログサービスの場合のほとんどは、見たままとhtmlの切り替えが可能ではあっても、例えば「見たままモード」滞在中に「htmlモード」に切り替えようとすると「これまで書いた内容が消去されますが本当に切り替えてよろしいですか？」みたいなアラートが表示されると思います。つまりFC2新投稿画面のように任意で気軽に行ったり来たり、というのはできないようになっていると思われる。そしてそれがフツーっちゃフツー。

えっとですね、今一部のユーザーさんから「エスケープ」についての疑問など寄せられています。編集画面を開くとエスケープしたはずの記号がもとに戻ってる、といった内容です。ちょっと小難しいので心当たりの有る方、意味のわかる方だけ読んでもらえれば良い内容です。すみません。

これはちょっと解消が難しそうだなぁ、と思います (´・ω・｀)
問い合わせのお返事は頂きましたが、もうそうなると「エディター自体の変更」「モード固定」ぐらいしかないのでは、といった感じで。私もそう思ってる。

「モードの固定」というのは、リクエストに出ているような「常にhtmlモードを利用したいから、初期状態のモードをhtmlに」といったこと ではなく、先に記したように、共存をさせない という意味だろうと思います。簡単に言うと 「見たまま」で書くか「html」で書くかの二極化 ですね。一つの記事は一貫して同じモードで書く、と。そういうことです。

システム的にはそれが最も効率よく、そしてエスケープ問題も解消しやすいだろうと。だたこれで困るのは中級者層だろうなぁ (´・ｪ・｀)
うーん、どうなるかなぁ。上級者が目をつぶって今のまま行くか、それとも中級者に初心者・上級者のカテゴライズを自らやってもらうか。えー、これすっごい難しくね (´・ω・｀)
この問題すごく難しいわ。どうなるだろ(笑)

ちなみに、新投稿画面はFC2の純正エディターではないです。開発者さんはいますが(フランスの方です)FC2用に便宜を図ってくれるはずもなく(笑)

この問題についてはFC2運営の方針に従うしかなさそうですね。仮に「モード固定・共存なし」となっても受け入れるしかあるまい。と私は思うのでした (´・ω・｀)

見たままが見たままじゃない

この理由は FC2ブログだから です。

見たままモードで記事を書いている最中、その内容の見た目は ブラウザUAスタイルシート 及び FC2が用意したスタイルシート に依存します。
* UA = ユーザーエージェント, 各社ハードウェアのこと

みなさんよーくご存知の通り、FC2ブログでは様々なテンプレートを選択利用できるようになっています。それらは作者がスタイル(CSS)を作成していますので、作者によって見た目がまちまちで統一されていません。サンプルとして、FC2公式テンプレートの「Diary_2column」と私が作成した「Halo」との比較です。

【見たままモード】

Diary_2columnの見た目が明らかに違いますよね。これはDiary_2columnのスタイルシートでは「画像とテキストは横に並ばない」「画像は水平方向中央に配置する」という内容の指定が行われているためです。

これは「見たまま」に限らず「HTML」でももちろん同じことが起こります。

htmlモードで編集中のコード同士の余白に気を取られないでくださいね。HTMLモードなのでEnterで作成した余白は反映されません。コードの可読性のためにつけています。

Diary_2columnの方はテキスト同士の上下に余白がありません。一方Haloの方は余白があります。
* 注) 実際のDiary_2columnはp要素利用で上下に余白があります。サンプル変更が面倒だったので改ざんしています。

p要素のデフォルトスタイルはどのブラウザUAスタイルシートでも「上下に余白ができる」ことになっています。これはCSSプロパティの margin によるものですが、p要素の余白を意図的に取り除いているFC2テンプレートは非常に多く存在します。

というわけで、見たままモードの様子と実際の記事投稿後の様子を全く同じにしたい、ということになると2つの方法がありますね。

• 記事作成中に各ユーザーが利用中テンプレートのスタイルシートを反映させる
• 現存テンプレートを全て廃止し、全ユーザー同一公式テンプレートを利用のみを許可する

いずれも無理筋 (´・ω・｀)
記事作成中にテンプレートスタイルシートを、となれば、各ユーザーの利用テンプレートの見分けから始まり、該当スタイルシートの読み込み・呼び出し等、動作環境がめちゃくちゃ悪くなってしまいます。現存テンプレート廃止についても財産を全て捨てることになりますので到底できるものではないですよね。

なのでこの点については「理由を知る」というだけです。だからエディターの方をどうにかこうにか、とかはナシ。ナシよ。できないしやるべきではないよたぶん(笑)

エディターに対する個人的見解

既存FC2ユーザーさん、旧投稿画面利用率がまだ高く、じゃあ「旧投稿画面をメイン・デフォルト」にしたらどうか、という意見も出てきそうなんだけれど。個人的にそれは良くないと思う (´・ω・｀)

以前に終了となったYahoo!やヤプログといったブログサービスから移転された方の流入があったとはいえ、その際に多く見られたのが「エディター使えない・わけわからん・難しすぎ」といった戸惑いでした。これはねぇ、やっぱそうだろうと思うよ (´・ω・｀)

今もうスマホ全盛というのもあって、サービスのデフォルトエディターはhtmlではなくWYSIWYGであるべきだ、と私は思っています。既存ユーザーを大切に、というのはもっともだとしても新規ユーザーを無視してればサービスが立ち行かなくなってしまいます。

スマートフォンを当たり前に使いこなす若年層なんかはスマホで記事を書けるのが当たり前でなきゃいけない。現状のFC2モバイル版は残念ながらいまだ旧投稿画面由来なんですよね。これでは新規ユーザーは逃げてしまいます。今もう「htmlとは」とかそんなこと考えずにやりたい、という人が圧倒的多数なはずなので、デフォルトに据えるエディターがhtmlではやはりまずいだろうと思うのです。

Yahoo!ブロガーさんもたくさんの方が諦めて離れてしまいましたよね。もう少し頑張ってもらえたら旧投稿画面がいかに便利か理解してもらえたかもしれない。んーでもでもー、それ自体が既にナンセンスな時代になっている。旧投稿画面の〜とか言ってないでともかくWYSIWYGがデフォルトで！みたいな (´・ω・｀)

私自身はもう長く新投稿画面のhtmlモードで記事を書いています。ツールバーなども利用しないので使い勝手については「コードが見やすいこと」だけなんですよね。なのであまり参考意見が出てこなくて申し訳なく ^^;

まとめ

修正すべき点はする、してもらえる、と仮定しても、もともとが旧投稿画面と新投稿画面は性質が全く違います。やはりここは訪れるべくして訪れた転機として「新投稿画面に慣れる」という努力も必要ではないかなぁ、と思います。だって実際Yahoo!ユーザーさんたちに「慣れろ」とか言ってた人たくさん居るわけだし(笑)

見たままとhtmlの互換(特に過去記事)など解決すべき点はありますけれど、とにかく慣れよう！みなさん、慣れましょう(笑)