初心者ガイド：WordPressで動画を中央揃えする方法

WordPressを使い始めたばかりの頃は、動画を中央揃えにするような簡単なことでも、驚くほど手間がかかることがありました。

WPBeginnerを通じて多くの初心者の方々を支援してきた結果、私たちは一人ではないことに気づきました。これは、私たちが最もよく受けるフォーマットに関する質問の1つです。

朗報ですが、WordPressで動画を中央揃えにすることは、特にブロックエディターを使用する場合、はるかに簡単になりました。しかし、特にYouTubeやVimeoから埋め込んだ動画を扱っている場合、多くの人がこの問題に苦労しているのを目にします。

この初心者向けガイドでは、WordPressで動画を中央揃えにする最も簡単な方法をご紹介します。

WordPressで動画を中央揃えにする理由

デフォルトでは、WordPressは埋め込まれたまたはアップロードされた動画をコンテンツエリアの左側に配置します。特に動画が主な焦点である場合、これによりページがアンバランスに見えることがあります。

動画を中央揃えすることで、この問題を解決し、レイアウトをよりクリーンで意図的なものにします。

• 視覚的なバランスの向上：レイアウトを均一に保ち、片側に不格好な空白ができるのを防ぎます。
• より強いフォーカス：ページ上の主な要素として、自然に動画に注目を集めます。
• ユーザーエクスペリエンスの向上：コンテンツの流れをよりスムーズで分かりやすくします。

これは簡単な変更ですが、ページの見た目と雰囲気を著しく向上させることができます。

それでは、WordPressウェブサイトで動画を簡単に中央揃えにする方法を見てみましょう。

ブロックエディターとクラシックエディターの両方をカバーしますので、以下のリンクをクリックして任意のセクションにジャンプできます。

WordPressコンテンツエディタで動画を中央揃えする方法

YouTubeまたはVimeoから埋め込む動画を中央揃えする場合、最も簡単な方法は、そのURLをWordPressのコンテンツエディターに直接貼り付けることです。

WordPressは自動的に専用の動画ブロックに変換します。

または、動画ブロックを追加するか、動画をWordPressメディアライブラリに直接アップロードすることもできます。

次に、「ビデオ」ブロックを選択し、「配置を変更」オプションをクリックします。ドロップダウンメニューから、動画の位置を選択できます。

WordPressでは、動画の表示にそれぞれ異なる目的を持つ次の配置を選択できます。

• ワイド幅： 動画をメインコンテンツ列の外側に拡張しますが、画面の端までは拡張しません。このオプションはWordPressテーマのサポートが必要です。
• フル幅： 動画をブラウザウィンドウの全幅に引き伸ばします。‘ワイド幅’と同様に、これもテーマのサポートに依存します。
• 左揃え： 動画をコンテンツエリアの左側に配置します。これは多くのブロックのデフォルトの配置です。
• 中央揃え： 動画をコンテンツエリアの中央に正確に配置し、明確な焦点を作成します。これはこのガイドで焦点を当てているオプションです！
• 右揃え： 動画をコンテンツエリアの右側に配置します。

「中央揃え」オプションを選択してください。

その後、ページを公開または投稿をプレビューして公開できます。

動画は中央揃えされます。

ただし、特別な再生オプション（特定の時間に動画を開始するなど）を追加したい場合や、WordPressが自動的に埋め込めない動画プラットフォームを使用している場合は、完全な埋め込みコードを使用する必要があるかもしれません。

既に動画ブロック（YouTubeやVimeoなど）があり、カスタムコードを追加する必要がある場合は、ブロックツールバーの3点アイコンをクリックし、「HTMLとして編集」を選択してください。

WordPressが自動的にサポートしていないプラットフォームから埋め込んでいる場合は、まずカスタムHTMLブロックを追加してから、埋め込みコードを貼り付けます。

次に、動画の埋め込みコードの周りに次の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でも私たちを見つけることができます。