アメブロにスマホでグーグルマップを埋め込む方法

このブログを書いてる人
みっつん

大分県宇佐市の理容室ヘアーサロンみついし
理容師の三石利徳【みっつん】です
カットとパーマが大好き
パーマの大失敗の原因究明をブログにすくわれたことがきっかけで
髪の事で悩んでいる方やお店選びで悩んでいる方のお力になれればとブログを始めました

プライベートは二児の父

↓下のアイコンからホームページやSNSにリンクしています↓

みっつんをフォローする
完成WEB関連
スポンサーリンク
グーグルマップをブログに埋め込む方法を調べると
スマホからのやり方という記事は全くなく
パソコンから埋め込む方法しかないと気付きました
 
 今は殆どワードプレスをパソコンで更新していますが
僕もブログを始めた頃はスマホを利用してアメブロで書いていました
 
 スマホの方が好きな場所、空いた時間でチョコチョコ書けるから好きなんだけど
スマホはPCほど自由が効かないのがネック(^▽^;)
 
 
スマホはスマホの良さがありますがパソコンほど多機能じゃないですよね
 
 
このブログのメインテーマは僕のお仕事『理美容』
 
なので、マップを貼る事によって、お店の事を良く知ってもらえる
きっかけになればという想いから
ブログにマップを貼り付けたいなと思い
 
このワードプレス版ブログ作成段階で
マップの埋め込み方』等々、グーグル先生の検索のお世話になりました
 
 
そんな手探りの中でマップの埋め込みってスマホでも出来るって発見したので
ブログをもっと改良したいなと思っている人に届けばと想い
 
自分の記録も兼ねて紹介します
 

必要なアプリ

用意するアプリは、アンドロイドの方はそのままで良いのですが
IOSの方はsafariではなくchromeをインストールしてください
 
chrome
 
ブラウザによって出来る事出来ない事がありまして
今回の内容はsafariではまだ出来る方法が見つかりません

埋め込む手順

chromeを開き、一番下の⊕をタップします
 
手順
 
 
グーグルマップを検索
 
手順
 
 
右下の「…」をタップ
 
手順
 
 

PCブラウザモード

スマホの画面は見やすさを優先して出来る事を制限していますが
制限を減らす方法があります
 
その機能が『PCブラウザ機能』
 
スマホの画面では細かくなってしまい見づらくなりますが
使える機能が増えます
 
 
やり方はPC版サイトをリクエストをタップ
 
手順 手順 
 
 
すると、PCサイト画面に切り替わります
 
 
グーグルマップを選択して
 
手順
 
 
マップを埋め込みたいお店を選びます
今回は僕のお店の『ヘアーサロンみついし
 
手順
 
 
『三』をタップし、メニューが出てもう一度『三』をタップ
 
 
 
地図を共有、または埋め込むを選択
ここが、safariじゃできません!!
手順
 
地図を埋め込むを選択
手順
 
○で囲ったHTMLコードをコピーする
手順
 
スマホじゃ、中々コピーさせてくれませんが、コツとしては
右端から始めた方が僕は成功率が高いように思います
 
ちなみにタグは
 <iframe>から始まって</iframe>まででワンセットです。
どちらかが切れている場合、キチンとコピーできていません

アメブロへの埋め込み方

コピーできたら、アメブロのブログ作成で
 
HTML編集を選択
手順
 
先ほどコピーしたHTMLタグを貼り付けます
手順
 
HTML編集モードを閉じるとマップがブログに埋め込まれています
完成

マップ挿入のワンポイント

ブログの一番上や一番下にマップ入れるならともかく
文章の途中に入れるとなると
HTMLがズラズラ書かれた中にマップのタグを入れなければいけません
 
 
慣れてくればタグも読めるようになってくるけど、
 読めない方が大半だと思います
 
読めない場合、どこにタグを入れれば良いか分からないですよね
 
 
例として
「みっつん」と「グーグルマップを」の間に埋め込みたいとしますね
手順
 
この状態はHTMLモードで見ると
こんな状態になっているのでとても分かりにくいです
手順
 
そこで、どこに入れるかの目安をつけるために改行を数行入れます
手順
 
もう一度HTMLモードでみると
連続改行入れたエリアは
<div><br></div>が連続しています
手順
>と<の間に先ほどコピーしたタグを貼り付けます
 
どの  >と<  の間でも入れれますが
それ以外の場所に入れるとエラーになりますのでご注意
 
埋め込むと
手順
こんな感じで数行空いて埋め込まれます。
不要な行を削除して調整してください

埋め込んだマップを削除したい場合

<iframe から </iframe>
までの間を削除するとマップは削除できます
 
以上が
アメブロにグーグルマップをマップを埋め込む方法です

ワードプレスに埋め込む方法

基本的には、アメブロと同じ考え方です

 

投稿記事作成画面で『テキスト』を選択し

テキストモード

 

コピーしたHTMLタグを貼り付けます

HTMLタグ

 

ビジュアルに戻すとマップの埋め込み完了です

 

まとめ

webの大半がスマホの時代

 

PCは持っていないという方も大勢いるかと思います

スマホからは埋め込みできないと諦める方が一人でも減ればいいなと思います

 

※僕は基本的にはPCからの更新で、スマホはあまり使用していませんが

外出先等で緊急に編集が必要な時には必須な方法なので

知っていて損はないかと思います

 

分からない事は連絡してくださいね

WEB関連
スポンサーリンク
SNSフォローボタン
みっつんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
みっつんのブログ

コメント