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

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

Youtube動画やGoogleマップをブログ記事に単純に埋め込むと画面上で左寄せにレイアウトされます。センタリングするには一工夫必要です。

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

まずはYoutube動画を埋め込む

記事への動画埋め込み方法の説明

動画URLの取得

Youtube側で上の1~3の操作を行います。

文章で説明すると、動画の画面上で「共有」をクリックして表示されたウインドウで「埋め込み」をクリックします。更に動画の埋め込みというウインドウが表示されるので右下の「コピー」をクリックします。これで動画のURLを取得できます。

動画の貼り付け場所設定

ブログ記事中の動画を貼り付けたい場所にカスタムHTMLボックスを配置します。

動画の貼り付け

カスタムHTMLボックスの中に動画のURLを貼り付けます。記事作成画面ではコードが表示されるだけですが、プレビューすると動画が表示されます

以上で完了です。参考画像の矢印の引き方が超適当なところは大目に見てください。

そして追加CSSを設定すればセンタリング完了

記事作成画面上の左のメニューの中の「外観」-「カスタマイズ」に移動します。

「追加CSS」に以下を入力すればセンタリングされて表示されるようになります。

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

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

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

まずはGoogleマップを埋め込む

埋め込む方法はYoutube動画とほとんど同じです。

記事へのマップ埋め込み方法の説明

マップコードの取得

Googleマップを表示したい地点に設定した後、操作画面内の「共有」をクリックします。共有が見当たらない時は左上端の「メニュー(横三本線)」をクリックして「地図を共有または埋め込む」をエクリックしてください。

共有をクリックして表示されるウインドウの中の「地図を埋め込む」をクリック。貼り付けた時の表示範囲を示すウインドウが立ち上がりますので、OKであれば「HTMLをコピー」をクリックします。これで埋め込み用のコードがクリップボードにコピーされます。

マップの貼り付け場所設定

ブログ記事中のマップを貼り付けたい場所にカスタムHTMLボックスを配置します。

マップコードの貼り付け

カスタムHTMLボックスの中に埋め込み用のコードを貼り付けます。

マップ横幅を記事横幅に合わせてセンタリングしているように見せる

おそらく追加CSSでセンタリングする方法はあると思いますが、調べても分からなかったので、マップの横幅をブログ記事の横幅と同じにすることでセンタリングしているように見せる方法を紹介します。やり方は2つあります。

簡易なやり方

カスタムHTMLブロック内のコードの「width=”xxx”」のxxxの数字を記事幅に合わせる

面倒だが正攻法

Googleマップで「HTMLをコピー」をクリックする前に、当該ウインドウの左に表示されている「中」をクリックして「カスタム」を選択します。

記事横幅に合わせた数値を入力した上で「HTMLをコピー」をクリック

注意点2つ

このやり方はマップの横幅を記事の横幅に合わせて見た目をセンタリングしているだけで、その後に記事の横幅を拡げるたりすると左寄せに戻ってしまいます

最近のワードプレスのバージョンだとGoogleマップを埋め込んだ状態では記事編集画面の動きが重くなります。解決方法はマップ貼り付けは最後に行うこと位です。

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

ついでにアイキャッチ画像のセンタリング方法も。Cocoonの場合です。

「Cocoon設定」ー「画像」に入り「アイキャッチの中央寄せ」にチェックを入れます。

以上で完了です。簡単な操作だけどCocoonは設定項目が多くて目指す設定がどこにあるか見つけるのが大変ですよね。

コメント

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