埋め込み動画やマップの大きさ

いつもサイト職人をご利用いただきましてありがとうございます。

サポートへのお問い合わせの中には、YouTube動画やGoogleマップなど、「埋め込み」に関するものもございます。サイト職人のページ編集でブロックをHTMLモードに切り替えて、取得したHTMLコードを設置すれば「埋め込み」完了。それほど難しい作業ではありませんので、ご利用のユーザー様も多くおられる印象です。今回はその大きさ変更についてお話させていただきたいと思います。

動画やマップの埋め込み方法

サイト職人管理画面から、GoogleマップやYouTube動画を埋め込む方法については、サイト職人ユーザページ「よくあるご質問」やユーザーブログでご案内していますので、下記のURLからご参照ください。

Q. Googleマップを埋め込みたい

https://www.site-shokunin.com/user/blog/third-party/googlemap.html

Q. 動画を設置したい

https://www.site-shokunin.com/user/blog/images-files/youtube.html

ブログ・YouTube動画を載せたい

https://www.site-shokunin.com/user/blog/howto/20210817.html

HTMLにおける横幅と高さの表記

GoogleマップやYouTube動画の埋め込み用のHTMLコードの中に、表示する横幅と高さの指定があります。HTMLにおける横幅と高さは次のように指定されます。

width="400" height="300"

「width」が横幅、「height」が高さです。「"（ダブルクォーテーション）」に挟まれた数字には単位が書かれていないことが多いですが、この場合の単位は「px（ピクセル）」です。1ピクセルが大体どのくらいの大きさなのかはディスプレイの規格によるので、「およそ○センチメートル」と一概には言えません。

ご参考に横幅の違う画像を以下に掲載しますのでご覧ください。

Googleマップのサイズ指定

Googleマップではコードを取得する際に、どのサイズにするか選択することができます。埋め込みウインドウの左上に「小・中・大・カスタムサイズ」から選ぶセレクトボックスがありますので、ここから埋め込みたいサイズを指定します。実際に指定される数字は下記の通りです。

小：width="400" height="300"

中：width="600" height="450"

大：width="800" height="600"

カスタムサイズはテキストボックスに任意の数字を入力します。テキストボックスの右にある「実サイズでプレビュー」から実物大の表示を確認できます。

YouTube動画のサイズ指定

YouTube動画はGoogleマップのようにコードを取得する際にサイズ指定ができません。サイズ調整が必要な場合はサイト職人管理画面からページの編集画面でブロックにコードを貼り付けた後に行います。

コードの中の「width="●●●" height="●●●"」を任意の数値に書き換えます。

この時の注意は「横幅：高さ」の比率は守ることです。比率が変わると画面にゆがみが生じることがあります。

いかがでしたでしょうか。

今回は、GoogleマップとYouTube動画の横幅と高さについてお話しさせていただきました。パソコンでの表示を想定したお話ですので、レスポンシブデザインを採用されている場合、スマホでの表示で問題が発生する場合もございます。また、お客様によってホームページのデザインや仕様が異なりますので、ご不明な点がございましたらサポートまでお気軽にお問い合わせください。

サイト職人を使っている中で疑問に思っていること、取り扱って欲しい題材などありましたら、ぜひサポートまでお知らせください。ご意見、ご感想もお待ちしております。

｜よくあるご質問TOPにもどる｜