【Cocoon】埋め込んだYoutubeの動画を中央に表示する方法【コピペで簡単】

Cocoon

こんにちは。管理人です。

この記事では「Cocoonテーマを利用して記事内に埋め込んだYoutubeの動画を中央に表示する方法」を紹介します。

動画が左寄せになっているのは見た目が悪い

CocoonテーマはデフォルトでYoutube等の動画を埋め込むことが出来ますが、デフォルトの状態では動画が以下のように表示されます。

動画の右側に白い空間が出来ていますね。

このままでも動画は閲覧できますが、動画前後の文脈によっては記事が見にくくなりますし、何より見た目が悪いです。

動画を中央に揃えたからといって損をするわけでもないので、取り敢えずやっておくことをおすすめします。

Youtubeの動画を中央揃えにする方法

やることはとっても簡単で、以下のコードをCocoonChildのスタイルシートに追加(コピペ)するだけ。

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

コードはCocoonの公式フォーラムからお借りしました。

ぶっちゃけスタイルシートへの記述方法が分かっている方はこれ以上読み進める必要はありません。

コードをコピーしてテーマエディタへ直行してください。

逆にスタイルシートへの記述方法が分からないという方は、是非とも続きを読んでスタイルシートへの記述方法を覚えていってくださいね。

スタイルシートへのコード入力方法

それでは作業をしていきましょう。

テーマエディタに書いてるコードは絶対に消したりしないでください。
下手にコードをいじるとワードプレスが崩壊する危険があります。

まずはサイトのダッシュボードにある「外観」から「テーマエディター」を選択。



テーマの編集ページ右上の編集テーマを選択で「Cocoon Child」を選んで「選択」をクリック。



CocoonChildのスタイルシートに飛んだら右側のテーマファイルから「スタイルシート(style.css)」を選択。



ここからコードを記述していきます。

/************************************
** 子テーマ用のスタイルを書く
************************************/

の下に先ほど紹介したコードをコピペ。

※コードのスペースを消したりせず、コピーしたものをそのままペーストしてください。

コードを入力したら左下の「ファイルを更新」クリック。



以上で作業は完了です。

念のため確認してみると…。

バッチリ中央に表示されてます。

最後に

やっぱり動画が中央に表示されていると記事にメリハリが付きますね。

Cocoonは本当に万能なテーマで、CSSの記述も他テーマとは比べ物にならない程簡単に行えます。

コードをたった一度コピペするだけなので「CSSはちょっと不安」という方も是非挑戦してみてください。

それではまた。

Cocoon
フォローする
スポンサーリンク
あにすぽ
タイトルとURLをコピーしました