GoogleMapの埋め込み 

 サイトに埋め込むのは googleMapを表示して共有ボタンから埋め込みます。スマホやタブレットで横向きや縦向きに表示させるため100%にします。

 スタイルシート (css)を追加して本文の html にも追加します。


.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

table{
width:100%;
table-layout: fixed;

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}
}

● このコードはグーグルマップとYoutubeと 四角の表と フェイスブックの埋め込みがまとまっています。

 googlemap(地図)だけの場合は赤い文字をコピーしてcssに追加してください。

[theme]-[ omotenashi ]-[css ]-[style.css]の最後の部分に追加する

 

スタイルシートを追加する
スタイルシートを追加する

 

 赤いところを追加

 <div class="ggmap"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.7074113693398!2d135.52376681523182!3d34.68733328043784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e0cd5c283afd%3A0xf01d07d5ca11e41!2z5aSn6Ziq5Z-O!5e0!3m2!1sja!2sjp!4v1590901111481!5m2!1sja!2sjp" width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></div>

 

 

-