サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
通知
すべてクリア
トピックスターター 2026年4月7日 12:02
不具合・カスタマイズ対象ページのURL：
https://shinbido.com/nurari-h/%e3%82%b7%e3%83%a5%e3%83%ac%e3%83%83%e3%83%80%e3%83%bc/
相談内容：
貼り付けた動画の解像度ではなく表示サイズを小さくしたいのですが、いろいろ調べても方法がわかりません
教えていただけると助かります
トピックスターター 2026年4月7日 13:02
環境情報の記載を忘れていましたので、記述します
----------------------------------------------
サイト名：nurari-h
サイトURL： https://shinbido.com/nurari-h
ホームURL： https://shinbido.com/nurari-h
コンテンツ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
スキン：/wp-content/themes/cocoon-master/skins/skin-tegakinote-green-orange/style.css
WordPressバージョン：6.8.5
PHPバージョン：7.4.8
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.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.9.0.1
カテゴリー数：10
タグ数：875
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/uploads/2025/03/IMG_2809.jpeg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.6
Flexible Table Block 3.5.0
WP Multibyte Patch 2.9.3
WP Statistics 14.16.4
XML Sitemap Generator for Google 4.1.23
----------------------------------------------
2026年4月7日 13:26
@u7010 さん。
「動画」ブロックについては仕様上ブロックエディタ上での大きさの変更ができないので、「カスタムHTML」ブロックで以下コードを挿入して対応いただくのが手っ取り早いと思います。
<video src="動画URL" controls style="max-width:480px; max-height: auto;"></video>
※「480px」は例として記載したものですので、必要に応じてご変更のほどお願いいたします。
なお、別件ですが、
WordPressバージョン：6.8.5
PHPバージョン：7.4.8
PHP 7.4については既にサポート終了しておりますので、お早めにPHP8.3以降の環境に変更いただくことをおすすめします。
問題なければWordPressについても最新版6.9.4にアップデートいただけますと幸いです。
以下プラグイン、PHP8.3以降対応は問題なさそうです。
Akismet Anti-spam: Spam Protection 5.6
Flexible Table Block 3.5.0
WP Multibyte Patch 2.9.3
WP Statistics 14.16.4
XML Sitemap Generator for Google 4.1.23
トピックスターター 2026年4月7日 14:17
教えていただいた方法で
<video src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/1.mp4" controls style="max-width:480px; max-height:auto;"></video>
これをカスタム「カスタムHTML」ブロックで記載し追加
うまく行きました
PC画面ではうまくいきましたが
スマホ画面で見ると以前に比べ大きく表示されてしまいます
動画ブロックで追加した時のHTMLは、
<figure class="wp-block-image size-large"><img src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/71u2a9v6aL._AC_SL1500_-1024x1024.jpg" alt="" class="wp-image-18307"/></figure>
です
スマホで、大きくはみ出して表示されてしまう
さらに、センタリングするときは、さらにどんなコードを入れれば良いのでしょうか？
PHPは、なんどもサーバーの方にお願いしましたが、今の所安定しているので変えることは考えていないといわれました
2026年4月7日 14:28
@u7010 さん
ご確認ありがとうございます。
PC画面ではうまくいきましたが
スマホ画面で見ると以前に比べ大きく表示されてしまいます
以下はスマホでの出力を考慮したものではないので、必要に応じてサイズの変更をご検討いただけますと幸いです。
（必要に応じてご変更のほどお願いいたします、と記載している通りです。75%、50%などのパーセンテージ指定でもOKと思います）
<video src="動画URL" controls style="max-width:480px; max-height: auto;"></video>※「480px」は例として記載したものですので、必要に応じてご変更のほどお願いいたします。
さらに、センタリングするときは、さらにどんなコードを入れれば良いのでしょうか？
例えば以下ではいかがでしょうか？
<figure style="text-align:center;"><video src="動画URL" controls style="max-width:480px; max-height: auto;"></video></figure>
動画ブロックで追加した時のHTMLは、
<figure class="wp-block-image size-large"><img src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/71u2a9v6aL._AC_SL1500_-1024x1024.jpg" alt="" class="wp-image-18307"/></figure>
です
こちら以下ではないでしょうか？
<figure class="wp-block-video"><video controls src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/1.mp4"></video></figure>
2026年4月7日 14:46
@u7010 さん
以下で解決しませんか？
<video src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/1.mp4" controls="" style="max-width:480px;width: 100%;"></video>
最大幅の指定はあるけど、video自体をどうするのか指定(width:100%)していません。
結果、表示幅が480pxより小さい場合、小さくなりません。
また、横幅基準で、高さは自動なので、max-heightは不要です。
この投稿は1週間前 2回ずつ大門未知子に変更されました
トピックスターター 2026年4月7日 14:50
70%にしてみると、スマホの方も全て解決しました
センター寄せにする時のコードの使い方、追加の仕方もとても勉強になりました
とてもわかりやすく感謝します
丁寧に教えていただき、ありがとうございます
トピックスターター 2026年4月7日 15:03
大門さんが教えてくれたコード
<video src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/1.mp4" controls="" style="max-width:480px;width: 100%;"></video>
はじめに Y.INABAさんが教えてくれたコード
<video src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/1.mp4" controls style="max-width:480px; max-height: auto;"></video>
両方を最後の方に追加してみました
"max-width:480px;width: 100%;">
大門さん
"max-width:480px; max-height: auto;">
いなばさん
PCでは変わらないのですが
スマホで見た時、はみ出るのが
"max-width:480px; max-height: auto;">
の方で。
大門さんのwidth: 100%では、すっきり収まっています
最終的にセンタリング、いなばさんのアドバイスも含め
<figure style="text-align:center;"><video src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/1.mp4" controls style="max-width:70%; max-height: auto;"></video></figure>
特に"max-width:70%; max-height: auto;"でもスッキリしました
いろいろなアプローチがあるのですね
トピックスターター 2026年4月7日 15:15
<figure style="text-align:center;"><video src="https://shinbido.com/nurari-h/wp-content/uploads/2026/04/1.mp4" controls style="max-width:480px;width: 100%;"></video></figure>
これで記載します
センタリングのコードを調べましたが、figureをつかうかdivを使うのか？
人によって違うのですか？
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。