読者です 読者をやめる 読者になる 読者になる

LOGzeudon

名古屋で働いているWebデザイナーのブログです

DreamweaverCC 2015でイメージマップ(クリッカブルマップ)が作れない!とお悩みの方へ

デザイン

Dreamweaver2015オープニング画像

Dreamweaverを普段使わない自分が、悩みながらもイメージマップ(別名クリッカブルマップ)をつくった過程をご紹介します。
クリッピングマスクじゃないですよ。

経緯

クライアント確認用のプロトタイプにて「クリッカブルマップ」を多用している案件があり、その更新を社内で依頼されました。
先輩がDreamweaverでカンタンにつくれると言っていたので、試しに自分で調べてやってみることに。

やったこと

とりあえずググる

「Dreamweaver2015 クリッカブルマップ」などでググると、Adobe公式サイトが表示されます。

Dreamweaver Help / イメージマップを作成する方法 (Dreamweaver CC)

「ふむふむなるほどな」と出来そうな気になるのですが、4番目の項目あたりからつまづきます。

Adobe公式サイトのスクショ

上図のような「プロパティインスペクター」があるそうですが、自分のDreamweaver画面上にはありません。

プロパティインスペクターを表示する

自分のPCでみたDreamweaver画面スクショ

自分のPCでみたDreamweaver画面スクショ拡大

それっぽいウィンドウがあるにはあるけど、項目が少ない。
試しに右隅の方にある「タイトル」のところをダブルクリックすると、隠れているウィンドウが出てきました。

自分のPCでみたDreamweaver画面スクショ

自分のPCでみたDreamweaver画面スクショ拡大

出た…けど、Adobeのサイトに載ってるのとなんか違う…。
「ホットスポットツール」がない…

「ライブ」モードを「デザイン」モードへ変更する

検索しても出てこないのでわからず、職場の先輩に尋ねたところ、あっさり教えてくれました。
「『ライブ』モードになっているのがいけない」と。

自分のPCでみたDreamweaver画面スクショ

自分のPCでみたDreamweaver画面スクショ拡大

左上にあるセレクタで、デザインを選択。

自分のPCでみたDreamweaver画面スクショ拡大

出た!ついにクリッカブルできる!!

感想

Dreamweaverを最初に起動したときに、Defaultで「ライブ」がONになってるのは理由があるのでしょうか…。

あと全然関係ないですけど、最初に起動する時の画像、一瞬しか表示されない割にインパクトありすぎでは。いやIllustratorの方もアレだけど。

おまけ

「イメージマップ」と「クリッカブルマップ」の名称について

最初「クリッカブルマップ」だと思ってて、Adobeのサイトが「イメージマップ」と記載していて違和感がありました。調べたら、以下のようなご意見があるようです。

amenti.usamimi.info

念のためHTMLの仕様書 2.0~4.01 まで原文や和訳を調べてみましたが、予想通り クリッカブルマップと言う表現は一言も無く、全てイメージマップとなっていました。 クリッカブルマップを一部がクリック出来る画像と言う意味で使うのは良しとしても、 HTMLでの正式名称の如く記してあるサイトは誤りです。

へー、です(当たり前なんですかねえ…)。自分でちゃんとソース探して確認する気力はないんですけど、とりあえず、Adobeに揃えて「イメージマップ」と呼んでおくのが無難な気がします。

レスポンシブでイメージマップ使うときの注意点

そういえばレスポンシブなサイトだとリンクの座標がずれるので気をつけましょう。
と思いながら検索してみたら、そういうのを制御するjQueryがあるんですね。

www.onside.com

便利!使う時がありそうななさそうな感じですが、頭の片隅に入れておくと役に立ちそうです。

 

(c) rokuzeudon