iThoughtsX(または iThoughtsHD)で作成し、Web 公開したマインドマップをレスポンシブ対応させる

iThoughtsX で作成したマインドマップをレスポンシブ対応させて Web 公開する方法についての覚書です。

まず、iThoughtsHD で作成した itmz ファイルを Dropbox に公開する方法については以下のページに載っています。

AccessMenuBarApps-22
ImageMap

iThoughtsHD から Dropbox へデータを送るときには「Send To Cloud」ボタンより

AccessMenuBarApps-23

png ファイルと html ファイルをアップロードすることにより行うわけですが、

AccessMenuBarApps-29

Dropbox の方にアップするとどうも表示が重いようです。

AccessMenuBarApps-24
PhotoScape

また、ファイル名に日本語を含んでいると、おそらく文字化けが原因で表示されなかったり、

AccessMenuBarApps-33
テーマの選定

レスポンシブ対応させたときにリンクの位置にずれが生じるようです。

skitched-20140129-221335

そこで、私自身はレンタルサーバ「ロリポップ!」の WebDAV サービスを使って、

skitched-20140129-214648

そちらの方にデータ保存することにしました。

AccessMenuBarApps-25

次にレスポンシブ対応させる方法ですが、以下の記事で紹介されていた「Responsive Image Maps jQuery Plugin」という jQuery プラグインを使うこととしました。

AccessMenuBarApps-27
クリッカブルマップをレスポンシブ対応させるプラグイン「Responsive Image Maps jQuery Plugin」 | NxWorld

以下の js ファイルをロリポップ!の方にアップロードし、

AccessMenuBarApps-28

!

2014-09-24現在、以下の CSS を使うとインターネット・エクスプローラでリンクが効かなくなることを確認済みです。

 

以下の記述を

iThoughtsHD からロリポップ!へアップロードした html ファイル中の「</map>」の後ろの部分に追加しました。

AccessMenuBarApps-30

そうすることで、以下のように公開したマップをレスポンシブ対応させることができるようになりました。

AccessMenuBarApps-32
map

広告

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。