WordPressを使い始めたばかりの頃は、動画を中央揃えにするような簡単なことでも、驚くほど手間がかかることがありました。
WPBeginnerを通じて多くの初心者の方々を支援してきた結果、私たちは一人ではないことに気づきました。これは、私たちが最もよく受けるフォーマットに関する質問の1つです。
朗報ですが、WordPressで動画を中央揃えにすることは、特にブロックエディターを使用する場合、はるかに簡単になりました。しかし、特にYouTubeやVimeoから埋め込んだ動画を扱っている場合、多くの人がこの問題に苦労しているのを目にします。
この初心者向けガイドでは、WordPressで動画を中央揃えにする最も簡単な方法をご紹介します。
WordPressで動画を中央揃えにする理由
デフォルトでは、WordPressは埋め込まれたまたはアップロードされた動画を左揃えにします。エディタは各ページで好みのレイアウトを推測できないため、これは安全な選択です。
ただし、動画を左揃えのままにしておくと、しばしば不格好な空白が生じ、デザインがアンバランスに感じられることがあります。一方、中央揃えの動画は、訪問者の注意を引く明確な焦点を作り出します。
動画を中央揃えにすることで、ユーザーの視線を誘導し、はるかに優れた視聴体験を提供できます。
それでは、WordPressウェブサイトで動画を簡単に中央揃えにする方法を見てみましょう。
ブロックエディターとクラシックエディターの両方をカバーしますので、以下のリンクをクリックして任意のセクションにジャンプできます。
WordPressコンテンツエディタで動画を中央揃えする方法
動画をコンテンツエリアの幅いっぱいに表示したい場合は、YouTubeまたはVimeoの動画URLをWordPressコンテンツエディタに直接追加するのが最善の方法です。
まず、投稿またはページを編集するか、新しい投稿またはページを追加する必要があります。コンテンツエディターに入ったら、動画のリンクを貼り付けるだけです。WordPressは自動的に動画を埋め込みます。
次に、「ビデオ」ブロックを選択し、「配置を変更」オプションをクリックします。ドロップダウンメニューから、動画の位置を選択できます。
WordPressでは、次の配置を選択できます。
- ワイド幅
- フル幅
- 左揃え
- 中央揃え
- 右揃え
「中央揃え」オプションを選択してください。
その後、ページを公開または投稿をプレビューして公開できます。
動画は中央揃えされます。
ただし、特別な再生オプション（特定の時間に動画を開始するなど）を追加したい場合や、WordPressが自動的に埋め込めない動画プラットフォームを使用している場合は、完全な埋め込みコードを使用する必要があるかもしれません。
その場合は、動画の埋め込みコードの周りに簡単なHTMLを追加する必要があります。
まず、動画ブロックにある3つのドットアイコンをクリックする必要があります。その後、ドロップダウンメニューから「HTMLとして編集」オプションを選択できます。
次に、動画の埋め込みコードの周りに次のHTMLコードを入力できます。
<div style="text-align:center;">
/// your video embed code goes here
</div>
カスタムHTMLを追加した埋め込みコードは、このようになります。
これで変更を保存し、投稿またはページをプレビューして、動画が完全に中央揃えされていることを確認できます。
もう1つのアプローチは、動画の幅を手動で増やしてコンテンツエリアに合わせることです。これを実現するには、埋め込みコードに「width」パラメータを追加または変更する必要があります。
<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
クラシックエディターで動画を中央揃えする方法
クラシックエディタを使用している場合は、投稿を編集するか新しい投稿を作成することで、動画を中央揃えにできます。
エディターに入ったら、テキストビューに切り替えます。次に、以下のHTMLコードを入力します。
<div style="text-align:center;">
/// your video embed code goes here
</div>
「ここに動画の埋め込みコードを入力」を動画の埋め込みコードに置き換えるだけです。
これが完了すると、次のようになります。
これで、ページのプレビューと公開ができます。
中央揃えされた動画を確認するには、ウェブサイトにアクセスしてください。
動画の中央揃えに関するよくある質問
WordPressで動画を中央揃えすることについて、読者からよく寄せられる質問をいくつかご紹介します。
「ワイド幅」と「フル幅」の配置オプションが表示されないのはなぜですか？
「ワイド幅」と「フル幅」のオプションは、WordPressテーマでサポートされている必要があります。配置ツールバーに表示されない場合は、現在のテーマで有効になっていないことを意味します。標準の「中央揃え」オプションは引き続き使用できます。
動画を中央揃えすると、モバイルデバイスでの表示に影響しますか？
いいえ、標準のWordPressブロックエディタツールを使用して動画を中央揃えすることは、完全にレスポンシブです。WordPressは自動的にスケーリングを処理し、タブレットやスマートフォンなどの小さい画面でも動画がうまく表示されるようにします。
WordPressに直接アップロードした動画を中央揃えできますか？
はい。埋め込み動画とメディアライブラリに直接アップロードした動画の両方で、プロセスはまったく同じです。ビデオブロックを選択し、配置ツールバーを使用して中央揃えするだけです。
この記事がWordPressで動画を中央揃えする方法を学ぶのに役立ったことを願っています。また、WordPressの投稿に特殊文字を追加する方法や、WordPressでショートコードを使用するための重要なヒントに関するガイドも参照してください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
デビッド・リム
ありがとうございます。探していた記事です。問題が解決しました。
アワドゥド・ブイヤン
3つのYouTube動画がある場合、幅を調整して同じ行に表示できますか？
ヒントをありがとうございます。
WPBeginnerサポート
複数の動画の場合は、以下のガイドに従って複数列のコンテンツを設定することをお勧めします。
https://www.wpbeginner.com/plugins/how-to-add-multi-column-content-in-wordpress-posts-no-html-required/
管理者
トム Z
これを投稿してくれてありがとう、うまくいってとても役に立ちました！
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
マーク
Thanks for the info!!
WPBeginnerサポート
どういたしまして！
管理者
S
埋め込んだGIFを中央揃えにしようとしていますが、新しいエディタではこのタイプのコンテンツのHTMLを編集できません。どうすれば中央揃えできますか？
WPBeginnerサポート
下記の記事にある画像配置ツールをご利用ください。
https://www.wpbeginner.com/beginners-guide/how-to-add-and-align-images-in-wordpress-block-editor/
管理者
ダイアン
GutenbergエディターのYouTube埋め込みブロックを使用する場合、これはどのように機能しますか？説明された両方の方法を試しましたが、どちらも機能しません。
WPBeginnerサポート
YouTube埋め込みブロックを使用すると、ブロックを選択した際に特定の配置を設定できるセクションが表示されるはずです。
管理者
マーシャル
このヒントは素晴らしいようですが、「保存」して戻るたびに消えてしまいます。
WPBeginnerサポート
サイトのキャッシュをクリアして、キャッシュされたバージョンのページを見ていないことを確認することをお勧めします。
管理者
ヒマーンシュ
あなたは多くの素晴らしいトリックと動画を提供しています。私はあなたのメールニュースレターを購読しており、新しいウェブサイトのために多くの動画を見てきました。しかし、動画を中央に配置するあなたのトリックは機能しませんでした。問題は次のとおりです。iPhoneで15秒の動画を撮影し、mp4に変換してホストサーバーにアップロードしました。Wordpressギャラリーに表示されます。動画が全幅を占めるため、動画の幅と高さをそれぞれ1/3に変更しました。次に、あなたの動画で示した中央揃えコードをhttps://www.wpbeginner.com/beginners-guide/beginners-guide-how-to-center-align-a-video-in-wordpress/#respondに貼り付けました。
しかし、動画が中央に揃いません。フロントエンドエディターで動画を見ると、動画の幅が3分の1であっても、全幅を占める青い線が入ったボックスが表示されます。この青い線ボックスは、どのようなコードを使っても小さくできないようです。本当ですか？何か秘訣があれば教えていただけますか？
あなたは素晴らしかったです、そしてあなたの動画に感謝します。私の人生をずっと楽にしてくれました。
WPBeginnerサポート
こんにちは、Himanshuさん。
HTMLエディターに切り替えてコードを追加してみてください。そうすればうまくいくはずです。
管理者
若い
記事をありがとうございます！とても参考になりました。
Deb
ありがとうございます。この記事は非常に役立ちました！
Carole
div HTMLを埋め込みコードの周りに追加したところ、見事に機能しました。ありがとうございます！
bilikid
これについてありがとうございます。ぜひ試してみるつもりです!!