サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2022年9月29日 10:04
いつもお世話になっております。
トップページに7MBのカバームービーを設置してますが、ユーザーの環境によっては10秒くらい真っ暗で再生されないままだとの指摘をされました。
理想は再生されるまでの間、ポスター画像を表示したいです（カバームービー上にテキストやボタンを設置しており、それはそのまま表示させたいです）
それが不可能な場合は画質を落としてムービーサイズを小さくしようと思いますが、
これまでにも別のサイトで5MB前後の動画を設置してますが、「再生されない」と指摘されたことがなかったので動画サイズだけが原因じゃないのかも？と悩んでおります。
ご教示宜しくお願い致します。
---------------------------------------------- サイト名：WA株式会社（ダブルエー） サイトURL： https://wao-wa.com ホームURL： https://wao-wa.com コンテンツURL：/wp-content インクルードURL：/wp-includes/ テンプレートURL：/wp-content/themes/cocoon-master スタイルシートURL：/wp-content/themes/cocoon-child-master 親テーマスタイル：/wp-content/themes/cocoon-master/style.css 子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css WordPressバージョン：6.0.2 PHPバージョン：7.4.30 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 エンコーディング：gzip, deflate, br 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.4.9 カテゴリ数：1 タグ数：0 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.3 style.cssサイズ：845バイト functions.phpサイズ：203バイト ----------------------------------------------
2022年9月29日 10:42
真っ暗で再生されないままだとの指摘をされました。
●回答
iPhoneで低電力モードの時、videoは自動再生されません。
ムービーの先頭が黒なので、真っ暗になっているのでは？
●補足
gutenberg使っていませんが、コードエディターに切り換えて、videoタグにposter属性を追加？
わいひら reacted
トピックスターター 2022年9月29日 21:20
回答ありがとうございます。言葉足らずでした。
ずっと再生されないという症状は出ておらず、10秒経過すると再生されるとのことです。
3秒のときもあれば5秒の時もあるそうで・・・
ただし、私のスマホではそのような症状出ませんし、キャッシュクリアしても遅くて1秒程度です。
先頭が黒いのは動画のせいだと思うので動画の先頭だけ画像にしようと思います
いずれにしてもポスター画像の設定はしたいと思っています。
●補足
gutenberg使っていませんが、コードエディターに切り換えて、videoタグにposter属性を追加？
これをやりたいのですがわからない点があります。
コードエディターでvideoタグにポスター属性追加はきっとできるのですが、
今現在表示しているテキストとボタンの表示方法がわかりません
教えていただけると嬉しいです。
2022年9月29日 21:44
コードエディターでvideoタグにポスター属性追加はきっとできるのですが、
今現在表示しているテキストとボタンの表示方法がわかりません
どのように実現しているか理解していますか？
作りは、単にテキスト「転職支援・採用支援なら、ダブルエー 医療福祉の総合求人 企業・法人様の採用支援」、ボタンをvideoに重ねているだけです。（wp-block-cover__inner-containerをvideoに重ねている）
まずは一度、以下を読みポスター属性を理解する事をお勧めします。
2022年10月1日 11:13
ページを見ていて気付いたことがあり。
●現象
水平スクロールバーが表示されます。
（図参照。分かり易くする為、背景色を変更しています）
●原因
要素をはみ出させる為に計算している。
vw単位は、スクロールバーの領域も含めた横幅です。
結果、垂直スクロールバー分誤差が出た為。
●対策
以下を追加する。
html, body {
overflow-x: hidden;
}
●疑問
子テーマCSSを使っているのに、追加CSSに記述している。
ページが1カラム(画面幅)のようなので、一部の要素に以下を用いる必要はないのでは？
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
padding-right: calc(50vw - 50%);
padding-left: calc(50vw - 50%);
わいひら reacted
トピックスターター 2022年10月1日 14:06
コードエディターでvideoタグにポスター属性追加はきっとできるのですが、
今現在表示しているテキストとボタンの表示方法がわかりません
どのように実現しているか理解していますか？
作りは、単にテキスト「転職支援・採用支援なら、ダブルエー 医療福祉の総合求人 企業・法人様の採用支援」、ボタンをvideoに重ねているだけです。（wp-block-cover__inner-containerをvideoに重ねている）
まずは一度、以下を読みポスター属性を理解する事をお勧めします。
丁寧に解説ありがとうございます。
私はCSSを全く理解しておらず、ネットで拾ったコードをコピペで追記しているだけの状態です。
なのでvideoに重ねるだけでも検索しながら試している感じです
実際にコードエディターで設置してみました（ページ内２番目のムービー。１番上はブロックエディタでいれたものです）が、ボタンが縦に並ばず困っております。
●現象
水平スクロールバーが表示されます。
（図参照。分かり易くする為、背景色を変更しています）●原因
要素をはみ出させる為に計算している。
vw単位は、スクロールバーの領域も含めた横幅です。
結果、垂直スクロールバー分誤差が出た為。●対策
以下を追加する。html, body { overflow-x: hidden; }●疑問
子テーマCSSを使っているのに、追加CSSに記述している。
ページが1カラム(画面幅)のようなので、一部の要素に以下を用いる必要はないのでは？margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding-right: calc(50vw - 50%); padding-left: calc(50vw - 50%);
スクロールバーの件、ありがとうございます。
対策コード追記しました。
●疑問について
これについても理解していません。背景に画像を差し込むコードをネットで拾ってコピペをした次第です。
試しに消して確認してみたところ、幅を狭めるとサイドに若干隙間ができてしまいます。(図参照）
宜しくお願い致します。
2022年10月1日 15:29
これについても理解していません。背景に画像を差し込むコードをネットで拾ってコピペをした次第です。
試しに消して確認してみたところ、幅を狭めるとサイドに若干隙間ができてしまいます。(図参照）
CSSを理解していないなら、疑問の部分を消すの止めて下さい。
対策のコードの追加のみにして下さい。
わいひら reacted
2022年10月1日 15:39
実際にコードエディターで設置してみました（ページ内２番目のムービー。１番上はブロックエディタでいれたものです）が、ボタンが縦に並ばず困っております。
部品カバーを使い実現していると思いますが、gutenbergエディターは全く解りません。
図のようにコードエディターに切り替え、videoタグにposter属性を追加すればいいのでは？と思い。
しかし、「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されてしまい。
HTMLタグも理解していない方だと厳しいです、すみません。
わいひら reacted
トピックスターター 2022年10月1日 17:22
実際にコードエディターで設置してみました（ページ内２番目のムービー。１番上はブロックエディタでいれたものです）が、ボタンが縦に並ばず困っております。
部品カバーを使い実現していると思いますが、gutenbergエディターは全く解りません。
図のようにコードエディターに切り替え、videoタグにposter属性を追加すればいいのでは？と思い。
しかし、「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されてしまい。
HTMLタグも理解していない方だと厳しいです、すみません。
とんでもないです。お忙しいところ貴重なアドバイスいただきありがとうございます。
私の勉強不足が原因なのですが、自力で調べてもどうしてもわからず質問させていただいております。
未解決のまま待っていてもよろしいのでしょうか？
それとも再度投稿した方がよろしいのでしょうか？
2022年10月1日 19:35
g0ng0nさん
それとも再度投稿した方がよろしいのでしょうか？
ちょっと、このトピックがどういう状態か、計りかねるところがありますが・・・。
件名は、「カバームービーにポスター画像の設定をしたい」とのことですので、この件に関することは、このままこのトピックに書いていただけば、良いと思います。
それ以外の件は、別トピックを立てていただくと良いと思います。
その際は、このトピックに関連していることが分かるように、このトピックをリンクしていただければと思います。
そして、本件についてですが、既に答えは出ているかと思います。
chu-yaさんがお書きになった通りです。
コードエディターに切り替え、videoタグにposter属性を追加すればいいのでは？
これだけだと思います。
poster属性についても、chu-yaさんがリンクしてくださったURLに解説されています。
まずは一度、以下を読みポスター属性を理解する事をお勧めします。
今あるものに、poster属性を追加する・・・ということだと思います。
（コードエディタにして、HTMLをそのまま修正する）
ボタンについては、既に設置されており、これから追加する訳ではないと思いますので、関係ない話のような気がします。
（そもそも今あるということは、以前ご自身で設置なさったのでは・・・。）
ちなみに、g0ng0nさんのサイトの動画を、私のローカル環境に設置してみました。
そして、コードエディタでposter属性を追加しました。
poster属性では、背景が深緑色で「確認用画像」という画像を指定してあります。
私のローカル環境で、投稿ページを表示させて、リロードしてみました。
一瞬、poster属性の画像が表示されますので、これでうまくいっているのかな・・・と思うのですが。
ちなみに、ブロックエディタは、右のサイドバー？のようなところで、設定できないものを追加すると、エディタ上では「このブロックには、想定されていないか無効なコンテンツが含まれています」という状態に簡単になってしまいます。
例えば、「px指定」のものを、コードエディタで「em指定」にしただけで同様の状態になってしまいます。
それは、ブロックエディタのこれからの課題だと思いますし、どうしようもないので、無視していくしかないです。
ちなみに、poster属性を追加すると、エディタ上では以下のようになりました。
この状態でも、実際のページ表示は先程のGIFのように、問題なく表示されます。
「このブロックには、想定されていないか無効なコンテンツが含まれています」の状態になってしまうと、それ以降はHTMLをコードエディタで直接修正するしかない・・・という感じです。
HTMLが正しければ、表示に問題はないです。
（「ブロックのリカバリーを試行」すると、poster属性は消えると思います。）
ちなみに、該当部分は「カバーブロック」をご利用なのだと思います。
そこにボタンを追加しただけだと思います。
そこにボタンを追加しただけだと思います。
「Gutenberg カバーブロック」等で検索いただくと、使い方を解説しているサイトは見つかるはずです。
検索して一番上に表示されたものをリンクしておきます。
【Gutenberg】カバーブロックの使い方＆設定方法まとめ
https://zigstyle.jp/guteneberg-cover
https://zigstyle.jp/guteneberg-cover
上記ページの目次に「カバーには段落・ボタン・見出しブロックが追加できる」という部分もあるみたいです。
他にも検索すれば見つかるはずですので、探してみてください。
ボタンの件は、既に追加なさっている話ですので、ご自身で追加なさったはずだと思うのですが・・・。
（環境情報が途中で切れているので・・・どういう環境・設定でご利用なのか、こちらからは分からない部分もあります。）
もし、どなたかにカスタマイズ依頼をなさって作成されたものであれば、その方にお問い合わせ・ご依頼いただくのが、よろしいかと思います。
長くなってしまいました。
申し訳ないです。
申し訳ないです。
わいひら reacted
2022年10月1日 19:44
そして、本件についてですが、既に答えは出ているかと思います。
mk2さんの言うように、これ以上の回答は不可能です。
カスタマイズ依頼された方がいいかと思います。
トピックスターター 2022年10月1日 22:24
すみません。私が大きな勘違いをしておりました。
今まで、コードエディタへの切り替えをしたことが無く、
「コードエディタへ切り替えて」とのアドバイスを「ビジュアルエディタの中で【カスタムHTMLとCSS】で手打ちする」だと勘違いしていました。
自分で調べて手打ちした結果、表示がうまくいかず迷子になっていました。
コードエディタへの切り替えをしてポスター属性追加したらいとも簡単にできました・・・。
お恥ずかしい限りです。とても勉強になりました。
chu-yaさん、mk2さん
親切に教えてくださりありがとうございました。
わいひら reacted
2022年10月1日 22:36
g0ng0nさん
できたみたいですね、良かったです。
このトピックの途中経過を拝見して思うのは・・・。
- どんな風にやってみたけど、できなかった
- 分からないのは、どこなのか
そういう具体的なものが、途中に記載されておらず、こちらからは「何が分からないのか、分からない」という状態になってしまっているように感じました。
ご面倒だと思いますが・・・。
具体的に、
- どんな操作をした
- どんなコードを追加した
でも、できなかった
そういった実際になさったことを、具体的にご提示いただくと、はっきりするのではないかと思います。
今回で言えば、以下の部分ですね。
今まで、コードエディタへの切り替えをしたことが無く、
「コードエディタへ切り替えて」とのアドバイスを「ビジュアルエディタの中で【カスタムHTMLとCSS】で手打ちする」だと勘違いしていました。
自分で調べて手打ちした結果、表示がうまくいかず迷子になっていました。
こちらからは、こういうことは分からないですので。
こんな風にやったけれど、できなかった。
そう具体的に書いていただくと、「そうではなく、こうです」というお答えもできると思います。
フォーラムでのやりとりは、文字だけですし、難しいものもあります。
そういう場合は、画像（GIF動画も含めて）等をご提示いただくと伝わりやすくなったりもします。
どうやって伝えるのか。
そういう工夫が必要なのではないかとは感じました。
何にしても、解決なさったようで良かったです。
わいひら reacted
2022年10月2日 01:28
g0ng0nさんからご連絡もいただき、お問い合わせの件も解決しましたので、このトピックはクローズしてしまいます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。