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

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

  • このトピックには9件の返信、2人の参加者があり、最後にかうたっくにより5年、 3ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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 返信
      Avatar photoわいひら
      キーマスター

      #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 返信
      Avatar photoわいひら
      キーマスター

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

    • #55567 返信
      かうたっく
      ゲスト

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

9件の返信スレッドを表示中
返信先: Simplicityスタイルのビジュアルエディターで、ギャラリーの大きさが正常に反映されないで#55567に返信
あなたの情報:




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