Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

またその話し〜?
って思いました? 今 (´・ω・`)

FC2の新しいWYSIWYGエディターですけれども
新投稿画面 というのがFC2内での正しい名称なんでしょうかしら
一般的には WYSIWYGエディター(うぃじうぃぐ えでぃたー)と言います
ブラウザ上で使えるhtmlエディターの総称です
(What You See Is What You Get = 「見たまんま編集」, 旧投稿画面の「高機能エディター」もそれにあたります)
以降は正式名称(っぽい)ので「新投稿画面」「旧投稿画面」という表現でいきますね (´・ω・`)


新投稿画面で「困ったなー 」と思う方はこんな方 ↓

・画像貼り付けや動画埋め込みをよく行なっている
・記事内でhtmlを手打ちしたり ツールバーを利用した装飾(位置揃えやフォントの色・サイズ等の変更など)をよく行う


ここまでは特に問題ないんだけれど
上記に

・過去にアップした記事の修正や編集をよく行う


これが加わると途端に困ったことになります
以下をサンプルにします(スクショ)


スクショ① --- 記事作成中の様子




これ記事を「書きやすい」と感じる方は多いのではないでしょうか
いわゆる「見たまんま編集」というやつです
htmlタグなどが一切表に出てきませんのですっきりとした見た目のまま作業できます
記事を保存すると この画面がそのまま反映されることになります
よって旧投稿画面にある「リアルタイムプレビュー」が不要である
という理屈です

web初心者の方にとっては 直感的に文章が書ける という点で評価できるものだと思います

ところがね

じゃあやっぱり文章構成や動画・画像のサイズなんかを 変更しよう
と思ったときどうしますか (´・ω・`)
初心者の方へは

該当箇所を一旦削除して 掲載しなおす


これしか今のところ選択肢はありません
だって動画も画像も変換されちゃってるからね これ(笑)
yahooブログをご存知の方は この辺りがとても親切設計であることに気がつくと思います
yahooエディターでは 記事作成中に 動画が実態変換されません



こんな風に格子柄で出てきます
実態ではありませんので この格子の上でクリックすることができ すると「編集」というボタンが出てきます



こうして簡単にサイズの変更・位置の変更が可能です
ここyahooに負けてると思うなー (´・ω・`)
yahooでは「かんたんモード」と銘打っているエディターですが
やはりこのタイプのエディターとしては一日の長という感じ

同じく画像もですね
こちらは実態変換されますが 押したら再生が始まっちゃう動画と違いますので
画像上でクリックし 同じようにサイズ・位置変更を行うことができます
FC2新投稿画面は最低でもこの機能は無いとダメだと思うー ( ̄∀ ̄;)
まあ いずれ実装されるとは思いますが(されなかったりして )


で 初心者は今のところ
一旦削除 → 貼り直し
というのを余儀なくされるわけですが
中級〜上級の方は
「アホかよ」と いちいち貼り直さなくても「html編集すれば良いじゃねーかよ」と (´・ω・`)


スクショ② --- 編集したい内容





空白削除についてはこの画面のまま delete かければ良いんですけどね
上級者ともなれば「効率」を考えますので
動画・画像と同じようにhtmlで同時に行えば済む話し と考えますわね フツーは
というわけで右上の HTML表示 をクリックします
これは yahooではできません
yahooはhtmlタグの一切は不可視です
ここはFC2に軍配


スクショ③





ところが蓋開けてみりゃこれですよ
もう バカにしてんのか? ってレベル((((笑)
ちょっとわかりやすく直してみましょうか ↓


この文章は「新投稿画面」で書いています
<div>この文章の前に「改行」を行いました</div>
<div>
<br>
</div>
<div>前文との間に2度 enter/ return キーを押しました(2回の改行による空白行作成)</div>
<div>
<br>
</div>
<div><iframe width="320" height="180" src="動画アドレス" frameborder="0" allowfullscreen=""></iframe>
<br>
</div>
<div>動画をツールバーを使って入れました</div>
<div><img src="画像アドレス" alt="代替テキスト" border="0" width="500" height="333">
<br>
</div>
<div></div>
<div>画像をツールバーで入れました</div>



なんなんでしょう 一体なんの冗談なんでしょう
FC2リクエスト内で
「新投稿画面を使うとゴミだらけになる」
と訴える方が多く見受けられますが ゴミ というのはソース内の緑色の部分のことです
下から2行目の
<div></div>
に至ってはなにかのギャグとしか思えない

同じことを旧投稿画面で行なった場合にはこう ↓

この文章は「新投稿画面」で書いています
この文章の前に「改行」を行いました


前文との間に2度 enter/ return キーを押しました(2回の改行による空白行作成)


<iframe width="320" height="180" src="動画アドレス" frameborder="0" allowfullscreen=""></iframe>
動画をツールバーを使って入れました


<img src="画像アドレス" alt="代替テキスト" border="0" width="500" height="333">
画像をツールバーで入れました


すっきり美しいですね
ただ改行を意味する
<br>
が表に出ていませんので それを追加しても

この文章は「新投稿画面」で書いています<br>
この文章の前に「改行」を行いました<br>
<br>
<br>
前文との間に2度 enter/ return キーを押しました(2回の改行による空白行作成)<br>
<br>
<br>
<iframe width="320" height="180" src="動画アドレス" frameborder="0" allowfullscreen=""></iframe><br>
動画をツールバーを使って入れました<br>
<br>
<br>
<img src="画像アドレス" alt="代替テキスト" border="0" width="500" height="333"><br>
画像をツールバーで入れました


こうですね すっきりしたもんです


もう一度スクショ③ を掲載します




これ見ながら
・空白行削除
を行おうと思ったら どこをどうしますか?
さらに
・動画のサイズはどこ?
・画像のサイズはどこ?

正解 ↓



ところが画像というのは縦横比がありますよね
例えば横のサイズを変更したのなら 縦のサイズも縦横比計算をした上で書き直す必要があります
そんなことしてられませんので
height="auto"
に直すわけですが
これは初心者の方ではわからんわな たぶん (´・ω・`)
だからもう初心者の自覚がある方へは「貼り直し」をおすすめしているわけです



