イメージマップとは
イメージマップは画像の中に領域を指定してリンクを張る事です。Dreamweaverでイメージマップを作るためのツールとして、長方形ホットスポットツールや円形ホットスポットツール・多角形ホットスポットツールがあります。従来テキストエディタでHTMLタグを書いていた時代には、座標を入力した後に確認して手間がかかっていたマップですが、Dreamweaverでは簡単になりました。
イメージマップの作り方
①まず画像を選択します。
②プロパティインスペクタ下段のマップで長方形・円形・多角形のホットスポットツールのボタンを押します。
③画像で領域を設定しリンクを設定します。
④SEO効果を高めるためにalt属性を指定します。Dreamweaverでは代替のテキストボックスの所に、エリアを表現するキーワードを入れます。
マップの他の使い方とヒント
多角形ホットスポットを使うと、座標がX1,Y1,X2,Y2,X3,Y3…というふうにコードビューのareaタグの中に入っていくので、何か地図や写真などの画像から座標をとってくる用途にも簡単に使えそうです。ソフトを開発する人で座標をとれるツールを持っていない人には便利に使えるかもしれません。画面をスクロールしたくなったら、ステータスバーの手のひらツールでスクロールして、多角形ホットスポットツールボタンを押すと、続けて指定する事ができます。
広告
関連コンテンツ
外部リンクの作成
外部リンクは自分のサイトの外へのリンクです。httpから始まるURLでリンクを張ります。
外部リンクを設定する方法
まずはリンク元の文字列をデザインビューで範囲選択します。
プロパティインスペクタでリンクの所にhttpから始まるリンク先を入力します。
「ENTER」キーで確定です。
外部リンクの場合、リンク先を今開いてるタブの更新で移動する場合と、新しくタブウィンドウを作ってリンク先を表示したい場合があります。
新しくタブウィンドウを作りたい時だけtarget属性という特別な設定が必要です。
コードの例
<a href="http://リンク先" target="_blank">リンク元文字列</a>従来のリンクにtarget=”_blank”という文字列を追加するだけです。
ドリームウィーバーのプロパティインスペクタで設定する時は「ターゲット」の所で「_blank」をドロップダウンで選択するだけです。
外部リンクで検索エンジン対策
サイトのSEO対策には内部要素と外部要素と企画要素があるといわれています。HTMLを中心とした内部要素とサイトの企画による企画要素で手を尽くすと、最終的には被リンク数を中心とする外部要素で差別化されてくるといわれていました。
無料ブログからの被リンクを作ってサイトを上位表示させるというSEOも存在したようですが、現在は昔ほどは効果がなくなったといわれています。価値のある情報を表示するため、検索エンジンのしくみ（アルゴリズム）というのも日々改善されており、結局最後に残るのは人が見て有益なサイトになってくるのでしょう。
ハブサイトになればリンク元もSEO対策になる
通常リンクによりSEO効果を受けるのはリンク先です。
しかし、リンク集のようなページでも有益なリンクであれば、リンク元のサイトにもSEO効果があると最近では言われ始めました。
リンク切れを調べる方法
Dreamweaverにはリンク切れを見つけるための補助ツールがあります。
１つのドキュメントに対するリンクチェックの方法
メニューから「ファイル」-「ページのチェック」-「リンク」と選択します。
破損リンクがあると、そのリンクについて表示されるので、リストの破損リンクの列をクリックして修正します。
サイト全体に対するリンクチェックの方法
メニューから「サイト」-「サイト全体のリンクチェック」を選択します。
そのサイト全体の破損リンクが表示されます。表示の右隣のドロップダウンリストを単独ファイルにすると、どこからもリンクされていないファイルをリストアップする事ができます。
最後は人がチェック
破損リンクが無くなっても、リンクが正しいかどうかは機械ではわからないので、ブラウザを使ってチェックを行います。サイトの作成にあまり関わっていない人によるチェックも効果的でしょう。
.htaccessファイルを使ってファイルが見つからない時のエラー用の画面も準備
ページが見つからない時、サーバーからエラー画面が送られてくるので、エラーの転送先を独自に作って、.htaccessファイルで関連づけておくのも良いでしょう。
.htaccessファイルが作れるサイトはこちら
.htaccess ファイルを簡単作成「.htaccess Editor」
http://www.htaccesseditor.com/
ブラウザのリンクカラーを取得する方法
ブラウザのデフォルトのリンクカラーを取得する方法です。スポイトツールで色を読み取ったり、画面のハードコピーをとったりいろいろな方法があります。フリーソフトでも色を取得するツールがあります。
InternetExplorer
メニューの「ツール」-「インターネットオプション」-「全般」タブ-「デザイン」-「色」とたどっていけば見る事ができます。
Firefox
メニューの「ツール」-「オプション」-「コンテンツ」タブ-「配色設定」ボタンとたどっていくと見る事ができます。
GoogleChromeとSafari
色の設定の場所がわからなかったのでデフォルトのリンクを作って色を調べるしかないでしょう。
おすすめのスポイトツール
ウェブカラークリエイターが簡単です。
ダウンロードはこちら
http://www.vector.co.jp/soft/win95/net/se346761.html
ファイルやフォルダのパスの階層について
リンクや画像ファイルを表示する時、場所を意味するパスをHTMLファイルに記述します。外部リンクなど絶対パスの時は、入力ミスがなければ問題は起こりにくいのですが、内部リンクなどを相対パスで書くには、リンク切れをおこさないようパスの書き方を知っていなければなりません。
絶対パスとは
絶対パスとはhttpから始まるアドレスをすべて書いたURLです。
Googleなら
http://www.google.co.jp/
のように表示します。
相対パスとは
相対パスとは今開いているページを基準としてアドレスの差分を書いてリンク先を表現したものです。
例えば次のようなアドレスのページがあったとしましょう。
①(基準)http://www.xxxxxx.com/directory/index.html
②http://www.xxxxxx.com/directory/sample2.html
③http://www.xxxxxx.com/directory/subdirectory/sample3.html
④http://www.xxxxxx.com/sample4.html
②から④をこれらを①を基準とした相対パスで書いてみます。
②”sample2.html”
③”subdirectory/sample3.html”
④”../sample4.html”
例を見ればわかりますが上のディレクトリを行くか？下のディレクトリを行くか？ファイル名は何か？を表現したものです。覚えるのは上のディレクトリに行く時の”../”という表現ぐらいでしょう。後は自然と何とかなります。不安な場合は、作ったリンクをブラウザでクリックしてみましょう。それが一番確実なチェック方法です。