Simplicityの特徴 › フォーラム › Simplicityについての質問 › Simplicityスタイルのビジュアルエディターで、ギャラリーの大きさが正常に反映されない
- このトピックには9件の返信、2人の参加者があり、最後に
かうたっくにより8年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年8月28日 6:12 PM #55418
たけし
ゲスト「ビジュアルエディターにSimplicityスタイルを適用」をオンにして、投稿にギャラリーを追加すると、ギャラリー内の画像枚数にかかわらず、このスクリーンショット内の青枠の大きさに誤認識され、表示が重なってしまいます。

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

このスクリーンショットの例では、2つのギャラリーを置き、間に文字を入れていますが、1つ目のギャラリーの下に文字が隠れ、さらに2つ目のギャラリーが一番上に被ってしまっている状態です。
ちなみにこの例のように、ギャラリーが編集画面の下までかかると、その下が見えず、スクロールもしないのでテキストを入れることもできなくなります。
「ビジュアルエディターにSimplicityスタイルを適用」をオフにすれば、きちんと正しい大きさでギャラリーが表示されますし、実際の投稿やプレビューでも本来の正しい大きさで表示されます。
ブラウザはMacのSafariとChromeで、同じ状態でした。都度、キャッシュもクリアしております。何が原因か、おわかりになる方がいらっしゃいましたらご教示いただけないでしょうか。
よろしくお願いいたします。Attachments:
-
2017年8月29日 5:28 AM #55430
かうたっく
ゲストギャラリーってWordPress機能のものですよね?意味が分からず全く違った所を探ってました・・・
管理画面のことだと、実装しないとわかんないですね^^;Simplicity2 child: ビジュアルエディターのスタイルシート (editor-style.css)に下記styleを追記。
.wpview.wpview-wrap { height: auto; padding-bottom: 10px; }私の環境では成功してますが、下記画像のように表示されてたら成功です❦
http://netakiri.net/uploader/src/up0315.png反映しない場合、キャッシュを削除してくださいね。
-
2017年8月29日 5:36 AM #55431
かうたっく
ゲストギャラリーが編集画面の下までかかると、その下が見えず、スクロールもしないのでテキストを入れることもできなくなります。
右側の空欄をクリックしてスクロールさせてください。
※もしできないようであれば、コントロールキーと-キーをおして、画面を小さくして右側の空欄をクリックすればスクロールはできますよ。 -
2017年8月29日 6:00 AM #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%; }ですが、お任せします^^;
-
2017年8月29日 2:20 PM #55441
たけし
ゲストかうたっくさま
#55430で解決いたしました!
長いギャラリーがあっても問題なくスクロールまでできております。
私が言葉足らずでしたが内容を理解していただき、テスト画像まであげてくださったおかげでとてもわかりやすかったです。
本当にありがとうございました。 -
2017年8月29日 6:03 PM #55449
わいひらキーマスター#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; }間違ってましたらごめんなさい。
これでよろしければ、そのように修正したいと思います。 -
2017年8月29日 6:45 PM #55451
かうたっく
ゲストそのコードで、下記のどちらも対応できます^^
引用内にYouTubeを置いても
はみださない。ギャラリーを置いても高さが保たれ、内側余白もそれなりのものになります。
-
2017年8月29日 7:16 PM #55454
かうたっく
ゲストさらに確認したところ
.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%; } -
2017年8月30日 5:29 PM #55558
わいひらキーマスターなんと!iframeのたったそれだけでYouTubeもギャラリーも万事解決するんですね。
早速使わせていただきます。
ありがとうございます! -
2017年8月30日 11:53 PM #55567
かうたっく
ゲストiframeは引用内のyoutubeを はみ出さない為で、ギャラリーはWordPress側でビジュアルエディタ用のCSSを書いてくれる感じです^^
-
-
投稿者投稿
- フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。
