MachiTagのブログ埋め込みMAPをカスタマイズ※2020年6月追記

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

「ハニコログ。」は、石川県野々市市に移住したhanikoの日常記録を綴ったブログです。
詳しくは「掲載記事等について」をご覧ください。

※当ブログ内の画像・文章などの転載はご遠慮ください。
※当ブログではアフィリエイト広告やAdSense広告を利用しています。

※2020年6月現在、MachiTagはサービスを停止されています。本記事でカスタマイズを紹介した地図表示機能についても利用できなくなってしまったため、地図表示箇所やリンクについては削除させていただきました。今後サービスが再開された場合、削除箇所は再び元に戻します。
ただしカスタマイズのCSS等はその他に応用することができるため、備忘録としても一時残しております。

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

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

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

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

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

machitagのマップ

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

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

MachiTagのMAP埋め込み機能

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

関連サイト

◆ MachiTag使い方ガイド
–【ブロガーさん必見！】MachiTagのMAPを埋め込む方法！

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

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

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

とりあえず「width: 100%;」にすることでレスポンシブに対応することは簡単に出来るのですが、こうすると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;
  }
}

これで完成。

スマホで見たときは端から端まで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; /*MachiTagカラー線の囲み*/
 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です。
数値は「（縦幅の比率）÷（横幅の比率）×100」で出しているので、「%部分」の数値を変えれば他の好きなアスペクト比で固定できます。

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

「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; /*MachiTagカラーの背景色*/
 width: 90px; /*見出しの幅*/
 height: 30px; /*見出しの高さ*/
 text-align: center;
 top: -1px;
 left: -1px;
 z-index:1; /*表示優先度アップ*/
}

「machitag-map」の前に「MachiTag」と入れるCSSです。
「position: absolute;」を入れることで位置調整できるようになり、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版ダウンロード

ブログ関連ブログ関連

Posted by haniko