仕事・情報

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. 記事のサファリパーク!それはsujakuの目指すサイトです
  2. ロビンフッド 米国株 アプリ 世界経済の今後を考えてみた
  3. Vtuber Vtuberになるには★ 必要な環境・機器
  4. 【奥義】気学の方位取りでお金持ちになる 七赤金星編
  5. 日本の神様って天皇様?アマテラス様?それとも・・・
  6. 茶葉でいれた紅茶が コロナ無害化に効果ありと…
  7. お金を稼ぐという言葉のイメージ
  8. 音声入力でWordPressの投稿が驚くほど速くなる Windo…

コメント

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

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

コメント

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

おすすめ記事

  1. メディテーション【Meditation】瞑想、感謝の心
  2. 自然農法で誰でも簡単にお手軽に野菜を作ろう【秋~冬】Part1
  3. NATURAL KITCHEN おすすめ3選 (調理器具編)
  4. 新型コロナウィルス ワクチン接種とその特典やサービス 
  5. 勉強用に最適★ここまで進化した最新ipad pro + apple pencilの最強の使い方★デジタルを使いこなしてライバルに差をつけよう ipadpro12.9
  6. 【FIRE】 早期リタイアでお金に縛られない自由な生き方を目指す
  7. 音声入力でWordPressの投稿が驚くほど速くなる WindowsでもAppleでもOK!
  8. 京都の美しい四季と色彩 #1「裏葉柳」
  9. 【しなやかに強く生きる、彩り豊かな暮らし~芦屋:Payung -パユン-】 アジアン雑貨&器たちのお買い物しました
  10. 自然農法で誰でも簡単にお手軽に野菜を作ろう【春~夏】
PAGE TOP