Youtube動画やマップをブログ記事の中央に配置する方法

Youtube動画やGoogleマップはブログに普通に埋め込むと左寄せでレイアウトされます。画面上でセンタリング（中央に配置）する方法を紹介します。アイキャッチ画像のセンタリング方法も紹介します。

Youtube動画を左右中央に配置（センタリング）

下の１行がYoutube動画をセンタリングする魔法の呪文です。（大げさ）

.video-container {margin: 0px auto;}

この記事に辿り着いた方はYoutube動画をブログに埋め込むところまでは出来ていると思います。

追加CSSを操作できる方はさっそく上の１行を追加CSSに挿入してください。それで作業完了です。記事中の全てのYoutube動画がセンタリングされて表示されるようになります。

追加するCSSコードの意味

上記コマンドにより動画ブロックが記事全幅に表示されます。

追加CSSの操作が分からない、それ以前にYoutube動画をブログに埋め込めないという方は、下の手順をどうぞ。

下の3つの操作によりYoutube動画の埋め込み用URLをコピーします。クリックする場所は画像をみてください。線を雑に引いていてすみませんが。

ワードプレスの記事編集画面で埋め込み用URLを貼り付けることでYoutube動画をブログに埋め込みます。操作は下の２つです。

プレビューで確認してください。Youtube動画がブログ記事中に表示されます。次に追加CSSを設定して動画をセンタリングします。

追加CSSの操作はいくつか方法がありますが一番簡単な方法をまとめておきます。

.video-container {margin: 0px auto;}

以上で操作完了です。プレビューして動画がセンタリングされていることを確認してください。追加CSSは１回設定するだけで全ての動画がセンタリングされるようになります。

残念ながら追加CSSで一括設定することはできません。Googleマップを埋め込む際にマップ幅をブログの幅を合わせることでセンタリングします。

Googleマップ上で下の４つの手順で埋め込み用URLをコピーしてください。クリックする場所は画像をみてください。

ワードプレスの記事編集画面で埋め込み用URLを貼り付けることでGoogleマップをブログに埋め込みます。操作は下の２つです。

プレビューしてGoogleマップの表示を確認してください。次にマップをセンタリングするための一工夫を行います。

マップとブログ記事の横幅が一致していれば、記事全幅にマップが表示されてセンタリングされているように見えます。方法は２つあります。お好みな方で。

（正攻法）Googleマップで「HTMLをコピー」をクリックする前に、当該ウインドウ左の「中」の部分をクリックして選択肢を表示させる。「カスタム」を選択し記事横幅と一致する数値を入力した上で「HTMLをコピー」をクリック。カスタムHTMLブロック内にコピーしたURLを貼り付け直す。

widthに数値を設定するとブログのレイアウトを見直してブログの記事幅を拡げると左寄せに戻ってしまいます。

width=”100％”という設定ならば記事幅を拡げるとマップ画像も拡がりレイアウトが崩れません。こだわりが特になければwidth=”100％”という設定にしてください。

Cocoonならばアイキャッチ画像も操作一つで簡単にセンタリングできます。

以上でアイキャッチがセンタリングされます。簡単です。