WPBeginnerでは長年にわたり、たくさんの動画を作成し、WordPressブログの投稿に追加してきました。しかし、動画を投稿する際、動画のセンター揃えに問題が発生することがありました。
私たちが発見したのは、動画の幅が投稿エリアより小さい場合、WordPressは自動的に動画を左側に配置し、右側に余分な余白を残すということです。もしあなたが同じ問題に直面しているなら、このガイドはあなたのためのものです。
この投稿では、WordPressで動画を簡単に中央揃えにする方法を紹介します。
なぜWordPressで動画をセンター揃えするのか？
WordPressで動画を埋め込むと、初期設定では自動的に左寄せになります。これは、動画がコンテンツに埋め込まれた外部コンテンツであるため、WordPressがどのように表示したいかを推測できないためです。
ベストプラクティスとして、自動的に左寄せになり、必要であればアライメントを調整することができる。
動画を中央に配置することで、ユーザーはコンテンツをより見やすく表示することができます。こうすることで、ページの片側に空白が目立つことがなくなり、プロらしくない印象を与えることがなくなる。
また、WordPressに直接動画をアップロードする場合、幅がコンテンツエリアより小さいと同じことが起こります。WordPressは初期設定で左寄せにします。
それでは、WordPressサイトで動画を簡単に中央揃えにする方法を見ていきましょう。ブロックエディターとクラシックエディターの両方を取り上げますので、下のリンクをクリックしてどのセクションにもジャンプできます。
WordPressコンテンツエディターで動画を中央揃えにする方法
動画をコンテンツエリアの幅いっぱいに表示したい場合は、WordPressのコンテンツエディターでYouTubeやVimeoの動画URLを直接追加するのが一番です。
まず、投稿かページを編集するか、新規追加する必要があります。コンテンツエディターに入ったら、動画へのリンクを貼り付けるだけです。WordPressが自動的に動画を埋め込みます。
次に、動画ブロックを選択し、「配置の変更」オプションをクリックします。ドロップダウンメニューから、動画の位置を選択することができます。
WordPressでは、以下のアライメントから選択することができます：
- 幅
- 全幅
- 左寄せ
- センター揃え
- 右に揃える。
中央揃え」オプションを選択する。
その後、ページや投稿をプレビューして公開することができます。
これで動画はセンター揃えになります。
しかし、何らかの理由で埋め込みコードを使用する必要があるかもしれません。その場合は、動画の埋め込みコードの周りに簡単なHTMLを追加する必要があります。
まず、動画ブロック内の3つの点線アイコンをクリックします。その後、ドロップダウンメニューから「HTMLとして編集」オプションを選択します。
次に、動画の埋め込みコードの周りに、以下のHTMLコードを入力します：
<div style="text-align:center;">
/// your video embed code goes here
</div>
カスタムHTMLを使った埋め込みコードはこんな感じになります。
これで変更を保存し、投稿やページをプレビューすることができます。これで、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でショートコードを使用するための重要なヒントもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
A Owadud Bhuiyan
if I have three YouTube videos, can I show them in the same row by adjusting the width?
Thanks for the tips.
WPBeginner Support
For multiple videos, you would want to set up multi-column content following our guide below:
https://www.wpbeginner.com/plugins/how-to-add-multi-column-content-in-wordpress-posts-no-html-required/
管理者
Tom Z
Thanks for posting this, it worked and was very helpful!
WPBeginner Support
Glad to hear our guide was helpful!
管理者
Marc
Thanks for the info!!
WPBeginner Support
You’re welcome!
管理者
S
I’m trying to center a gif that I’ve embedded and the new editor doesn’t let me edit the HTML of this type of content. How can I center this?
WPBeginner Support
You should have the image alignment tools from our article below:
https://www.wpbeginner.com/beginners-guide/how-to-add-and-align-images-in-wordpress-block-editor/
管理者
Diane
How does this work when using the Gutenberg Editor’s You Tube embed block? I tried both ways you described, but either are working.
WPBeginner Support
With the YouTube embed block there should be a section when you select the block to set a specific alignment that you can use.
管理者
Marshall
The tip sounds great, but every time I “save” and come back, it’s gone.
WPBeginner Support
You may want to try to clear any caching on your site to ensure you’re not seeing the cached version of the page.
管理者
Himanshu
You offer a lot of outstanding tricks and videos to go along. I have subscribed to your email newsletter and have seen many videos for my new website. However, your trick on aligning the video on the center did not work. Here is the issue: I shot a 15-sec video on iPhone converted into mp4 and uploaded on my host server, shows up in my Wordpress galley. Since the video occupies the entire width, I changed the video width and height to a 1/3 each. Then I pasted the align center code you showed on your video at https://www.wpbeginner.com/beginners-guide/beginners-guide-how-to-center-align-a-video-in-wordpress/#respond
But the video does not align in the center. When I look at the video in the frontend editor, I see a box with a blue line that occupies the entire width even when the video is 1/3 the width. Looks like this blue line box cannot be made smaller with any code. Is that true? Any tricks in your bag of trick that you can share?
You have been great and thanks for your videos. you made my life so much easier.
WPBeginner Support
Hi Himanshu,
You can try switching to the HTML editor to add the code. Hopefully it would work then.
管理者
Young
thank you for the article! very helpful
Deb
Thank you, this article was very helpful!
Carole
Adding the div html around the embed code worked like a charm. Thanks!
bilikid
Thanks for this. Definitely plan on trying it!!