iThoughtsX(または iThoughtsHD)で作成し、Web 公開したマインドマップをハイライト表示させる

2014 2月 | comemo post

iThoughtsHD で作成したマップをレンタルサーバ等にアップロードして Web 公開する場合、レスポンシブ対応させる方法については記事「iThoughtsX(または iThoughtsHD)で作成し、Web 公開したマインドマップをレスポンシブ対応させる | padmemo」で述べたとおりですが、ここでは、iThoghtsHD のウェブサイトで紹介されている、リンクのハイライト表示機能についての覚書です。

ざっくりと説明すると、ハイライト表示させる jQuery プラグインをレンタルサーバ等へアップロードすれば OK でした。

レンタルサーバ等にアップロードさせる jQuery は以下のページよりダウンロードできました。

AccessMenuBarApps-15
ImageMap

ダウンロードした zip ファイルを解凍し、私の場合ですと Coda 2 を使って、ロリポップ!のレンタルサーバへまるごとアップロードしました。

AccessMenuBarApps-16

iThoughtsHD 等で作成したマップの方は iPad の iThoughtsHD アプリの以下のメニューよりアップロードしました。

AccessMenuBarApps-18

私の場合だと、「ロリポップ!」を選択(WEBDAV というサービスを使ってあらかじめ登録しておきます)。

AccessMenuBarApps-19

「Image(.png) + HTML」にチェックを入れ、

AccessMenuBarApps-17

レンタルサーバ内の任意のフォルダにアップロードすると、

AccessMenuBarApps-20

こんな感じで html ファイルと png ファイルがアップロードされます。

AccessMenuBarApps-21

アップロードした html ファイルの方には最初から jQuery を読み込む記述がすでにあるので、レスポンシブ対応させるときのように html ファイルを改めて編集する必要はありません。

AccessMenuBarApps-22

以上の作業で、以下のような感じでリンクをハイライト表示させることができました。

ただし、この、ハイライトさせる jQuery とレスポンシブ対応させる jQuery とを併用させることは、私の技量ではできませんでした(もしくはもともとできない)。

広告

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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