MT導入基礎知識

Movable Typeとは?

ドメイン取得とサーバー確保

Movable Typeをインストールしよう

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

どんどんモジュール化しよう

pingを有効に活用しよう

テンプレートの基本的な構成

デザインのカスタマイズ

カスタマイズの前に

タイトルバナーの雰囲気をかえる

タイトルバナーを画像にする

H1~H6タグの見え方

サイトの背景を変更する

文字の色や大きさをかえる

サイドバーの見た目をかえる

表示内容のカスタマイズ

カテゴリーの並び順序を変更する

エントリーの並び順序を変更する

最近のエントリー一覧を表示する

サイドバーを右から左に変更する

サイドバーに表示する要素を変更する

カテゴリー一覧にエントリーも表示する

カテゴリーページにも最新エントリー一覧を表示する

入れておきたいプラグイン

cutfirstchar⇒変数タグの最初の数文字を削除する

CatEntries⇒特定カテゴリーを表示させないようにする

Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る

MailForm⇒メール問い合わせフォームを表示する

Mapper⇒地図画像を表示する

TinyMCE⇒ワープロ感覚でエントリー記事が作れる

参考になるサイト・情報

WWWの基本を勉強する参考サイト

Movable Typeに関するサイト

ブログアクセスアップにつながるランキングサイト

相互リンク

エラーが起きたときはチェックしてみよう

よもやま話

サイト立ち上げのきっかけ

ブログランキングに登録

メールフォームが機能しない・・・

グーグルマップを表示してみる







« グーグルマップを表示してみる | メイン | サイドバーの見た目をかえる »

Mapper⇒地図画像を表示する




会社のホームページといえば、所在地も記載しますよね。
せっかくなら地図でわかりやすく表示したいものの、地図なんて自分ではなかなか作れるものではありません。

そこで重宝するのが、今回ご紹介する『Mapper』プラグインです。
このプラグインは、住所は緯度経度などの情報をもとに、Google Mapなどの地図画像を無料で表示してくれます。


■『Mapper』プラグインの設置方法

1.Google Maps API Keyを取得する
  ⇒ Google Maps API
英語でいろいろ書かれていますが、通常のインターネットサイトへの利用であれば問題ありません。
※イントラネットや違法性のあるサイトには利用できません。
「Sign up」ページ最後のチェックボックスにチェックし、Movable TypeをインストールしているURL(ブログのURLではないので注意)を入力して「Generate API key」をクリック⇒googleアカウントにログインしていない場合は、メールアドレスと適当なパスワードでアカウント作成・ログイン⇒キーコードが発行されます。

2.Mapper.zipをダウンロードし、解凍する
  ⇒ Mapperダウンロード:Hirotaka Ogawaさんのサイトへ

3.Mapper.plをMovable Typeのpluginsディレクトリにコピーする

4.管理画面「プラグインの設定」で、Mapperプラグインの「設定を表示」し、1で取得したAPI Keyを入力して<変更を保存>する

5.地図を表示させたい場所を <MTMapper>~</MTMapper> タグで囲み、 [map:address] で地図の表示先を指定する(詳細後述)
・MTMapperタグには次のオプション(アトリビュート)を付記することができます。
  width="size" :描画する地図の横幅を指定。デフォルトは400px。
  height="size" :描画する地図の縦幅を指定。デフォルトは300px。
  zoom="zoom-level" :描画する地図のズームレベルを指定。デフォルトは15。
・address部分(地図表示先)は「東京都○○区○○1-1-1」のような住所表記のほか、「x経度y緯度(例:x139.729116y35.660391)」もしくは「緯度,経度(例:35.660391,139.729116)」のような「座標」表記も記述できます。


■地図を表示させる方法(2通りあります)

A.エントリー記事内に地図を表示させる場合

1.エントリー記事の表示に関係するテンプレート(※)の <body> タグのあとに <MTMapper> タグ、 </body> タグのあとに </MTMapper> タグを追加して保存
※標準なら、メインページ(index.html)と各アーカイブ(エントリー・アーカイブ、カテゴリー・アーカイブ、等)

以下は、メインページにMapperタグを追加した例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> <head>  ~省略~ </head> <body class="layout-two-column-right main-index"> <MTMapper> <div id="container"> <div id="container-inner" class="pkg"> ~省略~ </div> </div> </MTMapper> </body> </html>

2.エントリー記事内の、地図を表示させたい場所に以下のmapタグを記述

[map:東京都○○区○○1-1-1]

このとき、自動改行にしている場合は、行の前後に改行を1行入れてください。
自動改行にしていない場合は、<div>[map:東京都○○区○○1-1-1]</div> のようにdivタグで挟んでください。

B.ヘッダーやナビ部分など、エントリー記事以外の場所に地図を表示させる場合

各テンプレートの表示させたい場所に、以下のタグを入力します。

<MTMapper> <div class="adr">東京都○○区○○1-1-1 (Sorry, this address cannot be resolved.)</div> </MTMapper>


※参考:six apart社のホームページでも紹介されています。ここにも詳しい設定方法の記載がありますので参考にしてください。
 ⇒ Mapperプラグインの紹介
  (six apart社のサイトへリンクしています)



最新記事一覧