GoogleMapをレスポンシブサイトに埋め込む方法

GoogleMapをレスポンシブサイトに埋め込む方法に悩んでいましたが、ついに見つけました。

今までは、画像については、Media Queriesを利用して、スマートフォン(iPhone・Android)とPCのスタイルシート(CSS)を振り分ける単純な方法ででサイズ変更に対応していました。

GoogleMapについては、最初のレンダリング時に、勝手に地図が表示幅に収まってくれるので、気にもしていなかったのですが、別のサイトの構築案件で、レスポンシブサイトに対応せざるを得なくて困っていました。

関連エントリー

そこで、GoogleMapの地図をレスポンシブサイトに埋め込む方法

コピペOKということなのでソースも書いておきます。

HTML

<div class="ggmap">iframeのコピーしたコード</div>

CSS

.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

WordPressとMovableType

  • 投稿日:
  • by
  • カテゴリ:

WordPress管理画面
WordPress管理画面

管理していた、とあるサイトのリニューアル案件があって、MovableTypeからWordPressへ移行するプロジェクトに参加しました。おもな理由は、スマホからの投稿が手軽に行えるというものです。

MovableTypeですと、スマホやタブレットの更新は問題ありませんが、新規投稿の際にいちいちPCページで行わなければいけなかったためです。

基本的な構築とデーター移行は業者さんにお願いし、クライアント側として、細かなレイアウト修正などを私が担当しました。

PHPについては全く知識がなかったのと、デザインとプログラムがほぼ分離しているMovableTypeとは勝手が異なり、苦戦しております。

一方で、欲しい機能がプラグインでかなり多く提供されていて、凝りださなければデザインを触ることなく、プラグインのインストールだけで機能の追加が行えるなど、気に入った点もありました。

プラグインやTIPSについては、おいおい覚書代わりに書いてまいります。

Movable Typeを5.2から6.2にアップグレードしてみたところ、「システムテンプレートが見つかりません」なるエラーがでてしまいました。再構築はできているので、システムテンプレートそのものがなくなっているわけではないようです。

Movable Type4系でも起こるケースがネット情報では散見されたので、6.2へのアップグレード固有の問題ではなさそうです。

左メニューの「ツール」から「テーマーのエクスポート」を行ってから、当該テーマを再適用したところ元に戻りましたが、ウムム。

Movable Typeの標準機能でのカテゴリソートに変更

これまでは、The blog of H.Fujimotoさんの、カテゴリとフォルダを自由に並べ替えられるプラグインSortCatFldを利用いたのですが、Movable Type 5.1以降では、Movable Typeの標準機能に備わっているソート機能に変更しました。

なお、カテゴリとフォルダに加え、ブログ記事とウェブページを並べ替える場合は、SuperSortプラグインを使用すれば可能です。

Movable Typeの標準機能での動的ページ分割に変更

これまでは、The blog of H.Fujimotoさんのリアルタイム再構築プラグインを利用してページ分割を行っていたのですが、Movable Type 5.2にバージョンアップした際にプラグインエラーが出てしまい悩んでいたところ、Movable Typeの標準機能で動的ページ分割する方法が解説されていたので、この方法に変更しました。

詳しくは、前述のページをご覧いただくとして、ページネーションテンプレートのみ、現在ページを表示するように変更しました。

<mt:SetVarBlock name="pagination_navigation">
  <mt:If name="search_results">
    <mt:IfMoreResults>
      <li><a rel="prev" href="<$mt:NextLink encode_html="1"$>">過去の記事</a></li>
    </mt:IfMoreResults>
    <mt:IfPreviousResults>
      <li><span class="current"><$MTTotalPages$> ページ中 <$MTCurrentPage$> ページ</span></li>
<li><a rel="next" href="<$mt:PreviousLink encode_html="1"$>">新しい記事</a></li>
    </mt:IfPreviousResults>
  <mt:Else>
    <mt:If name="archive_template">
      <$mt:ArchiveCount setvar="total_entries"$>
    <mt:Else>
      <$mt:BlogEntryCount setvar="total_entries"$>
    </mt:If>
    <mt:If name="total_entries" gt="$entries_per_page">
      <li><a rel="prev" href="<$mt:Var name="search_link" encode_html="1" $>2">過去の記事</a></li>
    </mt:If>
  </mt:If>
</mt:SetVarBlock>
 
<mt:If name="pagination_navigation">
  <ul class="content-nav">
    <$mt:Var name="pagination_navigation"$>
  </ul>
</mt:If>

Movable Type 5.2 へのアップグレードメモ1

Movable Type 5.2 へのアップグレードテスト中ですが、いくつかの問題が。

  • 投稿画面のエディターがTinyMCEになったことで、Movable Typeの投稿画面にならぶボタンを拡張するプラグイン「CustomEditorButton2」などが一式使えなくなった。
  • 同じく画面関係で、マウスクリックでタグ付けを行える「EasyTagSelector」が使えなくなった。
  • >Facebookのウォールに反映するプラグイン「FBWallPost」が投稿画面のmt.jsと干渉して、投稿画面そのものが乱れる。

といった課題が出てきました。

Movable Type でFirefox 16 でカテゴリおよびフォルダの選択が保存できない場合(具体的には以下のケース)

  • ブログ記事編集画面でのカテゴリの選択時
  • ウェブページ編集画面でのフォルダの選択時
  • アイテムのアップロード画面でのフォルダの選択時

は、各バージョン毎(Movable Type 4.38 用、Movable Type 5.07 用、Movable Type 5.14 用、Movable Type 5.2 用)に修正ファイルを適用して下さい。

このサイトは4.29系ですが、4.38用の修正ファイルが利用できましたので参考までに。ただし、書き換えるファイルのバックアップはお取りください。

スクリーンショット

スマートフォン対応させた場合、画像の表示サイズが問題になります。いつも同じサイズで方向も同じであればよいのですが、縦・横混在の場合はなかなか面倒ですが、私のサイトでは次のcssで対応しています。

PC版では幅240px、高さ180pxで表示された画像がスマートフォン版では、冒頭のスクリーンショットのように表示されます。

幅のみを12emで指定し、高さはautoにして表示させています。

p.photo_left img,
p.photo_right img {
  width: 12em;
  height: auto;
}

CSSでMovable Typeをスマートフォンに対応させる その3

メインページ
メインページ

CSS3で採用されたMedia Queriesを利用して、スマートフォン(iPhone・Android)とPCのスタイルシート(CSS)を振り分ける方法については、メリット、デメリットがありますが、デバイスのOSやUAが何であるかよりも、どのような解像度や画面の大きさでサイトを見るという観点に立てば、こちらのほうがメリットがあると思っています。

デメリットとしては、PC向けサイトをそのまま利用して、不必要なところを"display: none;で"非表示にしているだけなので、レンダリングされなくても、ソースそのものは変わらないので、スマートフォン向けにテンプレートをシンプルにしたものに比べればパケットが多くなることでしょうか。

前々回の記事では、iPhone(スマートフォン)対応テンプレート cssTouch for MT(Movable Type)のテンプレートを利用した方法を紹介しましたが、商業利用が有償であることや、もう少しプレーンなスタイルが欲しかったので、今回は、MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawanet Tech Blog/ウェブリブログで紹介されている記事ををベースに、カスタマイズしてみます。