サポート » インストール » コメント欄と、Youtube表示のトラブル

  • 解決済 WP_manabu

    (@wp_manabu)


    おそらく、wordpreeのバージョンを4.4にアップデートしたことが影響していると思うのですが、そののち、以下、ふたつの表示がかわってしまいました。

    ひとつは、ブログに対するコメント欄の表示です。いままで名前、コメントの順番になっていたのですが、それが逆になり、コメント、名前の順になってしまました。

    ふたつめは、ブログを書いた際に貼ったYouTubeのフレームの大きです。

    スマホでみても適切な表示になるように、<div class=”video-container”>(youtubeで発行されている「埋め込みタグ」)</div>というふうにタグを利用していたのですが、それが効かなくなってしまいました。

    いまや、スマホの適正な大きなどころでなく、パソコンで見てもYoutubeが画面いっぱいに表示されるようになってしまいます。

    以上2点、解決の手順をご教示いただけると助かります。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • tg29359

    (@tg29359)

    ひとつめの点については、以下の記事によると、4.4での仕様変更のようです。

    https://ja.forums.wordpress.org/topic/157304?replies=4#post-222897
    https://ja.forums.wordpress.org/topic/157304?replies=4#post-222896

    前者の記事には、「Reverse Comment Textarea プラグインを使えば、以前の位置に戻すことができる」という記載がありますので、試してみると良いかと思います。

    ふたつめの点についてですが、以下の方法を試してみてください。

    1. YouTubeの埋め込み部分を、単純にYuTubeの共有URLだけを書く書き方に変えてみる
    2. YouTubeの埋め込み部分を、「embed」というショートコードでYuTubeの共有URLを囲む書き方に変えてみる

    一番目の書き方の例は以下です。単純に記事の中の埋め込みたい箇所に、URLをそのまま書きます。

    http://youtu.be/VC61G8IThtM

    この書き方で、PCで見た時もスマホで見た時もそこそこ満足のいく表示になったら、この書き方に変えてみてください。私のサイトでは、PCでもスマホでも、視聴にそれほど差し支えないような表示にはなっています。私のサイトの表示例は下記です。

    YouTube埋め込みのテスト

    二番目の書き方の例は以下です。URLの前後を「embed」というショートコードで囲みます。

    [embed]http://youtu.be/VC61G8IThtM[/embed]

    この方法は、JetPack等、特定のプラグインがインストールされてないと、もしかしたら効かないかもしれません。

    nobita

    (@nobita)

    こんにちは

    スマホでみても適切な表示になるように、<div class=”video-container”>(youtubeで発行されている「埋め込みタグ」)</div>というふうにタグを利用していたのですが、それが効かなくなってしまいました。

    こんにちは、「video-container」というクラスが、

    Responsive Youtube Embed

    といったクラスと同じスタイル設定を含むものだとすると、

    いまや、スマホの適正な大きなどころでなく、パソコンで見てもYoutubeが画面いっぱいに表示されるようになってしまいます。

    親ボックスのサイズいっぱいに表示されるのが正常です。
    これが、画面いっぱいに表示されるのは、たぶん、テーマの設定に依存する問題です。
    .entry-content boxが画面いっぱいに表示されているようになっていないか確認してみてください。

    video-containaer は、(推測通りの場合)サイズは、親ボックスの幅サイズに依存しますので

    <div style="width:400px">
    <div class="video-container">
    (youtubeで発行されている「埋め込みタグ」)
    </div>
    
    </div>

    として初めて、指定サイズで動作するようになります。

    천궁 메텔

    (@digitmaetel)

    テーマがわからないので検証しようも、原因の検討もつかないのですが、WordPressを4.4にした後で、テーマの方もアップデートがありましたか?

    わたしが利用しているテーマが海外のテーマ制作グループのもので、WordPressを4.4にアップしたら、画像が全部アップロードした画像のサイズになってしまっていたのが、昨夜テーマ側のアップデートがあり、実行したら元に戻りました。
    それと同じケースではないかな、とも想像しています。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    みなさま、ご回答、ありがとうございます。

    tg29359さま

    コメント欄の順番が変わってしまった件。「Reverse Comment Textarea」をダウンロードしたのち、本プラグインを「有効」にしたら、元の順番に戻りました !

    Yotubeの件。「埋め込みコード」を貼らなくても、任意の映像の共有URLを貼るだけで良いとは…勉強になりました。

    で、共有URLをそのまま貼る方法、共有URLを[embed] [/embed}で囲む方法を試してみたところ、つぎのような表示になりました。
    http://tsurumaki-office.com/test/

    「上のYouTube」がそのまま貼ったばあい、「下のYouTube」がembedで囲んだばあいです。

    こちらで確認した限りでは、MacbookAir13インチでは、いい感じで表示されますが、iPhone6では、(YouTubeの再生ボタン▶をタップする前の)サムネールが、ヨコ約半分の表示になってしまいます。

    nobitaさま

    先般の質問のお答えともども、ありがとうございます。当方の理解不足ゆえ、ご紹介いただいたタグをコピー&ペーストしてみました。Youtubeは以下のような表示になります(本質問の<div class=”video-container”></div>で囲んだ時と同じ表示となりました)
    http://tsurumaki-office.com/test2/

    맹조さま
    テーマはBizVectorです。こちらはアップデートしていません。

    tg29359

    (@tg29359)

    うーん、テーマの問題かもしれませんね。差し支えなければ以下の点を教えていただけますか?。

    1. 似たような名前のテーマ、BizVektor Global Edition1.1.0を使って、共有URLをそのまま貼り付ける方法を、以下のページで試してみたのですが、このページの表示は、お手持ちのiPhone6で望んだ通りの表示になりますか?。

      YouTube埋め込みテスト

    2. 後掲する「max-width:100%指定付きのdivで共有URLを囲む記述例」のような記述を御サイトにて行った場合の表示はどうでしょうか?

    max-width:100%指定付きのdivで共有URLを囲む記述例

    <div style="max-width:100%">
    
    </div>
    nobita

    (@nobita)

    style.css 28行

    .video-container iframe, .video-container object, .video-container embed

    に、position:absolute が設定されていますけど、この指定をコメントアウトしてみてください。

    video-containerは、自分で設定したのではなく、テーマに元々あったものなら、作者に照会する事をお勧めします。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    tg29359さま

    お手数をおかけしています。

    1,は、ばっちしです。
    2.は、やはり、同様にうまくいきません。

    当方はbizvector1.1.3を使用しています。bizvectorにはGlobal Editionというのもあるんですねぇ。こちらも、また初めて知りました。テーマが関係してるっぽい感じが。。。

    tg29359

    (@tg29359)

    私がググったところ、BizVektor Global Editonは、BizVektorの機能削減型軽量版のようで、本来は、WP_manabu様がお使いのBizVektorの方が多機能な正規版のはずです。

    参考URL
    https://bizvektor.com/info/v_1_5_2/

    しかし、BizVektorは継続的にアップデートが為されているようで、WP_manabu様がお使いのBizVektorのバージョンと比べると、かなり新しくなっているようです。BizVektorのアップデートを、WordPress標準の管理画面から出来るようにするプラグインが、BizVektorの開発元からリリースされている、とも読めるウェブページもありましたので、その辺りを参考にして、一度、お使いのBizVektorのアップデートを検討されるとよいかと思います。ただ、現在のバージョンと最新バージョンとの間の開きがわりと大きめなので、アップデートが望まない副作用を起こす危険もありそうです。アップデート実施の如何は、BizVektor開発元のサイトの記載などをよく読んでから判断してください。

    参考URL
    https://bizvektor.com/about/download/
    上記によれば、最新バージョンは1.8.13のようです。

    https://bizvektor.com/info/theme-updater/
    このページの記載を斜め読みしましたら、どうも、プラグインをインストールするとBizVektorを管理画面から簡単にアップデートできるようです。

    — 追記 —
    アップデートはそれなりのリスクを伴うと思いますので、まずは、nobita様ご呈示の以下の解決方法を試してみると良いかと思います。

    https://ja.forums.wordpress.org/topic/157676?replies=9#post-223980

    トピック投稿者 WP_manabu

    (@wp_manabu)

    nobitaさま

    当スタイルシートは、テーマにもともとあったものでは、ありません。

    はてなの「人力検索」というところで質問し、
    http://q.hatena.ne.jp/1414327063

    そのとおりに、いままで通りやっていました。
    がしかし、Wordpressのアップロードのあと、有効ではなくなっってしまいました。

    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    をコメントアウトするというアドバイス、ありがとうございます。(こころもとないのですが)当スタイルシートを以下のように書きかえてみました。

    .video-container iframe,
    .video-container object,
    .video-container embed {
    <!–position: absolute;–>
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    書きかえたあと確認してみますと、Macbookairでは、いぜんのように画面いっぱいに表示されることはなくなりましたが、こんどは画面がタテ方向に切り取られた表示になりました。

    iPhoneは以前と同様です(改善されていないままです)。

    お手数ですが、もう少しお付き合いいただけると幸いです。

    tg29359さま

    はい。原因を切り分けたいので、当問題をクリアしたあと、バージョンアップしてみまーす!

    トピック投稿者 WP_manabu

    (@wp_manabu)

    nobitaさま

    当方の先のコメント訂正させてください。失礼しました。

    iPhoneは以前と同様です(改善されないままです)
    =>iPhoneの方も、少し改善されて、ヨコ幅はきちんと表示されるようになりました。しかしタテ画像は、MacBookAirと同じように、上下が切り取られた(そのぶん、せまい)表示になっています。

    nobita

    (@nobita)

    WP_manabu さん

    なぜ、.video-container みたいなクラスで、Oembed Youtubeをラップしなければならないのかという点については、以下のご覧ください

    http://tenman.info/labo/snip/archives/6821

    スタイルを追加する理由や、それぞれのスタイル指定の働きが理解できると、どうすべきかがハッキリしてくると思います。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    nobitaさま

    ちょっと勉強してみますね。おつきあいいただき、ありがとうございます!

    tg29359

    (@tg29359)

    元々のスタイルシートにあったであろう下記を

    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    下記に書き換えた場合、表示内容はどのようになりますか?。

    .video-container iframe,
    .video-container object,
    .video-container embed {
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    /*height: 100%;*/
    }
    トピック投稿者 WP_manabu

    (@wp_manabu)

    tg29359さん

    あっ、よくなりましたっ。width:100%だけ有効にする、ということですね。先にnobitaさんに貼っていただいたウェッブページの理解に、ほんのちょっと近づけたような気がします。この問題は、理解できるまで、引き続き考えていきます。tg29359さん、「もっと考えるように」と示唆していただいたnobitaさん、ありがとうございました。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    トピックス解決済みです。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「コメント欄と、Youtube表示のトラブル」には新たに返信することはできません。