ブログでお店を紹介する時の地図、お店情報の載せ方




frogs-1037660_640

少しずつパソコン、ブログに慣れてきた、茨城のおじさんブロガー

清宮真(@makoto_seimiya)です。

今回は、地域ブログを書く、地元の美味しいお店を紹介する時に、お店の場所、地図、情報をブログに埋め込む方法を、いばらじお♪

Googleマップをブログに埋め込む方法

こんな事はみんな分かっているのかも知れませんが、僕は知りませんでしたから、きっと誰かの役に立つのではないかと思い書いてみますね~

2016-09-09

まずは、紹介したいお店をGoogleで検索します。

すると出てきたページの右上に地図が出ますね。コチラをクリックしてください。

ちなみに、今回例に挙げた 水戸市のカルマ は僕が大好きなインド料理店です。

検索で食べログの次!?、2位に出るじゃないですか!!(嬉しいけど、旧ブログのFC2・・・)

2016-09-09 (1)

上の画面が出たら、「共有」って所をクリックします。

2016-09-09 (2)

▲「地図を埋め込む」をクリック。

2016-09-09 (3)

地図のサイズも選ぶ事が出来ます。

小だと小さ目な地図になり、中だどブログの幅いっぱいになります。

中サイズは、実際は幅広なんだけど、livedoorブログの場合自動的にブログの幅に合わせてくれるみたいです。(たまにレイアウトからはみ出します)

旧ブログのFC2の時は大きくサイズオーバーしてレイアウトが崩れたので、小を選ぶと良いのかも知れません。

▼地図がブログからはみ出してレイアウトが崩れてしまう時はコチラを試して!

【初心者でも簡単!】Googleマップで取得した地図がブログからはみ出す時の対処法

上の記事で紹介した方法なら、ライブドアブログでレイアウト崩れません!

2016-09-09 (5)

▲青くなった文字列を右クリックしてコピーします。

これをブログの編集画面に貼りつけると、こんな感じになります。

※HTML編集で書いている事前提です。HTML編集じゃないと反映されません。

あと、このままでも良いんですが、このサイズだと横幅は良いけど、縦が長すぎて下の文を読みに行くのにスクロールしにくい場合があります。(スマホの場合)

▲一工夫すると、ちょうどいい感じに!

コピーした文字列から「height=”450″」って所をさがして手動で「height=”300″」にしてあげると読みやすくなりますよ~

お店の情報を含んだ地図を埋め込む

これは先日覚えた事なんですが、食べログの店舗情報を含んだ地図をブログに埋め込む方法。

コレどうやって貼っているのか全然分からなかったんですよね~

京都で面白い地域ブログ運営している 「ごりらのせなか」 さんに教えてもらっちゃいましたw

やり方は以下のように簡単です。

2016-09-09 (9)

食べログの店舗情報ページの下の方に「ブログに店舗情報を貼る」って所があるのでクリック。

2016-09-09 (10)

赤枠の文字列をコピーしてブログのHTML編集画面に貼りつければOKです。

コレがあると、ブログを読んでくれた人にお店の場所、情報が分かりやすくなりますね。

だだし、スマホ版CSSがいじれないライブドアブログの場合、スマホ表示のレイアウトからはみ出すみたいで残念です・・・。(scriptタグで実行してるからダメらしい)

よかったら参考にしてみてくださいね!!

2016-09-09 (12)

▲こんな感じのです。

ワードプレスならスマホ表示もちゃんと設定できる(憧れ~)

にほんブログ村 地域生活(街) 関東ブログ 茨城県情報へ
にほんブログ村

がんばって書いてます。応援してちょ!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でいばらじお♪をフォローしよう!



コメントを残す

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

ABOUTこの記事をかいた人

清宮 真

茨城のおじさんブロガー いばらじお♪を運営している清宮真です。 陽気なおじさんがラジオパーソナリティのように茨城の魅力を届け読む人の気持ちを明るくします。 食いしん坊なので茨城県内の食レポ多め。 3人の子どもの子育て中につき、こどもと一緒に行けるお出かけスポットやイベントも紹介しますよ~ 好みの記事があると幸いです。 どうぞよろしくお願いいたします。