WordPressの記事でYahoo!地図を表示する方法

いわゆる静的なHTMLサイトなどでは、Yahoo!地図で取得したコードをそのままサイト(ページ)などに貼り付けるだけでYahoo!地図が表示されます。

地図の利用方法:Yahoo!地図の地図をサイトで利用する方法

WordPressでも記事の中(エディタ)でYahoo!地図で取得したコードをそのまま貼り付けることで地図を表示することができます。

しかし、JavaScript圧縮系プラグインを利用していると表示されないことがあります。そのようなときは、圧縮しないで使うと良いのですが、それ以外の方法で表示する方法について書きます。

Yahoo!地図の地図をWordPressで表示させる方法

Windows付属のメモ帳、またエディタを用意してサイトを表示させるためのHTMLタグを入力して、その中にあるbodyタグの中でYahoo!地図で取得したscriptタグを貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo!地図</title>
</head>
<body>
ここにYahoo地図のコードを貼り付ける
</body>
</html>

メモ帳の場合、一旦HTMLファイルとして保存したあとにブラウザ(IE、Google Chrome、Fire Fox)で開きます。また、エディタで保存しなくてもブラウザで表示させる機能がある場合は、そのままブラウザで表示させます。

IEで地図を表示させるコードを取得する手順

地図を表示させた状態で、キーボードにある「F12」ボタン(または「ツール」⇒「F12開発ツール」)で開発ツールを開き、「DOM Explorer」を表示させます。

DOM Explorerに地図を表示させているiframeタグがあるので、それをクリックするとフォーカスさせるので右クリックでiframeタグのコードを全てコピーします。

WordPresの投稿エディタを開いて「テキスト」にしてからコピーしたコードを貼り付けて完了です。確認のためにプレビューで表示させることができたら成功です。

yahoo-chizu7

Google Chromeで地図コードを取得する手順

地図を表示させた状態で、キーボードの「F12」で開発ツールを立ち上げて、「Elements」を開くとiframeタグがあるのでコピーします。

コピーしたコードをWordPressのエディタをテキストにして貼り付けてページを表示させて地図が表示されれば成功です。

yahoo-chizu8

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です