【ビジュアルエディタでYouTubeを引用でくくるとはみ出してしまう。】

Simplicityの特徴 フォーラム Simplicityについての質問 【ビジュアルエディタでYouTubeを引用でくくるとはみ出してしまう。】

  • このトピックには10件の返信、2人の参加者があり、最後にろいろいにより2年、 7ヶ月前に更新されました。
10件の返信スレッドを表示中
  • 投稿者
    投稿
    • #54051
      ろいろい
      ゲスト

      お世話になりますm(_ _)m

      タイトルの件で質問があります。

      ▼該当ページ
      http://nqmxs96afsyc.xii.jp/2017/07/5351/

      表面上は、引用枠からは一切はみ出さず、レスポンシブでの対応も全く問題ありません。

      ただ、ビジュアルエディタだと、▼YouTubeが引用枠からはみ出してしまいます。

      設定は、完全レスポンシブにしてあります。
      テーマは子テーマを利用しています。
      ビジュアルエディターのスタイルシート (editor-style.css) には以下のみ記述してあります。

      /*ビジュアルエディターのスタイルを書く*/
      
      /* 赤色アンダーライン */
      .marker-under-red {
      background: linear-gradient(transparent 60%, #ffa0a0 60%);
      }
      
      /* 青色アンダーライン */
      .marker-under-blue {
      background: linear-gradient(transparent 60%, #b1b1ff 60%);
      }
      /*————————————–
      h2~h4見出しスタイル
      ————————————–*/
      h2
      {
      padding-left:2.25em;
      border-bottom:3px double #e7e7e7;
      border-top:3px double #e7e7e7;
      border-left:0;
      }
      
      h2:before
      {
      position:absolute;
      top:0.9em;
      left:0.4em;
      width:0.75em;
      height:0.75em;
      border:2px solid #c7c7c7;
      content:””;
      }
      
      h2:after
      {
      position:absolute;
      top:1.25em;
      left:0.75em;
      width:0.75em;
      height:0.75em;
      border:2px solid #e7e7e7;
      content:””;
      }
      
      h3
      {
      border-bottom:2px solid #e7e7e7;
      padding-left:1.5em;
      }
      
      h3:before
      {
      content:”;
      height:0.75em;
      width:0.75em;
      display:block;
      position:absolute;
      top:0.6em;
      left:0.2em;
      background-color:#FFF;
      box-shadow:0 0 2px 2px rgba(0,0,0,0.1) inset;
      }
      
      h4
      {
      border-bottom:2px dashed #e7e7e7;
      padding-left:1.75em;
      }
      
      h4:before
      {
      content:”;
      height:0.5em;
      width:0.5em;
      display:block;
      position:absolute;
      top:0.75em;
      left:0.4em;
      background-color:#FFF;
      box-shadow:0 0 2px 2px rgba(0,0,0,0.1) inset;
      }
      /*————————————–
      リストスタイル
      ————————————–*/
      .article ol, .article ul, .article dl {
      line-height: 163%;
      }
      li {
      margin-top:1ex;
      }

      ボクなりに、ChromeでCSSを触って、

      max-width:100%;

      とかやってあがいてみましたが・・・、どうにも上手くいきません・・・。

      大変お手数ではありますが、ビジュアルエディタで引用枠からはみ出さず、かつレスポンシブになる方法を教えて頂けないでしょうか?

      宜しくお願い致しますm(_ _)m

      Attachments:
    • #54054
      ろいろい
      ゲスト

      連投お許し下さい。
      色々いじっていたら、解決(?)したので報告がてら追記します。

      ビジュアルエディターのスタイルシート (editor-style.css) に、▼のように記述しました。
      ——————————

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

      ——————————
      そしたら、▼ビジュアルエディタで引用枠からYouTubeがはみ出さなくなりました。

      ただ、記述したCSSの内容がこれで正しいのかボク自身では確信が持てないので・・・。
      あの、この記述内容で問題はないでしょうか?
      教えていただけると助かります。

      ==================
      ▼コチラのコメント欄では大変失礼いたしました。
      https://wp-simplicity.com/simplicity-in-english/

      やはり、ボクの方で code ボタンの使い方が悪かったせいで投稿できなかったようです。
      本当にスミマセンでしたm(_ _)m

      差し支えなければ、コメント欄の方は削除していただければと思います。
      お手数おかけいたしました。
      ==================

    • #54057
      かうたっく
      ゲスト

      http://dotinstall.com/lessons/responsive_html/13011
      この辺りをみれば、納得されるかもしれません?

      たぶんですが・・・

    • #54061
      ろいろい
      ゲスト

      >>かうたっくさん

      返答ありがとうございますm(_ _)m

      遠回しに質問してしまったボクが悪かったですね(汗) すみません。

      今回ボクが聞きたかったことは、率直に言うと・・・

      『Simplicity2 で、デフォルトでYouTube等の動画を引用でくくった時に、ビジュアルエディタではみ出さないような設定がされているのか?それとも、されていないのか?
      されていないのであれば、はみ出さないようにして頂くことは可能でしょうか?』

      って感じです。

      率直に聞いてしまうと、あまりに唐突なので失礼だと感じてしまい、ちょっと遠回しに質問させていただいた次第です(^▽^;)(汗)

      なので、スミマセン・・・。
      ドットインストールではなかったんです・・・。

      答えていただいたのに、申し訳ないですm(_ _)m

    • #54076
      かうたっく
      ゲスト

      たんに、はみ出したものを収めたいのでしたら、editor-style.cssに

      iframe {
      max-width: 100%;
      }

      これを追加したら、おさまりますよ。

    • #54079
      ろいろい
      ゲスト

      今ボクが聞きたいのは、『収める方法』ではないです。

      #54054 の投稿で記載していますが、『枠に収める』という問題はすで自己解決済みです。

      今は、わいひらさんに▼の件を聞きたいのです。
      ————————

      今回ボクが聞きたかったことは、率直に言うと・・・

      『Simplicity2 で、デフォルトでYouTube等の動画を引用でくくった時に、ビジュアルエディタではみ出さないような設定がされているのか?それとも、されていないのか?
      されていないのであれば、はみ出さないようにして頂くことは可能でしょうか?』

      って感じです。

      ————————
      この内容を聞きたいだけです。

      あと、内容が「要望」みたいな感じになってきてるので、要望のフォーラムへトピックを立て直します。

    • #54081
      ろいろい
      ゲスト

      連投でスミマセン。

      YouTube等の動画を引用でくくった時に、ビジュアルエディタではみ出さないようにして欲しい。

      ↑トピ立て直しました。

      お忙しいところ、申し訳ありません。

    • #54082
      かうたっく
      ゲスト

      まわりまわって質問内容が、明確な質問:要望になったようで何よりです^^

    • #54084
      ろいろい
      ゲスト

      いやいや~、たしかにそうですね(^▽^;)
      質問と要望が一緒くたになってたみたいですね~(汗)

      今回の件で、

      【質問 #54054

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

      こちらの記述で合っていますか?

      という事と、

      【要望】
      YouTube等の動画を引用でくくった時に、ビジュアルエディタではみ出さないようにして欲しい。

      という感じで、質問/要望 が分離出来たのでボクの頭の中でモヤモヤしていた感じもスッキリしました!!

      後は、わいひらさんからの回答待ちです。

      かうたっくさん、ありがとうございました!!

    • #54087
      わいひらわいひら
      キーマスター

      こちらの記述で合っていますか?

      ビジュアルエディターで、問題なく表示されているのであれば、それで良いかと思いますよ。
      ビジュアルエディターは、投稿者・編集者しか見ないので、意図通りに表示さえされているのであれば、問題ないと思います。

    • #54090
      ろいろい
      ゲスト

      ビジュアルエディターは、投稿者・編集者しか見ないので、意図通りに表示さえされているのであれば、問題ないと思います。

      分かりました。
      問題ないということなので安心しました。
      ありがとうございますm(_ _)m

10件の返信スレッドを表示中
  • トピック「【ビジュアルエディタでYouTubeを引用でくくるとはみ出してしまう。】」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)