冨山陽平のブログ “思いきり やりぬく”

ITの適正活用,ウェブサイト,ITの適正活用、組織風土改革、従業員満足度調査、これあらた、久留真家、冨山陽平

冨山陽平のブログ 思いきりやりぬく

ウェブサイト制作:画像のリンクの指定方法

2012/02/16 (木)

最近は手軽にウェブサイトを制作できるようになりました。私も、ウェブサイト制作のご相談をいただくことがありますが、そのお客さまの知識次第では、「自分でおやりになったらどうですか?」とツールを紹介してしまいます(当社の商売的には若干問題ですが。。。喜ばれます)。とはいえ、ある一定の基礎知識は必要です。

そもそもウェブサイトは、基本的には(X)HTMLというプログラム言語を使って構成されています。その中にリンクという概念があります。リンクを貼ると、どこか別のページに移動することができます。リンクを埋め込むと指定した場所にあるファイルや画像を設置することができます。具体的には、

 <a href="aaa/bbb.html">会社概要</a>
 <img src="../image/bk.jpg" />

などです。ここでいう「href 」や「src」というところには、リンク先を指定するわけですが、これに関しては、ホームページ制作ツールやブログシステムを利用していても、手作業で入力する状況に面することがあるでしょう。

実は、リンク先として書く文字列をパスといいます。このパスには絶対パスと相対パスがあります。

  • 絶対パス:サイト内の絶対動かないものを基準にして、リンク先を指定する文字列
  • 相対パス:サイト内の自分の場所を基準にして、リンク先を指定する文字列

。。。()なんのことだかさっぱりかもしれません。。。以下に例を書いていきます。

【絶対パス】

  1. http://www.xxx.com/aaa/bbb.html や http://www.xxx.com/image/bk.jpg
  2. //www.xxx.com/aaa/bbb.html や //www.xxx.com/image/bk.jpg
  3. /aaa/bbb.html や /image/bk.jpg

【相対パス】

  1. ./aaa/bbb.html や ./image/bk.jpg
  2. ../aaa/bbb.html や ../image/bk.jpg
  3. ../../aaa/bbb.html や ../../image/bk.jpg

では、それぞれの意味と特徴を書き下していきます。

絶対パス-1:アドレスそのものを指定してしまいます。ファイルの配置を変えてもリンク切れを起こすことはないので安心です。しかし、ドメインを変更したり、複数のドメインで同じサイトを表示させている場合は、不具合が出る場合があります。このパターンで指定すると、サイト表示が遅くなるとおっしゃる方もいますが、私は体感的にはまったく影響がないものと考えています。

絶対パス-2:通信プロトコルを示す(httpやhttps)文字列だけを省き、ダブルスラッシュから始めます。有名な例では、SSL証明書のサイトシール(ベリサインやグローバルサインのシール)を貼るときに、このリンク形式をみることができます。これはhttpとhttpsの両方で表示される可能性があるページに利用されますが、利用率は極めて低いように思います。

サイトシール絶対パス-3:絶対パス-2よりもこちらを利用する場合が多いと思います。よく相対パス-1と混同する方がおられますが、まったく別物です。絶対パス-3は絶対パス1,2と同等です。

相対パス-1:ドットは自分の位置を示します。つまり、自分と同じ位置から見て~という意味になります。ドットとスラッシュは省略して構いません。

相対パス-2:ドット2つは、自分より一つ上の階層を示します。

相対パス-3:ドット2つを重ねていくと、上へ上へと階層を重ねていくことができます。

一般的には、相対パスが便利ですが、WordPressなどのCMSを利用している場合は、絶対パスのほうが便利な場合もあります。種類としては覚えておいて損はないと思います。

カテゴリー: ITの適正活用

キーワード:

コメントとトラックバック: なし

トラックバック先:

コメントを残す