仕事・情報

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. 100万PVへの道
  4. Photo Scapeで画像のサイズを変更する 【ブログ投稿など…
  5. Vtuber Vtuberになるには★ 必要な環境・機器
  6. ブロガーになって稼ぎたい!スタートに大切な4つのポイントを公開し…
  7. トランプ大統領の足跡【Part1】 ベネズエラの悲劇
  8. ロビンフッド 米国株 アプリ 世界経済の今後を考えてみた

コメント

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

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

コメント

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

おすすめ記事

  1. ソフィアのワイン日記 ~8~ ソーヴィニヨンブラン飲み比べ
  2. ビル・エヴァンス【Waltz For Debby 】自由と独断で選ぶJAZZ名盤
  3. みつけてテイクアウト mitukete_takeout まとめ ♡ 検索しやすくしました(^^)
  4. 【とっておきの京都】雅とわびさびの都へようこそおこしやす
  5. 生命保険の死亡保険金が支払われない?自殺は?どういうとき・・・?
  6. 人の心を揺さぶるアートは作者の狂気から生まれるのか?
  7. 意外と知らないがん保険の落とし穴
  8. 【ノマドライフ】 バリ島移住で体験した南国生活 海外移住希望者にはきっと役に立つ!
  9. ふらっと芦屋散歩~芦屋のおもたせは美味しい米粉スイーツと香り豊かな紅茶
  10. 【奥義】風水インテリアを整えてお金持ちになる 財方編
PAGE TOP
Translate »