仕事・情報

WordPressに地図を貼るとユーザーに喜ばれてアクセスアップに繋がる!

記事に地図を貼る方法

 

ブログでお店の紹介するのに地図を貼ったらユーザーに喜ばれるよね。

でもどうやったら良いのか、やり方が分からない。

どうすればよいのかな?

WordPress に地図を貼るのはとても簡単にできます。
地図があれば読者に喜ばれてアクセスアップにもなるので是非あなたもやってみてください。

記事と地図の幅を合わせる方法も解説していきます

 

それでは早速、地図の貼り方を解説していきます。

方法は2通りあるので好きな方をえらんでください。

  • プラグインを使う方法
  • 記事にHTMLを貼り付ける方法

ラグインを使う方法

設定は簡単で以下の流れになります。

  • ワードプレスにプラグインAdvanced Editor Toolsをインストール
  • 「Googleマップ」からコードをコピー
  • ワードプレス投稿にコードを貼り付ける

それでは実際の画面で解説していきます。

ステップ1 Advanced Editor Toolsをインストール


最初にAdvanced Editor Toolsをインストールします。

※既にこのプラグインをインストールされてる方はこの工程は不要です。

ワードプレス左のメニューから
「プラグイン」 → 「新規追加」を選ぶ

次の画面で
キーワードの枠内に Advanced Editor Tools と入力する。

するとプラグインが検索結果に出てくるので「今すぐインストール」を押す。

インストールが完了すると「有効化」というボタンに変わるので押して有効化する。

これでAdvanced Editor Toolsのインストールは完了です。

ステップ2 Googleマップでコードをコピーする


次に Googleマップ で目的の場所のコードをコピーします。

地図上で「目的の場所」をクリックします。

すると左に窓が現れるので「共有」をクリックします。

「共有」の小窓が出るのでタブ「地図を埋め込む」をクリックする。

小窓が地図に変わるので、左の「サイズ」ボタンをクリックして、ブログに貼りたい大きさを選択する。

最後に右上の「HTMLをコピー」をクリックする。

これで地図のコードコピーは完了です。

ステップ3 ワードプレスの投稿でコードを貼る


次にワードプレスの投稿画面を開きます。

地図を貼りたい位置でクリックします。

上部メニューの「挿入」をクリックします。

選択メニューが出るので、「メディア」をクリックします。

小窓が出るのでタブ「埋め込む」をクリックします。

小窓の枠内で右クリック→貼り付け

最後に下の「OK」ボタンをクリックします。

これで地図が記事に貼られました。


HTMLを直接埋め込む方法

設定は簡単で以下の流れになります。

  • 「Googleマップ」からコードをコピー
  • ワードプレス投稿にコードを貼り付ける

それでは実際の画面で解説していきます。

ステップ1 Googleマップでコードをコピーする


手順は先ほどの解説と同じですがここでも書いていきます。

Googleマップ で目的の場所のコードをコピーします。

地図上で「目的の場所」をクリックします。

すると左に窓が現れるので「共有」をクリックします。

「共有」の小窓が出るのでタブ「地図を埋め込む」をクリックする。

小窓が地図に変わるので、左の「サイズ」ボタンをクリックして、ブログに貼りたい大きさを選択する。

最後に右上の「HTMLをコピー」をクリックする。

これで地図のコードコピーは完了です。

ステップ2 ワードプレスの投稿でコードを貼る


次にワードプレスの投稿画面を開きます。

地図を貼りたい位置でクリックします。

上部タブの「テキスト」をクリックします。

テキスト画面に切り替わります。

クリックした場所にカーソルが点灯しているので、そこで右クリック→貼り付け

マップでコピーしたHTMLコードが張られたら、右上のタブ「ビジュアル」をクリックします。

これで地図が記事に貼られました。


をサイトに合わせる

Googleマップから取得した「HTMLコード」をそのまま貼り付けると、スマホなどで見た時に記事と地図のサイズが合っていない事があります。

これを合わせていきます。

右上のテキスト・タブから「HTMLコード」の幅(width)を100%に変更します。

これで記事と地図の幅が合いました。


とめ

記事にGoogleマップがあるとユーザーが経路を確認出来てとても便利になります。

ユーザーの利便性が良くなればブログのアクセスアップにも繋がりますので、是非とも活用していきましょう。

 

 

 

 

オレンジ

投稿者の記事一覧

ossans倶楽部 オレンジ

「面白いもの、好奇心をそそるもの」をテーマにライフ・アイテム・ノマドスタイル・仕事・遊びなど のコンテンツをリリースするクリエイター集団です。

あなたのお勧めグッズがあったら教えてください!このブログ記事で取り上げていきます。

関連記事

  1. 音声入力でWordPressの投稿が驚くほど速くなる Windo…
  2. 茶葉でいれた紅茶が コロナ無害化に効果ありと…
  3. ロビンフッド 米国株 アプリ 世界経済の今後を考えてみた
  4. 日本の神様の真相に迫る!!インタビューするために江戸時代へタイム…
  5. 100万PVへの道
  6. これからの5年どのように行きましょうか?
  7. Photo Scapeで画像のサイズを変更する 【ブログ投稿など…
  8. 記事のサファリパーク!それはsujakuの目指すサイトです

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

コメント

楽しく遊ぶスタッフ募集中です

おすすめ記事

  1. タイニーハウス 秘密基地を建てて遊ぼう【究極の隠れ家】
  2. お金を稼ぐという言葉のイメージ
  3. sjaku座談会【youtube動画】part4
  4. 損する保険は嫌 保障と資産形成できる保険を知ってますか 
  5. シンプルなのにどんどん完全自給農業があなたにも出来る!!【冬~春】
  6. 不織布マスクVS布マスク マスクを選ぶ参考にしてみてください
  7. ビル・エヴァンス【Waltz For Debby 】自由と独断で選ぶJAZZ名盤
  8. 京都の美しい四季と色彩 #5「小麦色」
  9. 自然農法で誰でも簡単にお手軽に野菜を作ろう【春~夏】
  10. サウンドヒーリング【Sound healing】音に癒される
PAGE TOP
Translate »