「Googleマップ、YouTube、電話番号(スマートフォン用)を埋め込む方法」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
#contents
*GoogleMapを埋め込む方法
例えば自分のお店のホームページを作ったときに折角なら地図をのっけたいですよね。~
自分で地図を作ってみたりあるいは言葉で説明を書いておくのもいいですが、Ｇｏｏｇｌｅマップをそのまま超簡単に乗っける方法も存在します。~
それでは以下の3ステップでやってみましょう。~
1 Ｇｏｏｇｌｅマップを検索する
2 埋め込みたい場所の名称、住所を入力
3 印刷の隣にあるリンクをクリックしてウェブサイトへの地図埋め込み用 HTML コードをコピーしてhtmlの張り付ける。
4 ＨＴＭＬでサイズを好きなサイズに修正して、CSSでiframeを使ってマージン、位置などの詳細を指定
東京ディズニーランド(もっとも僕には全く縁のないまさに夢の国という感じですが…)の例を使ってみますね。
#image(width=500,google_map.png)
表示させたい所定のboxの中にコードをコピペすれば完成です。
#image(width=200,google_map2.png)
*YouTubeを埋め込む方法
こちらもＨＴＭＬだけで簡単にできてしまいます。
1埋め込みたいページにいく
2動画の下にある共有のボタンを押す
3埋め込みコードをクリックし自分のページに貼り付ける。
#image(width=500,youtube.png)
*電話番号を埋め込む方法
スマートフォンを使ってWebページを閲覧しているとき、電話番号が書かれていてそこをタップするとそのまま電話番号が入力された発信画面に移行する事がありますよね。~
折角レスポンシブウェブデザインを施してそのページをスマートフォンで観てくれて電話をかけようとしてくれる方がいてもその人が電話番号をいちいちページと発信画面を行ったり来たりしながら自分で電話番号を打っていくのは少し不便ですね。~
これはかなり簡単に解決できます。~
HTMLで電話番号を記述する時にリンク先を指定するのとちょうど同じ要領でできてしまいます。~
例えば、000-000-0000という電話番号の時、
HTML
<a href="0000000000">000-000-0000</a>
と記述するのです。
これだけですので是非ホームページにレスポンシブウェブデザインとともに装備してみてください。~
レスポンシブウェブデザインって何だろうという方はこちらの記事も是非あわせて読んでみてください。~
[[レスポンシブWebデザインについて]]
#contents
*GoogleMapを埋め込む方法
例えば自分のお店のホームページを作ったときに折角なら地図をのっけたいですよね。~
自分で地図を作ってみたりあるいは言葉で説明を書いておくのもいいですが、Ｇｏｏｇｌｅマップをそのまま超簡単に乗っける方法も存在します。~
それでは以下の3ステップでやってみましょう。~
1 Ｇｏｏｇｌｅマップを検索する
2 埋め込みたい場所の名称、住所を入力
3 印刷の隣にあるリンクをクリックしてウェブサイトへの地図埋め込み用 HTML コードをコピーしてhtmlの張り付ける。
4 ＨＴＭＬでサイズを好きなサイズに修正して、CSSでiframeを使ってマージン、位置などの詳細を指定
東京ディズニーランド(もっとも僕には全く縁のないまさに夢の国という感じですが…)の例を使ってみますね。
#image(width=500,google_map.png)
表示させたい所定のboxの中にコードをコピペすれば完成です。
#image(width=200,google_map2.png)
*YouTubeを埋め込む方法
こちらもＨＴＭＬだけで簡単にできてしまいます。
1埋め込みたいページにいく
2動画の下にある共有のボタンを押す
3埋め込みコードをクリックし自分のページに貼り付ける。
#image(width=500,youtube.png)
*電話番号を埋め込む方法
スマートフォンを使ってWebページを閲覧しているとき、電話番号が書かれていてそこをタップするとそのまま電話番号が入力された発信画面に移行する事がありますよね。~
折角レスポンシブウェブデザインを施してそのページをスマートフォンで観てくれて電話をかけようとしてくれる方がいてもその人が電話番号をいちいちページと発信画面を行ったり来たりしながら自分で電話番号を打っていくのは少し不便ですね。~
これはかなり簡単に解決できます。~
HTMLで電話番号を記述する時にリンク先を指定するのとちょうど同じ要領でできてしまいます。~
例えば、000-000-0000という電話番号の時、
HTML
<a href="tel:0000000000">000-000-0000</a>
と記述するのです。
これだけですので是非ホームページにレスポンシブウェブデザインとともに装備してみてください。~
レスポンシブウェブデザインって何だろうという方はこちらの記事も是非あわせて読んでみてください。~
[[レスポンシブWebデザインについて]]
