MachiTagのブログ埋め込みMAPをカスタマイズ♪

2019年11月7日ブログ関連ブログ関連

先日コラボのお知らせをさせていただいた、ソーシャルロケーションサービスのMachiTagさん。

ハッシュタグ付きの便利なMAP機能があるので、当ブログのお出かけ記事でも、ちょこちょこ埋め込みさせていただくようになりました。

普通のマップだとただの地図ですが、こちらMachiTagのMAPは登録されている近くのお店とかスポットが分かる地図なので、ブロガー的に大変ありがたい機能です〜!

しかし普通に「シェア」から埋め込むと、サイズが固定されているため、レスポンシブに対応できていなかったり。。

そこで、ちょっとカスタマイズさせていただきました!

machitagのマップ

MachiTagカラーを取り入れた、ちょっとお気に入りのMAPに仕上がりました(*^^)
レスポンシブにも対応しています♪

MachiTagのMAPにならコピペでOK、応用すればMachiTagのMAP以外でも使えるHTMLとCSS、記録しておきます!

MachiTagのMAP埋め込み機能

MachiTagのMAPを埋め込む方法については、公式で使い方ガイドをご用意されていますので、まずはそちらをご確認くださいね。

関連サイト

このままシェアをしたリンクを埋め込んでもブログにはきちんとMachiTagのMAPが表示されますが、タグ内にサイズ指定「width: 600px; height: 400px」があるため、このままだとスマホでもそのサイズが表示されてしまい、画面内におさまらない……ということになります。

画面の右端が切れてしまいます

画像だとちょっと分かりにくいですが、右端がこの通り。

とりあえず「width: 100%;」にすることでレスポンシブに対応することは簡単に出来るのですが、こうするとPCは横長の地図、スマホでは縦長の地図になります。

これでも全然問題ないんですが、私はPCで見たときもスマホで見たときも横長の地図にしたかったんです。
小さいスマホで縦長の地図が表示されると地図だけで画面いっぱいになってしまって、地図より下にスクロールしたいのに地図内しかスクロールできない……なんてストレス感じたことありませんか?

ユーザビリティ的にも横長の方が良いなぁと思い、ついでに見栄えも好みにしたかったので、カスタマイズしました。

MachiTagマップカスタマイズのHTML&CSS

後ほど個別に解説しますが、当ブログで行なっているカスタマイズのコードは以下。

HTML↓

<div class="machitag-map">
<iframe src="https://(MachiTagで出力したURLそのまま、「iframe」or「指定していたらzoomの値」まで)" width="100%" height="auto" style="border:0">
</iframe>
</div>

※ CSSで指定するため、MachiTag「地図埋め込み」で出力したコードからstyleを書き換えています。

CSS↓

.machitag-map {
 padding-top: 56.25%;
 position: relative;
 border: 5px solid #ffd549;
 filter: drop-shadow(3px 3px 1px rgba(1,1,1,0.2));
}
.machitag-map iframe {
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
}
.machitag-map::before {
 content: "MachiTag";
 position: absolute;
 color: #000;
 font-size: 16px;
 background: #ffd549;
 width: 90px;
 height: 30px;
 text-align: center;
 top: -1px;
 left: -1px;
 z-index:1;
}
@media (min-width: 560px) {
 .machitag-map {
   margin:0 10% 0 0;
   border: 8px solid #ffd549;
  }
}

これで完成。

たとえば金沢駅前を中心地に設定し、「#ランチ」で検索したときのMAPは以下です。

こんな感じになります!

スマホで見たときは端から端まで100%表示。

スマホで見たmachitagのマップ

PCから見たときはうちのブログのレイアウトに合わせ、右端に余白を入れています。

PCで見たときのMAP表示

ちなみにzoomは周囲の登録件数などを考慮しつつ、場所によって数値を変えてどれくらいがベストか探り中です。。
上記のMAPは「17」にしています。

HTMLのコード解説

HTMLで書いたコードですが、まずMachiTagさんから出力したコードをclass指定するためdivなどのボックス要素で囲みます。

<div class="machitag-map">
〜〜
</div>

これでcssで、「machitag-map」を指定して見た目をカスタマイズできます。

囲まれる中身のコードですが、出力した状態のコードは以下。

<iframe
  src="https://●●=iframe"
  style="width: 600px; height: 400px; overflow:hidden; border: 0"
  ></iframe>

このままだと、PCで見てもスマホで見てもwidthが600pxで固定されます。
しかしスマホの横幅は600pxもないので、右部分が大きく切れてしまうんですね。

なのでこの部分を変更します。
CSSでいじるので、3行目を全部いったん消して、その部分を以下に変えます。

width="100%" height="auto" style="border:0"

