Simplicityスタイルのビジュアルエディターで、ギャラリーの大きさが正常に反映されない

[たけし]

「ビジュアルエディターにSimplicityスタイルを適用」をオンにして、投稿にギャラリーを追加すると、ギャラリー内の画像枚数にかかわらず、このスクリーンショット内の青枠の大きさに誤認識され、表示が重なってしまいます。

テキストエディターモードではこうなっています。

このスクリーンショットの例では、2つのギャラリーを置き、間に文字を入れていますが、1つ目のギャラリーの下に文字が隠れ、さらに2つ目のギャラリーが一番上に被ってしまっている状態です。

ちなみにこの例のように、ギャラリーが編集画面の下までかかると、その下が見えず、スクロールもしないのでテキストを入れることもできなくなります。

「ビジュアルエディターにSimplicityスタイルを適用」をオフにすれば、きちんと正しい大きさでギャラリーが表示されますし、実際の投稿やプレビューでも本来の正しい大きさで表示されます。
ブラウザはMacのSafariとChromeで、同じ状態でした。都度、キャッシュもクリアしております。

何が原因か、おわかりになる方がいらっしゃいましたらご教示いただけないでしょうか。
よろしくお願いいたします。

Attachments:

1. 

   up0313.png
   

[かうたっく]

ギャラリーってWordPress機能のものですよね？意味が分からず全く違った所を探ってました・・・
管理画面のことだと、実装しないとわかんないですね＾＾；

Simplicity2 child: ビジュアルエディターのスタイルシート (editor-style.css)に下記styleを追記。

.wpview.wpview-wrap {
  height: auto;
  padding-bottom: 10px;
}

私の環境では成功してますが、下記画像のように表示されてたら成功です❦
http://netakiri.net/uploader/src/up0315.png

反映しない場合、キャッシュを削除してくださいね。

[かうたっく]

ギャラリーが編集画面の下までかかると、その下が見えず、スクロールもしないのでテキストを入れることもできなくなります。

右側の空欄をクリックしてスクロールさせてください。
※もしできないようであれば、コントロールキーと－キーをおして、画面を小さくして右側の空欄をクリックすればスクロールはできますよ。

[かうたっく]

わいひらさんに

youtubeが管理画面にはみ出すときのコード

.wpview.wpview-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.wpview.wpview-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

この記載ですけど、下記でも対応できます。

iframe {
    max-width: 100%;
}

ですが、お任せします＾＾；

[たけし]

かうたっくさま

#55430で解決いたしました！
長いギャラリーがあっても問題なくスクロールまでできております。
私が言葉足らずでしたが内容を理解していただき、テスト画像まであげてくださったおかげでとてもわかりやすかったです。
本当にありがとうございました。

[わいひら]

#55432
話をまとめると、以下のコード部分を

.wpview.wpview-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.wpview.wpview-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

以下のように変更すれば、今回の不具合にも対応できるということでよいのでしょうか？

iframe {
    max-width: 100%;
}

.wpview.wpview-wrap {
  height: auto;
  padding-bottom: 10px;
}

間違ってましたらごめんなさい。
これでよろしければ、そのように修正したいと思います。

[かうたっく]

そのコードで、下記のどちらも対応できます＾＾

引用内にYouTubeを置いても
はみださない。

ギャラリーを置いても高さが保たれ、内側余白もそれなりのものになります。

[かうたっく]

さらに確認したところ

.wpview.wpview-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.wpview.wpview-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

があったので、下記のコードが必要でした。

.wpview.wpview-wrap {
  height: auto;
  padding-bottom: 10px;
}

もっとシンプルに上記をけして
下記を追記するだけで、きれいな表示になりました。

iframe {
  max-width: 100%;
}

http://netakiri.net/uploader/src/up0316.png

[わいひら]

なんと！iframeのたったそれだけでYouTubeもギャラリーも万事解決するんですね。
早速使わせていただきます。
ありがとうございます！

[かうたっく]

iframeは引用内のyoutubeを　はみ出さない為で、ギャラリーはWordPress側でビジュアルエディタ用のCSSを書いてくれる感じです＾＾

[投稿者]

投稿