Googleマップと電話の埋め込みを従来のエディタとグーテンベルグでする方法
こんにちは。
ブログを書いていると店舗や会社など地図情報を載せたいことや、ブログから直接電話をかける方法など出来れば便利なのに、そのくらいのこと出来ないのは恥ずかしいけれど、どうすればいいのかわからないのでとりあえずは、まあいいやとスルーしてませんか？
どうせ難しいんでしょ。
今回の記事ではGoogleマップと電話をスマホのタップでかけれるようにする方法をワードプレスの従来のエディタとグーデンベルグでのやりかたを説明します。
Gutenbergについてまとめました。
Googleマップを埋め込む方法
他のサイトではGoogleマップを埋め込んである記事をよく見かけますね。そこから経路案内までしてもらえる仕組み。
便利というか当たり前のことですよね。
その当たり前のことすらできないなんて、まあいいやなんて言ってる場合じゃないです。
自分のブログでもやってみましょう。
知ってしまえばこんな簡単なことだったの？と驚きます。
まずはGoogleマップを開きます。
GoogleマップはGoogleがインターネットを通して提供している地図。
ローカル検索サービス。広義で「GIS」という分野のソフト・サービスであり、その中のWebGISにあたる。
Wikipediaより
取り敢えず松本城にでも行きますか。
従来のエディタで地図を埋め込む
松本城を検索するとこのような画面になりますので共有をクリックします。
わかりやすいように黄色で囲んであります。
共有をクリックするとこのような画面になります。
地図を埋め込むをクリックします。
HTMLをコピーをクリックします。
コピーしたタグをワードプレスのブログのテキストモードで張り付ければマップが表示されます。
たったこれだけです。
動画も作ってみました。見てください。
Gutenbergで地図を埋め込む
カスタムHTMLのボタンを使います。
クラシックエディタと同じように埋め込みコードをコピーして貼り付けます。
これだけです。
スマホからタップして電話をかける方法
これも驚きの簡単さです。
従来のエディタで電話をかけるようにする方法
tel:と打つだけです。
0123-1234-1234という電話番号タップしただけでかけられるようになります。
電話番号を入力します。
挿入→リンクの挿入をクリックします。
tel:0123-1234-1234と入力して適用をクリック。
これで終わりです。
Gutenbergで電話をタップでかけられるようにする
段落ブロックでテキストを入力します。テキストをドラッグしてリンクをクリック。
リンク先にtel:電話番号と入力し適応をクリックします。
tel:電話番号
オマケ 画像にリンクを貼る
受話器の画像を用意して同じようにリンクの挿入をすることでもっとオシャレになりますね。
こうすると
こうなります。
あー、別におしゃれでもないですね。
がっかりしました。
しかし、画像をオシャレにすればオシャレになりますのでやってみてください。
ふきだしでやってみるとこんなになりますね。
ふきだしだけ消してみました。こんなこともできます。
最初から比べればかなりいいです。
こういう画像を作ればいいですね。
いろいろやってみましょう。
関連記事
まとめ
地図埋め込みと電話。
このふたつを覚えておけばあなたのブログも機能的になり
見てくれた人にも使いやすいページになりますね。
関連記事
スポンサードリンク
コメント