メルロロのWEBデザイン

サイトを作る為のちょっとした知識や素材を置いています。

Step.7 画像にリンクを貼ってみよう

画像を貼ってみよう

前回目標達成しちゃったけど、今回は何をやるの?
とりあえずの目標は達成したけれど、まだまだサイトと呼ぶには内容がないからね。
サイトのデザインはともかく、すんごい今さらだけどさ、メルちゃんはどんな内容のサイトを作りたいの?
うわ、今それを聞くの?
へへー、お料理サイトなんていいかなー!とか思ってさ!
レシピとか書きつつ、写真のっけて、自分で感想書いてさ~♪
あら、以外としっかりした考えがあったのね。それなら話が早くて助かるよ。
……てか、それだったらサイト名もっとそれらしく料理って文字でも入れなよ。わかりづらいなぁ
そこはまぁ、またしっかり決まったら変えるよ♪
で、それやるにはどうしたらいいか教えてよ!
んー、実際のレシピとか感想とか書く場所は1つの料理に付き1ページでいいよね?そっちは割とすぐできそうだけれど、問題はそのページへトップページからどうやってリンクを貼るかだよね。
あー。なるほど。うーん……
やっぱり画像があって、画像に惹かれた人がその料理のレシピ知りたいなーってページに入ると思うんだよね……。だから画像の一覧みたいなのがあって、そこからのリンクがいいかなぁ。
どれくらい料理貼るつもりか知らないけれど、ある程度カテゴリー分けもしたほうがいいと思うよ。
ほら、レストラン行ったらジュースはジュースでまとまってメニューに載ってるでしょ?ああいうわかりやすさも必要
あぁ!絶対欲しいそれ!
あとよくページの左側か右側に縦長のサイドメニューが置いてあるのを見ると思うんだけれど、そういうのはいらない?
んー作ってみたいけれど今のところ使い道を思いつかないや。
そっか、じゃあ次はとりあえず画像を使ったリンクの作成と行こうか。
でも、それやるにはまず画像が必要になるんだけれど、メルちゃん画像用意しているの?
してない!!
胸張って言うことじゃないからね……?
わかった。じゃあこの3枚でどうかな

料理の写真じゃないね。
つべこべ言わない。料理の写真が用意できたらあとで張り替えればいいでしょう?
ひとまず、この画像をメルのパソコンに保存してね。画像を右クリックして「名前を付けて画像を保存」で保存できるから、3枚とも保存ね。保存する際の画像のファイル名は保存時に表示される「image1.jpg」「image2.jpg」「image3.jpg」のままでいいよ。
あいよ。保存先はどうしたらいい?
index.htmlファイルがある場所と同じでいいけれど、画像のファイル数は多くなりそうだから、更にフォルダを作ろうか。
index.htmlファイルのあるフォルダ内に更にフォルダを新規作成してね。フォルダ名は何でもいいけれど「image」とか無難でいいんじゃないかな
で、そのフォルダの中にさっきの3つの画像を保存してね。
できたよー
じゃあ、これで画像の準備は完了だね。では、さっそく画像を貼り付けてみようか。
画像を貼り付けるタグは <img src=”画像のURL”> だよ。
はて、ここでちょっとURLのお話をしていいかな?

ファイルの場所とURLの関係

以前、メルちゃんがURLって http:// から始まらないの?って言ってたよね。
うん。CSSファイルを呼び出す時だっけ。ファイル名だけ入れてたよね。
そうそう。URLなんだけれども、同じサーバーとか同じフォルダにあるURLは省略することができるんだ。
特に今はサーバーにHTMLファイルとかをアップロードしていないからね。自然とフォルダ名、ファイル名だけでURLを指定するしかないの。
サーバーにアップロード?
サイトをネットを通して全世界に見てもらえるようにするのにはとある作業が必要って言ってたでしょ?それのこと。
まぁ、前にも言ったようにサイトが出来上がったら教えるからあんまり気にしないで。
そっか。
んー、よくわかんないからやってみていい?
あの3つの画像の1つ目を呼び出すには、<img src=”image1.jpg”>にしたらいいのかな?
残念。思い出してほしい。さっきの3つの画像は「image」というフォルダに入れたよね?

step7-1

この場合、フォルダ名を指定してあげないといけないんだ。なのでこうなるよ

<img src="image/image1.jpg">
ほう。フォルダ名を指定してあげないといけないのか
そういうこと。フォルダってこんな感じにツリーみたいになるのわかるかな。

メルちゃんの素敵なサイト ━┳ index.html
			  ┣ style.css
			  ┗ image ━━┳ image1.jpg
					┣ image2.jpg
					┗ image3.jpg

で、もしも image の更に下層のフォルダを作成し、それをindex.html へ呼び出したい場合は……

メルちゃんの素敵なサイト ━┳ index.html
			  ┣ style.css
			  ┗ image ━━┳ image1.jpg
					┣ image2.jpg
					┣ image3.jpg
					┗ test	━━┳ test1.jpg
						  ┗ test2.html

<img src=”image/test/test1.jpg”>と、いう感じに、スラッシュ「/」でフォルダを区切り指定していくよ。

はーん。なるほど。
では、今度は反対に上層のフォルダを指定する方法をやってみようか。

メルちゃんの素敵なサイト ━┳ index.html
			  ┣ style.css
			  ┗ image ━━┳ image1.jpg
					┣ image2.jpg
					┣ image3.jpg
					┗ test	┳ test1.jpg
						┗ test2.html