ちなみに、「スマホで縦長表示も全然大丈夫〜!」という方は上記だけでOKです。
見た目を変えないならclass指定も必要ありませんよ〜。

CSSのコード解説

CSS結構長々と書いていますが、ひとつひとつ見ていきます。

.machitag-map {
 padding-top: 56.25%;
 position: relative;
 border: 5px solid #ffd549;
 filter: drop-shadow(3px 3px 1px rgba(1,1,1,0.2));
}

まずは「machitag-map」の大枠のカスタマイズ。

このあと書く子要素のiframeを「position: absolute;」で位置を調整するので、ここを基準にするため、「position: relative;」にします。

padding-top: 56.25%;」はアスペクト比を固定。これで16:9です。
「9÷16×100=56.25」で出しているので、この数値を変えれば他の形にできます。

たとえば、
4:3は「3÷4×100=75」なので「padding-top: 56.25%;
1:1は「1÷1×100」なので「padding-top: 100%;
などなど。「%部分」の数値を変えることで、お好きなアスペクト比に変更可!

私の表示しているMAPはPCで見たときだけmarginで右端に余白をいれているので、PCでは16:9にはなっていません(コード解説は後述)が、スマホでは16:9で表示中。

そして「border: 5px solid #ffd549;」でMachiTagカラーの線で囲んじゃいました♪
囲み線があると一気にカスタマイズ感が出ますね。

filter: drop-shadow」で全体に影をつけて、ちょっと立体感を出しています。
こちらのコードは比較的新しいため、古いIEブラウザで対応していません。影は付けたいけど気になるという方は、「box shadow」で影をつけてくださいね。

続いて、子要素です。

.machitag-map iframe {
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
}

「machitag-map」内のiframeを、「position: absolute;」にします。
これで、「machitag-map」内で調整できるようになります。

leftとtopを基準となる「0」に指定して、高さと幅を「100%」で指定すれば、16:9の地図が表示されます。

続いて、好みで見出しをつけます。

見出し部分
.machitag-map::before {
 content: "MachiTag"; /*見出しのテキスト*/
 position: absolute;
 color: #000;
 font-size: 16px;
 background: #ffd549;
 width: 90px; /*見出しの幅*/
 height: 30px; /*見出しの高さ*/
 text-align: center;
 top: -1px;
 left: -1px;
 z-index:1;
}

「machitag-map」の前に「MachiTag」と入れるCSSです。
position: absolute;」を入れることで位置調整できるようになり、MAPに重ねて表示ができるようになります。

background」はMachiTagさんカラーの「#ffd549」で♪
囲み線と一体化させるようにしました。

top」と「left」の数値を変えると位置の細かい調整ができます。「z-index:1;」で、MAPの後ろ側に行かないよう、表示優先度を上にします。

基本的にはこれで完成!

……なのですが、私には余白に関する変なこだわりが。
「PCとタブレットでみたとき、端から端まで表示されるの嫌だ!右側ちょっと空けたい!」
「スマホでみたときは端から端まであってほしい!隙間あったら気持ち悪い!」
と、ワガママなんです。笑

そこで、タブレットより大きい画面(横幅560px以上の端末)だけに適用されるよう、以下のコードも書きました。

@media (min-width: 560px) {
 .machitag-map {
   margin:0 10% 0 0;
   border: 8px solid #ffd549;
  }
}

margin:0 10% 0 0;」で、右側だけ要素内の10%余白を入れます。

ついでに、スマホとPCで囲み線の太さも変えたかったので、8pxに変えました。
これでPC・タブレットで見たときは線の太さが8px、スマホで見たときは5pxになります。

最後のCSSは完全に私の好み。
ほとんどの方は横幅100%表示したいと思うので、必要ない場合は消しちゃってくださいね。

まとめ

MachiTagさんのありがたいMAP機能。
ハニコログではほとんどの記事で「近くのスポット」として、関連記事をリンク(ブログカード)だけで載せてました。
地図があるとどのくらい近くにあるのかが感覚的に分かるので、ユーザビリティもアップしますね。

ユーザーにも優しいマップ表示

その地図をもっと使いやすく、そしてもっと「これMachiTagさんのMAPだよ〜」とアピールしたくて、ちょっとカスタマイズしちゃいました。
色々いじりたくなるタイプなので、また違うカスタマイズにしてしまうかもしれませんが……。笑

MachiTagコラボブロガーさんでMAPを載せようと考えている方も、そのまま載せても便利ですが、ぜひぜひ素敵なカスタマイズをしてみてくださいね〜!

そしてMachiTagをまだお使いでない方は、ぜひ使ってみてください。
位置情報とハッシュタグで探すという便利でアツイ新しいサービスです♪

関連サイト

◆ MachiTag
公式HP

◆ MachiTag アプリ
iOS版ダウンロード
Android版ダウンロード ※ 現時点で未対応