FC2動画埋め込み　ビジュアル、テキスト編集の違いについて

テキストモード ビジュアルモードと入れ替えて編集をされる場合は、wordpressの仕様なのでそのままでは無理かと思います。

そもそもFC2動画のスクリプトタグは一般的な書き方ではないので、FC2運営にfacebookやGoogleのadsenceみたいにしてくれと依頼を出す他ないかと思います。
何かしらのプラグインがあって、最近流行りのoEmbedに対応できればアドレスだけで行けそうですけれども。

ただし、テキストモードで投稿する限りは投稿できるみたいなので、全体の記事をビジュアルモード等で書いてから、動画をテキストモードで貼り付ければ良いのではないかと思ったり。
ただし、その記事を編集する場合は予めテキストモードでエディターを設定しておいて、目的の記事を編集しないと、ビジュアルモードで開いたらやはり省略されると思います。

なので、この際、テキストモード1本で行くのがベターかとは思いますが、どちらにせよSimplicityにもwordpressにも関係ない部分でのトラブルなのでFC2運営に何とかしてもらわない限りは個人でプラグイン等を開発するか、誰かの開発を待つかしか手はないかと思います。

iframeなり、headでプレーヤースクリプト読み込んで、何かしらのタグで囲んだら、プレーヤーが埋め込まれるようにしろや!!ときつくFC2運営に言うべきです。そもそもflashなんぞ使ってんなよ、もう2000年になってから15年も経ってんだぜ、バックトゥザフューチャーはもうフューチャーじゃ無くなったんだぜと更に念を押すべきです。
そしてできるならショートコードでプレーヤーを埋め込めるように、世界1利用されているCMSのwordpressに対応できるプラグインを自社で作って公開しろと強硬な態度でデモをするぐらいでないとFC2運営は動かないとは思いますが、希望はあるかもしれません(ほぼ無いと思いますけれども)。

ちなみに以前のタイプ(embedを利用するタイプ)は、埋め込みできると思いますが、スマホでは動作しないかも知れません。iphoneとかflashを捨ててるので。そもそもスマホで動画を見る人がどれぐらいいるかにもよるんですけれども、twitterの短い動画とかは結構見てる人いるみたいですし、スマホは侮れませんしね。

今時flashを利用しているのは、デザイン重視の企業か、action scriptしか覚えてなくて他に移行できないデザイナーに丸め込まれた商店か、ブラウザゲームぐらいですから、今後はもっと対応しにくくなるかも知れません。FC2何やってんの、そんなだから警察に目をつけられるんだろとこっそり思いながら、利用されるのをフェードアウトされていくのが良いかと思います(個人的感想)。

Hidekichiさま

ガッツリ、しっかりとご回答頂きありがとうございます<(_ _)>

FC2に関しては色々と問題もありますし、そう考えると法的問題の以前に
ユーザーに優しくない！という問題もあるのでしょうね。

＞全体の記事をビジュアルモード等で書いてから、動画をテキストモードで貼り付ければ良いのではないかと思ったり。

取りあえずそうするしかないみたいですね。

あとですね、
>>記事下に出てくるソーシャルのアイコンが動画上に被ってしまいます。

については何か対策はあるのでしょうか？
ちなみにその他の動画共有サイトでのEmbedでは被ったりはしていません。

初心者的な質問で申し訳ありませんが
よろしくお願い致します<(_ _)>

> 記事下に出てくるソーシャルのアイコンが動画上に被ってしまいます。

要素が重なるのにはいくつか理由があり、たいていはfloatしている要素にマージンの設定やclearなどのプロパティがうまく働いてないのと、positionがrelativeになっているものにabsoluteが指定してあったりかと思います。大半の原因は前者だろうと思います。

floatとは、要素を文字通り浮かせていて、アニメーションで言うところの背景セルに人物セルが重なっているようなものです。なのでうまく設定しないと重なってしまうことはあり得るかと思います。

サンプル: 要素の重なりと並び | jsFiddle

あんまり良いサンプルではありませんが、最初のは赤boxにfloatを仕掛けてあります。青にはmarginが仕掛けてあります。青は、本来、赤の下にあります(display: blockなので)。しかし、赤にfloatが仕掛けてあるせいで、赤は浮いている状態ですから、赤のあった場所は空いてしまうのです。そのスペースに青が入り込んでしまう。

横並びにするためには、お互いを浮かせて、浮かせている所で左寄せにすることで、赤・青どちらにも幅が設定してありますから重なることはありません。それが2つめの例です。

