ルートラボ・マップのレスポンシブ化

昨日のエントリーで、
「埋め込みんでいるルートラボの地図。スクリプトで埋め込まれてるため解決策が見いだせない。」
と書きましたが、何とか対処できたので自分用の備忘録としてエントリーしておきます。

ルートラボの地図をブログなどに埋め込む場合、公式ではスクリプトのコードしか提供していません。そのコードをWordPressの投稿欄にコピペすると、サイトをレスポンシブ化していてもiPhoneで見ると横にはみ出してしまいます。

150619-01

地図のタイトルをクリックすれば、画面が切り替わって全画面で地図を見ることはできるので致命傷ではないのですが、しかし見映えが悪い。

方策はないかと探っていたら、「tera-tory2・ルートラボの地図をwordpressの記事に表示させる方法」で、スクリプトのコードからiFrameのHTMLコードを生成する方法が紹介されていました。
iFrameのHTMLコードがわかれば、YouTubeムービーのようにレスポンシブ化ができます。

で、紹介された方法そのままに、ソースコードを貼り付けるのも芸がないので、function.phpに関数を設定し、ショートコードでHTMLコードを生成させることにしました。

fonction.php

//ルートラボiFrame生成
function latlonglabcode( $atts, $content = null ) {
	return '<div class="routelab"><iframe scrolling="no" frameborder="0" src="http://latlonglab.yahoo.co.jp/route/watch?id=' . $content . '&mode=paste&graph=false&mapstyle=map&maponly=false&url=\'+encodeURIComponent(location.href)+\'"></iframe></div>';
}
add_shortcode('rlab', 'latlonglabcode');

サンプルソースでは地図オプションに、標高グラフなし「graph=false」、地図の種類は通常地図「mapstyle=map」、タイトルなし「maponly=false」を設定しています。
別の設定をする場合は、falseはtrueに、地図の種類は、地形図:topographic、大きい文字:bold、モノトーン:monotone、水域図:waters、鉄道路線図:railwayとします。

HTML

[rlab]〜ここにルートラボ・マップIDを記述〜[/rlab]

ルートラボ・マップのアドレスの後半、「id=」以降のマップIDのみ記述します。

CSS

.routelab {
 	position: relative;
 	width: 100%;
	padding-top: 75%; /*表示高さ指定*/
	overflow: hidden;
	border: solid 1px #aaa;
}
.routelab iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

「overflow: hidden」を入れないとiPhoneで「padding-top」が効かず、表示がおかしくなります。
また、「border」の指定も「iframe」の方に設定すると左辺、下辺が表示されません。

150619-02

iPhoneでの表示例。

ただし、問題もあります。iPhoneを縦から横に持ち替えたり、PCブラウザの横幅を変えた場合、iFrameの枠サイズは追従して可変しますが、中身の地図は最初に読み込んだ大きさのまま。
リロードしないと枠にフィットしてくれません。もう一工夫必要ですが。現在のスキルではここまで。

3件コメントがあります

コメント

  • ルートラボのレスポンシブ化を調べていたところこちらのサイトにたどり着きました。

    ウェブデザインについて完全に素人です。

    なんとかテーマのための関数(functions.php)の場所?までたどり着きましたが、既にコードが羅列してあり、それに書き足すのか、それとも上書きするのかすらわかりません。

    ご教授頂ければ幸いです。

    2016年12月25日 03:48 AM:オレンジ戦隊改めサクラ戦隊

  • >オレンジ戦隊改めサクラ戦隊さん

    コメントありがとうございます。

    fonction.phpはWordPressにいろいろな仕事をさせるための関数の集まりです。
    なので、上書きではなく、新しい関数をどんどん追加していけばいいです。

    2016年12月25日 04:54 PM:なで王

  • ありがとうございます。

    早速試してみます。

    2016年12月25日 07:41 PM:オレンジ戦隊改めサクラ戦隊

コメントをどうぞ (Japanese text only)

すべての欄が入力必須です。メールアドレスは公開されません。
コメントはすぐに表示されません。管理者が確認してから表示されます。

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)