<ワードプレス>Youtube動画とGoogleマップをブログ記事の左右中央に配置する

イラストウエブサイトサイト制作記録

Youtube動画やGoogleマップをブログ記事に単純に埋め込むと左寄せにレイアウトされますが、一工夫すればセンタリングできます。アイキャッチ画像もセンタリングできます。

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

動画を埋め込み後、追加CSSを設定する

Youtube動画のブログ記事への埋め込み

動画埋め込み手順

STEP1. Youtube側で上の1~3の操作を行って動画URLをクリップボードにコピー

STEP2. ブログ記事の動画貼り付け位置にカスタムHTMLボックスを配置

STEP3. カスタムHTMLボックスに動画のURLを貼り付け

記事をプレビューして動画の表示を確認してください。次にセンタリングする操作を行います。

追加CSSを設定しYoutube動画をセンタリング

STEP.4 ワードプレスのダッシュボードの「外観」-「カスタマイズ」に移動

STEP5. 「追加CSS」に以下を入力【完了】

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

追加CSSによって「映像コンテナを上下のマージンは0、左右のマージンは自動(=全幅)に配置」というスタイルを設定しています。

記事をプレビューして動画がセンタリングされていることを確認してください。

追加CSSは一度設定すれば、次からはYoutube動画を埋め込むだけで自動的にセンタリングされます。

Googleマップを左右中央に配置(センタリング)

マップの幅をブログ記事の幅と合わせて埋め込む

Googleマップのブログ記事への埋め込み

マップ埋め込み手順

STEP1. Googleマップ側で上の1~4の操作を行い、埋め込み用コードをクリップボードにコピー

STEP2. ブログ記事のマップ貼り付け位置にカスタムHTMLボックスを配置

STEP3. カスタムHTMLボックスに埋め込み用コードを貼り付け

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

Googleマップと記事の横幅を一致させてセンタリング風に見せる

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

STEP4.(簡易法)カスタムHTMLブロック内のコードの「width=”xxx”」のxxxの数字を記事幅に一致させる

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

この方法はマップと記事のサイズを一致させて中央表示させているので、いずれかをサイズ変更すると左寄せに戻ってしまうので注意を。

Cocoonでアイキャッチ画像を左右中央に配置(センタリング)

Cocoonならばアイキャッチ画像も1ステップで簡単にセンタリングできます。

STEP1. 「Cocoon設定」ー「画像」に入り「アイキャッチの中央寄せ」にチェック

簡単です。

コメント

タイトルとURLをコピーしました