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

Simplicityの特徴 フォーラム Simplicityについての質問 Simplicityスタイルのビジュアルエディターで、ギャラリーの大きさが正常に反映されない

このトピックには9件の返信が含まれ、2人の参加者がいます。1 年、 8 ヶ月前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #55418 返信

    たけし

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

    ギャラリーを2つ置いたところ、重なってしまっている

    テキストエディターモードではこうなっています。
    テキストモードで表示したところ

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

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

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

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

    Attachments:
  • #55430 返信

    かうたっく

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

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

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

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

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

  • #55431 返信

    かうたっく

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

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

  • #55432 返信

    かうたっく

    わいひらさんに

    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%;
    }

    ですが、お任せします^^;

  • #55441 返信

    たけし

    かうたっくさま

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

  • #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;
    }

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

  • #55451 返信

    かうたっく

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

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

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

  • #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%;
    }

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

  • #55558 返信
    わいひら
    わいひら
    キーマスター

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

  • #55567 返信

    かうたっく

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

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




スポンサーリンク
アドセンス(大)
アドセンス(大)