「ちゃんと」Webのことを考えるNPO・個人事業主・中小企業・団体の応援メディア。フォームより無料でご相談いただけます。

WordPressで Googleマップや YouTubeなどの埋め込みコードを貼りたい

WordPressでページを制作しているとき、場所などを示すのに地図があると便利です。

幸い、Googleマップは無償で地図を貼り付けることができるので、使うことも多いのではないでしょうか。しかし、WordPressのエディターに、埋め込みコードを貼り付けると、なぜか次の図のようにコードがそのまま表示されてしまうことがあります。

これは、「編集モード」の違いによります。順番に説明していきましょう。

埋め込みコードを取得する

まずはその前に、Googleマップの埋め込みコードを取得しましょう。まずは、Googleマップを開きます。

そして、案内したい場所を探して、画面の中央に表示させましょう。そしたら、図のような詳細パネルを開きましょう。このパネルは、ランドマークとして登録されている場所ならクリックするだけ開きます。また、なにもない場所なら右クリックをして「この場所について」メニューをクリックすると、表示指せることができます。

そしたら、右端の「共有」ボタンをクリックします。

共有画面の、「地図を埋め込む」タブをクリックすると埋め込みコードが生成されます。微調整もこの場で可能なので、調整しましょう。次のようなコードを入手します。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2393.7566369714564!2d139.74359669799952!3d35.6583252192703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1502290938990″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

WordPressに貼り付ける

さて、ここで WordPressの編集画面に貼り付けるのですが、この時エディターの右上を確認してください。「ビジュアル」というモードになっていませんか?

この場合、埋め込みコードは正しく埋め込めません。なぜなら、「エスケープ」という処理が自動的に行なわれてしまい、コードがそのままコードとして表示されるように変換されてしまうため。

テキストモードで貼り付けよう

そこで、この場合は隣にある「テキスト」というボタンをクリックします。すると、ちょっと見た目が変わって、これまで画像などがエディター内に見えていたものが、次のようなコード(HTML)に変わってしまいます。

<img src=”…”…>

しかし、編集などをしなければ恐れることはありません。一番下の空いている箇所に、埋め込みコードを貼り付けましょう。

この状態で、ビジュアルモードに戻ると Googleマップが貼り付いた状態となります。記事を公開しても、正常に表示されます。

例えば他にも、YouTubeや SlideShareなど「埋め込みコード」が生成されるサービスは、どれも同じ方法を使って貼り付けることができます。

YouTubeは自動変換機能を利用しよう

WordPressは、YouTubeなど一部のサービスは、URLを貼り付けるだけで自動的に埋め込みコードに変換する機能があります。例えば、埋め込みたい映像を YouTubeで視聴しているとき、Webブラウザーのアドレスバーに表示されているURLをそのままコピーしましょう。

これを、ビジュアルモードのエディターに貼り付けてEnterキーを押すと、あっという間に埋め込みコードに変化して、埋め込まれた状態になります。便利ですね。

Googleマップは、現状サポートされていないようですが、今後のバージョンアップでサポートされる可能性もあります。それまでは、テキストモードとの切り替えを覚えておくと良いでしょう。

ちゃんとWeb.bizをフォローする

follow us in feedly