青の方にはマージンが仕掛けてあります。

注目して欲しいのは、赤・青のboxを囲むようにborderが入っている点です。最初のは、赤は浮いていますが青は浮いていないので、青(とp要素)の回りを囲むようにボーダーが入りますが、2つ目のは、p要素にだけしかボーダーが入ってません。
これはつまり中に入っている要素が浮いているということです。

3つ目の例では、floatはnoneで解除してあるので、どちらも浮いていない状態です。これはflexと言うプロパティで実現しています。

昔からcssをいじっている人は、要素を横並びにしたい時floatを使っていました。floatが入っている親の要素、サンプルでは「.test数字」の部分ですが、こういった中の要素をラップする親要素をひとまず用意して透過させておき、中の要素をあたかも横並びに見せると言う技法でメニュー等を作っていたわけです。

.test数字は高さが入ってませんから、高さのない要素になります。しかし、中身の要素はあるのです。これはfloatしていると言う状態なので無いのも同じですが、実際はそこにあって浮いているわけです。しかし親には高さはありませんから、こういうのが2つ並んでしまうと、要素同士(.testみたいの)が重なりあってしまうというわけです。

Simplicityも同様です。#mainと#sidebarはそれぞれfloatで左右に浮いています。それを囲む#body-inには高さはありません。なので、footerの部分は、clear等を入れて改行させる必要があるのです。

footerのグレーの部分を右クリックして、デベロッパーツールを開き、clear:bothを解除してみて下さい。#mainの背景にfooterと同じグレーが広がるはずです。
この原因は、浮いている要素の入ってる親要素に高さがないというのが原因です。これは、ある意味デザインがとてもやりにくいわけですが、かと言って横並びにするのにposition: absoluteで絶対値を入れて配置していたのでは応用が効きません。

そういった所からflexと言う仕組みが生み出されたというわけです。flexは、axis(軸)と言う観念があり、その軸に沿ってblock(box)要素を配置します。そのため、中の要素の最大の高さに親の要素が合わせるので必ず高さが生まれますから、要素同士が重なることはなく、また各中身のboxの幅を自動調整したり、任意のサイズを超えた場合、折り返して幅いっぱいに広げるなどと言う仕組みも備わっているため、彼のcssフレームワークbootstrapでも採用されたりしてます。
まぁ最新のバージョンからですけれども。

それまでは、グリッドに並べたり(Simplicityで言うところのリスト3列とか)するのもjQuery(javascript)によって各boxのサイズを計算していたりしたわけです。あるいは%で指定するなどもありました。

おっと、だいぶ横道にそれましたが、要素が重なる原因は、親になる要素あたりの高さ、あるいは幅が指定していない、あるいはclearが正しく機能していないが原因なので、そこらを決めてやれば大抵うまくイクかと思います。

元に戻して、
> 記事下に出てくるソーシャルのアイコンが動画上に被ってしまいます。

この場合、SNSのアイコンを囲む親の要素にclear: bothを入れるとか、clear:bothを入れた上でmargin-topにある程度のスペースを入れてみるとか、親要素をdisplay: inline-block;などとして強制的に重ならないようにするのも方法です。
また動画の方に問題があるなら、動画のプレイヤーを囲むようにして新たにdiv等でブロックを作ると良いかと思います。
動画プレイヤーの一番親になるブロックにfloatが入っていて、それを解除することで問題ないのであれば、float: noneで解除してしまうのも方法かと思います。

現在、そのプレイヤーがどういう状態になっているかによって対処方法は異なるかと思うので、答えとしてはhtmlの構造とそのcssのプロパティによると言う感じになります。

Hidekichiさま

とても詳しくご教示いただきありがとうございます！<(_ _)>

記事の上部にサムネ画像を入れていまして記事を回り込ませていたので
ソーシャルのアイコンがfloat解除されていなかっただけのようです。
少し考えれば分かることだったんでしょうけど・・・。
お手数お掛けして申し訳ありませんでした。

また、flexについてもご説明頂きありがとうございます。
まだCSS自体うまく理解できていないところもあるのですが、
とても勉強になりました。

今までWPはとても敷居が高くて難しいというイメージがあって
中々踏み出せなかったのですが、こうやってご助言頂けて
スタートして良かったと思います＾＾

また、数あるテーマの中でSimplicityを選んで良かったです。

ありがとうございます！<(_ _)>