MENU

MapPress Easy Google Mapsをレスポンシブ表示にする方法

APIやらなんやら、さっぱり詳しくない私にとって貴重なプラグインです。

目次

地図の代表的プラグイン

このプラグイン、地図でちょっとした観光案内をしたくて導入しました。

JAVAスクリプトやら、APIやら知識のまったくない私にとっては、ありがたいプラグインです。

ただ、PCで表示が小さいので、「地図をもっと大きくできないかな~」と悩んでいました。

いろいろ調べた結果、レスポンシブ対応の表示設定の方法を発見したのでご紹介します!

 

レスポンシブ対応の設定方法

レスポンシブ対応にする方法は以下のとおりです。

まず、管理画面から「MapPress」を選択。

2016-08-03_123112

そして、初期設定のマップサイズで「太さ」を「100%」にします。※「Height」(高さ)は具体的な数字を入力します。

2016-08-03_122310

この状態で「変更を保存」すると、PC画面では以下のように表示されます。

sample

一方、スマホでは以下のように表示されます。

Screenshot_2016-08-03-12-35-55

きちんとレスポンシブ対応にすることができました。

ちなみに、「太さ」と「Height」を両方とも100%に設定すると、画面上で地図がつぶれて表示されてしまいました。とりあえず「太さ」だけ「100%」に設定して、「Height」はお好みに応じた具体的な数字を入れたほうが良さそうです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ショウのアバター ショウ うつ病逆転副業パパ

うつ病逆転副業パパです!

コメント

コメント一覧 (1件)

コメントする

目次