test2.html に style.css ファイルを呼び出したいとする。この場合のURLはこうなるよ。

<link rel="stylesheet" href="../../style.css">

「../」が一つ上のフォルダって意味になるね。
ちょっと複雑なのもやっておこうか。

メルちゃんの素敵なサイト ━┳ index.html
			  ┣ style.css
			  ┗ image ━━┳ image1.jpg
					┣ image2.jpg
					┣ meru ━━━ test.jpg
					┗ test	━━┳ test1.jpg
						  ┗ test2.html

「image」フォルダ内に「meru」というフォルダを作ったよ。
その中の「test.jpg」というフォルダを「test2.html」というファイルに呼び出したい場合、メルちゃんどうする?

えぇえ!そこで振るの!?えぇっと……うーん……
<img src=”../meru/test.jpg“>……かな?
あら、できちゃったの。つまらない。合ってるよ
つまらないって……
これでURLは完璧だね。じゃあ、実際に3つの画像を載せてみてよ。
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><p>メルちゃんの素敵なサイト★</p></header>

<main>
<p id="main1">メイン</p>
<p id="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
<img src="image/image1.jpg">
<img src="image/image2.jpg">
<img src="image/image3.jpg">
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
あいよ!おおおお!貼れた!!貼れてるよロロちゃん!!
やっぱ画像があると全然違うね!すげぇ!
一気にページが映えたね。画像はページが重たくなっちゃうけれど、やっぱりあると違うもんだね。

リンクを貼ってみよう

さて、じゃあさっそくこの画像にリンクを貼ってみようか。
とは言っても、リンク先のページをまだ用意できてないけどね。とりあえずタグから出すよ。
<a href=”リンク先URL”>リンクを貼る文字か画像</a>
って感じだよ。テキストリンクならば開始タグと閉じタグの間はテキストを入れればいいよ。
今回は画像でリンクをしたいわけだから、<a>要素と<img>要素を組み合わせるよ。
<a href=”リンク先URL”><img src=”画像URL”></a>
リンク先URLどうしよ
とりあえずで何かしらHTMLファイル作っておきなよ。test.html とでもして、文字一行だけ入れてさ。
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><p>メルちゃんの素敵なサイト★</p></header>

<main>
<p id="main1">メイン</p>
<p id="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
<a href="test.html"><img src="image/image1.jpg"></a>
<a href="test.html"><img src="image/image2.jpg"></a>
<a href="test.html"><img src="image/image3.jpg"></a>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
こんな感じ?……おお!ちゃんと飛んだ飛んだ!
あと、リンクは新しいウィンドウで開かせることもできるよ。
見たことある?
新しいウィンドウ?なんか勝手にタブが増えてることはあるかな。
うん。それのこと。デフォルトでは勝手にタブ増えずにリンク移動するけれど、<a>要素に属性を入れることで新しいウィンドウ(タブ)で開かせることができるの。
新しいウィンドウで開くか、新しいタブで開くかはブラウザ側の設定次第なんだけどね。
ほうほう。
でも私なんか、あのいつの間にかタブがめちゃんこ増えてるの好きじゃないんだよね
わかる。私も好きじゃない。
まぁ要は使いどころだから、とりあえず覚えておきなよ。
<a href=”リンク先URL” target=”_blank”>リンクを貼る文字か画像</a>で新しいウィンドウ(orタブ)で開くよ。
まぁオススメ調味料とか紹介するのに外部リンク使うときがあったら新しいウィンドウで開いてもいいんじゃない?
外部リンクって何?
自分が作ってるとこ以外のリンク。違う誰かが作ってるサイトへのリンクとかそんなとこかな。
例えばメルちゃんが、あまり知られていない美味しい調味料を見つけたとして、その調味料の公式サイトとか調味料を販売しているサイトとかがあったらそのサイトへ飛べるようにリンクを貼る。これも外部リンクだね。
あーなるほど。そういうのもいいね。

URLの基準やtarget属性のデフォルト値を変更する<base>要素

ついでだから、<a>要素とかかわりのある<base>要素について説明しておくね。
空要素で<head>要素内に書くよ。今までURLは呼び出すHTMLファイルの位置を基準としてファイル名、フォルダ名を指定するって話をしたけど、この<base>要素はその基準を変えることができるよ。あと、デフォルトのtarget属性の値も設定しておけるよ
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
<base href="image/" target="_blank">
</head>
<body>

<header><p>メルちゃんの素敵なサイト★</p></header>

<main>
<p id="main1">メイン</p>
<p id="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
<a href="../test.html"><img src="image1.jpg"></a>
<a href="test.html"><img src="image/image2.jpg"></a>
<a href="test.html"><img src="image/image3.jpg"></a>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
ファイルの基準位置が「image」フォルダ内に変わったのがわかるかな?あと<a>要素にtarget属性をしていないけれどページ内すべての<a>要素が新ウィンドウ(タブ)で開くようになったよ。
画像2と3はリンク先修正していないからリンク切れを起こして画像すら表示されなくなっているでしょう?
へーこんなことできるんだ。さすがにページ内すべてを別ウィンドウで開くのはやりたくないけれど
target属性の値は別ウィンドウで開く以外にもあるから、時には重宝することもあるよ。
はて、今回は以上ね。次回は見出しをつけてみよう。

▲ Page top ▲