もっとアカンことがあるんですよ
このゴミソースが最もいけない点



文章を横に繋げたいと思ったとき



こうかな?
と思ってしまう方も多いかと思います
それぞれの文章が囲まれてるし
ですがこれは間違い

正解 ↓




この辺りのタグ操作は初心者では無理だと思うわけですよ (´・ω・`)
だってこうしてタグが横にズラ~っと繋がってるるだけでも泣きたくなるだろうし

動画貼り直したいけど URL再取得がよくわかんないなー サイズ変更するだけだしHTML表示で…
(初心者なので変換済み動画のURL取得の仕方がわからないと仮定)

HTML表示にしてテンパイ(役満級)

あたふた⊂(;ω;`っ)三(つ´;ω;)っ していらんことする

グチャグチャに



<div>
というのはCSSボックスモデルに於ける ブロックレベル の代表的な要素です
ブロックレベル要素というのは

前後に改行を含んでいる

のが特徴です
前後に改行がデフォルトで含まれている = 何かを横に並べることができない

例えば

<div>文章1</div>
<div>文章2</div>


表示結果)
文章1
文章2

こんなソースがあったとして
文章1と2を横に繋げるために単純に

<div>文章1</div><div>文章2</div>


こう修正したとしても
ブロックレベル要素同士ですから絶対に横には並びません

表示結果)
文章1
文章2



本来「テキスト」自体はブロックレベル要素は逆の インライン要素 に分類され
それ故に簡単に文章を繋げたり 改行で段落を作成したり というのが可能ですが
FC2新投稿画面では 改行してしまった文章は それぞれの行でブロックレベル要素として確定してしまいます
つまり テキスト編集ごときがものすごく困難になる ということです
与えられてしまった
<div>
に対し的確に削除・追加等の対処をしなければ 全ての構成が狂ってしまいます


この手のエディターは全部そうですよ
yahooはタグが不可視ですからわからないだけで
実際のソース内容はFC2新投稿画面で作成したものとほぼ同じです
FC2よりもまだ上手に構成されている気もしますが
逆にそれが仇になって「スマホで文字が読めない」といったアホ現象も起こります
(この説明は割愛,
<span>
の使い方に起因します)


まとめとして

初心者は迂闊にHTML表示のモードを利用しない

これしかないだろう 今のところ… ( ̄∀ ̄;)
あるいは旧投稿画面を利用する ← これが一番良い
でもいずれ新投稿画面に統合されると思います
メンテナンスや費用面に於いてそれは仕方がないことです
なんでも簡単(っぽい)ムードにしておけば良いってもんでもないと私は思うんですけどね (´・ω・`)
さて新投稿画面がこれからどの程度進歩していくものか

上級者はWYSIWYGでなくhtmlエディターで清書してコピペ
って道しかないような気が ^^;
関連記事
最終更新日2017-07-02
Posted by
FC2Tips

Comments 2

There are no comments yet.
きろろ  
FC2の

新しいエディター? って言うのですか?
使って見たんですが、過去にこちらの記事で、

見出し設定などをしても反映されないと書かれていたようなので使用していないんです。
って、タグでブログを書けと言われても……
素人にタグで記事は書けないですよぉ(ё_ё)

せいぜい、画像の横にテキストを書くくらいのタグは書けますけどね。
それもコピペをして書いている状況なので。
投稿画面が統一されたら嫌だな(ё_ё)

2016/09/14 (Wed) 02:53 | EDIT | REPLY |   
Akira  
To きろろさん

FC2の旧投稿画面はとっても秀逸な出来だと思うんだけどな (´・ω・`)
新投稿画面に移行するとしたらすんごくもったいない (/_;)
新〜の方は最低でも動画・画像のサイズ変更をすぐに出来るようにしておかないとダメよね。
初心者のための新〜なんだろうけど、今のところ初心者のためになってない。
全然なってない(笑)

2016/09/14 (Wed) 18:45 | EDIT | REPLY |   

Leave a reply

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