【簡単！】ブログにYouTube動画とMAPを載せてみよう！

こんにちは、デザイナーの中江です。

今回はブログでの動画や地図の載せ方をお伝えしたいと思います！

 

動画や地図を載せる専用の機能がついていると良いのですが、ブログやコラムのページは機能がシンプルに作られていることが多いです。

 

でも、たまに動画やMAPも載せられたらいいのにな〜というタイミングもあるかと思います。

載せる方法はとっても簡単なので、ぜひご活用ください。

 

私たちが作成するWEBサイトでよく使われるCMSの「WordPress」を例にご説明したいと思います。

（他のCMSやブログサービスをご利用の方も、同じようにできると思います。）

 

 

Youtubeの動画を載せる

【1】載せたい動画をYoutubeで開きます

動画の下に、「共有」のボタンがあるため、そちらをクリックします。

 

 

【2】「埋め込む」をクリックします

 

 

【3】コードが表示されるので、コピーしてください。

 

 

【4】ここからはWordPress（ブログ執筆ページ）での作業です。

コードを貼り付けるために、「テキストモード」に変更してください。

 

 

【5】そこに先ほどのコードを貼り付ければOK！

動画がこのように表示されます。

※Youtubeで埋め込みを不可に設定している場合、動画が再生されないため、自身の動画の場合はYoutubeにログインして設定を変更してください。

 

 

小ネタ

動画を途中から見てもらいたい！という場合は「開始位置」の部分から、動画の始めを指定できます。

動画の何分何秒の位置からスタートするか、入力してください。

左側に出ている動画部分で、再生テストもできますので、確認しながらスタート位置を指定すると良いですよ！

 

 

GoogleMapを載せる

【1】まずはGoogleMapにアクセスし、伝えたい住所の部分にピンを立てます。

▶︎GoogleMap

→施設がGoogleMapに登録されている場合

施設の名前で検索をすると、自動的にピンが立ちます。

 

 

→施設がGoogleMapに登録されていない場合

ピンを立てたい場所をクリックし、下に表示される住所をクリックしてください。

 

 

【2】目的の場所のGoogleMapページにアクセスしたら「共有」をクリックします。

 

 

【3】「地図を埋め込む」を選択し、サイズを選択し、HTMLをコピーします。

サイズで「カスタム」を選択すると、自分で大きさを自由に変更することができます。

「実サイズでプレビュー」をして確認しながら、大きさを決めましょう。

設定したら、HTLMをコピーします。

 

 

 

【4】ここからはWordPress（ブログ執筆ページ）での作業です。

コードを貼り付けるために、「テキストモード」に変更してください。

 

 

【5】そこに先ほどのコードを貼り付ければOK！

Mapがこのように表示されます。

 

 

小ネタ

左下にある「航空写真」をクリックしてからコードを発行すると、航空写真でのMapを貼り付けることができますよ。

写真の方がわかりやすい場合は是非ご利用ください。

 

 

おわりに

設置方法がわかると、意外と簡単な作業ですよね！

動画やMapがあるのと無いのでは、ブログのわかりやすさが全然違うので、是非ご活用いただければと思います。

最後まで読んでくださり、ありがとうございました。