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

サイトのデザイン サイト制作記録

Youtube動画やGoogleマップを記事に埋め込むことは簡単ですが、単純に埋め込んだだけでは画面上で左寄せで表示されます。そのセンタリング方法を紹介します

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

Youtube動画を記事に埋め込む

まず記事への埋め込み方法を簡単に紹介します。Youtube側で下の画像の①~③の操作を行った上でワードプレス側でカスタムHTMLボックスにコードを貼り付けます。矢印の引き方が超適当なところは大目に見てください。画像の下に文章での説明も書いておきます。

記事への動画埋め込み方法の説明
  • Youtubeで埋め込みたい動画を開いた後、
    • 動画右下の「共有」をクリック
    • 共有ウインドウが開き、その左端の「埋め込む」をクリック
    • 埋め込みウインドウが開き、その右下の「コピー」をクリック。これで埋め込み用のコードがクリップボードにコピーされます。
  • ワードプレス記事作成画面に移行し、
    • 挿入したい位置にカスタムHTMLブロックを設置
    • カスタムHTMLブロック内にコードをペースト(Ctr+V)。記事作成画面ではコードが表示されるだけですが、プレビューすると動画が表示されます。

追加CSSを入力してYoutube動画をセンタリング

記事作成画面の左のメニューの「外観」-「カスタマイズ」に移動し、「追加CSS」に以下を挿入すればOKです。

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

「映像コンテナを上下のマージンは0、左右のマージンは自動(=全幅)に配置」というスタイルを設定しています。以下の記事でこの方法を知りました。

Googleマップを左右中央に配置(センタリング)。ややごまかし気味の解決法です。

Googleマップを記事に挿入

記事への埋め込み方法はYoutube動画とほとんど同じです。Googleマップ側で下の画像の①~④の操作を行った上でワードプレス側でカスタムHTMLボックスにコードを貼り付けます。

記事へのマップ埋め込み方法の説明
  • Googleマップで埋め込みたいマップを画面表示した後、
    • 操作画面内の「共有」をクリック。もし「共有」が見当たらない時は左上端の「メニュー(横三本線)」をクリックし「地図を共有または埋め込む」をクリック。
    • 「地図を埋め込む」をクリック。
    • 「HTMLをコピー」をクリック。これで埋め込み用のコードがクリップボードにコピーされます。
  • ワードプレス記事作成画面に移行し、
    • 挿入したい位置にカスタムHTMLブロックを設置
    • カスタムHTMLブロック内にコードをペースト(Ctr+V)

Googleマップのセンタリング方法は解明できずマップ横幅を記事横幅に合わせる方法で解決

追加CSSでうまくセンタリングできず、マップ横幅をブログ記事の横幅と合わせることでセンタリングする方法を紹介します。方法は2通り。

  • 簡易な方法
    • カスタムHTMLブロック内のコードの「width=”xxx”」のxxxの数字を記事幅に合わせる
  • 面倒だが正攻法
    • Googleマップで「HTMLをコピー」をクリックする前に当該ウインドウの左に表示されている「中」をクリックして「カスタム」を選択。記事横幅に合わせた数値を入力した上で「HTMLをコピー」をクリック

この方法だと記事の横幅を変更(拡げる)すると左寄せに戻ってしまいます。

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

ついでにアイキャッチ画像のセンタリング方法も紹介します。「Cocoon設定」ー「画像」に入り「アイキャッチの中央寄せ」にチェックを入れるだけです。簡単な操作だけどCocoonは設定項目が多くて目指す設定項目を見つけるのが大変ですよね。

コメント

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