メルロロのWEBデザイン

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

Step.13 ページを増やし、内部リンクをしっかりつけよう

ページを量産する前に共通部分だけを抜き出したテンプレートを作っておこう。

さて、ようやくトップページはほぼ完成となったから、今度は別のページを作っていこうか。
メルちゃんの場合は実際に一個一個の料理のレシピが記載されているページが必要そうだね。
うんうん！1つの料理につき1ページで調理方法とか感想とか書きたいよ！
と、言うわけで、新しくページを作るよ。
新しいページを作る＝新しいHTMLファイルを作るってことになるよ。
ちなみに、ヘッダーやフッター部分は全ページ共通でいいよね？
うん、そのほうが統一感が出てて迷うこともないし、楽できるもんね。
そうだね。ってことで、真っ白な状態を1から作るのではなく、すでに作成を終えているindex.htmlファイルをコピーして必要箇所だけを書き換えようか。
<!doctype html>
<html lang="ja">
<meta charset="Shit_JS">
<head>
<title>メルちゃんの素敵なサイト★</title>
<meta name="Keywords" content="料理,レシピ,デザート,お菓子作り">
<meta name="Description" content="料理のレシピをつらつら書いていくサイトです。">
<link rel="stylesheet" href="style.css">
</head>
<body>

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

<main>
<article>

<h1>レシピ一覧</h1>

	<section>
	<h2>オムライス</h2>
	<ul>
	<li><a href=""><img src="image/demo3.jpg"></a>
	</ul>
	</section>

	<section>
	<h2>パスタ</h2>
	<ul>
	<li><a href=""><img src="image/demo6.jpg"></a>
	<li><a href=""><img src="image/demo4.jpg"></a>
	</ul>
	</section>
	
	<section>
	<h2>添え物</h2>
	<ul>
	<li><a href=""><img src="image/demo5.jpg"></a>
	</ul>
	</section>
	
	<section>
	<h2>デザート</h2>
	<ul>
	<li><a href=""><img src="image/demo1.jpg"></a>
	<li><a href=""><img src="image/demo2.jpg"></a>
	</ul>
	</section>

</article>
</main>

<footer id="main1"><small>copyright &copy; メルちゃんの素敵なサイト★ all rights reserved.</small></footer>

</body>
</html>
これが現状のindex.htmlファイルのソースコードだね。
まぁまずはindex.htmlファイルを右クリックしてコピー後、フォルダ内でまた右クリックして貼り付けをしてみよう。そうすることでファイルをコピーできるよ。

step13-1

できたよー！中身はindex.htmlと全く一緒だね！
じゃあ、必要箇所だけを残してそれ以外を一度消してみようか。
<!doctype html>
<html lang="ja">
<meta charset="Shit_JS">
<head>
<title>タイトル</title>
<meta name="Keywords" content="キーワード,キーワード">
<meta name="Description" content="概要">
<link rel="stylesheet" href="style.css">
</head>
<body>

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

<main>
<article>

<h1>ページタイトル</h1>
<section>
<h2>見出し</h2>
<p>文章</p>
</section>

</article>
</main>

<footer id="main1"><small>copyright &copy; メルちゃんの素敵なサイト★ all rights reserved.</small></footer>

</body>
</html>
ちょっと一部弄ったけれど、大体こんなもんだね。
<title>要素はサイト名にしないの？なんでわざわざ「タイトル」にしたの
もしもこのページがオムライスのレシピを書く場所だとするならば、このページのタイトルはサイト名ではなく「おいしいオムライスの作り方」だとかのほうが妥当だよ。サイト名はそれの後ろにちょろっと付け足すか、いっそ無くてもいいかな。
ほう……ページ一つ一つにちゃんとつけてあげないといけないんだね。大変。
まぁ、そこはページを作るメルちゃんに任せるけれど、SEOを気にするなら<title>要素はかなり重要な部分であることは覚えておいてね。
で、今後はこれを元にページを量産していくことになると思うから、これを使いまわすことになりそうだな、って思ったらこれをテンプレートとして保存しておくといいよ。
テンプレートとして保存？
ファイル名を「テンプレート」とでもして、フォルダの片隅にずっと置いておくだけでいいよ。
今後は新しいページを作ろうと思ったらそのテンプレートをコピーして、コピーしたファイルを編集していく感じ。
そしたら楽ちんでしょう？
なるほどー！
ちなみに、HTMLファイルも画像のときみたいに必要に応じてフォルダ分けしておくと、後々HTMLファイルの管理が楽だからね。
そこらへんはメルちゃんに任せるけどね。

CSSを入れる為だけに要素が欲しい場合は<div>要素がとっても便利

それじゃ、実際に一個レシピを好きなように書いてご覧よ。
レシピを書いて行く上で新しくCSS設定したくなったら付け足しでCSS書いていけばいいよ。
おっけー！頑張ってみる！
……ねね、ロロちゃん。質問なんだけど。
はいはい。
index.htmlで画像にリンクするとき私が用意した画像の幅がめちゃくちゃだから、画像の親要素を用意するしかないねって話あったじゃん
今作っているページも同じような理由で、画像に親要素が欲しいんだけれど、前回は<ul>と<li>でよかったんだけど、今回はリストってわけじゃないんだよ。
こんな感じにしたくてさ。

step13-2

この画像がのってる親要素にはどの要素を使用したらいいの？
なるほどね。該当する要素がないのね。そういう場合は<div>要素を使うといいよ。
ほうほう。それはどういう意味のやつ？
<div>には意味がないよ。
特に意味がなく、CSSを使用する目的で使われるんだ。だから今のメルちゃんの使用用途にぴったりね。
ほう！そんなのもあるんだ。
<div>要素はすごくよく使われるよ。ふと気づいたら<div>だらけだったり。
意味がないからこそ使いやすいんだね。
こいつのおかげで何とかなりそうだ！ありがとう！

パンくずリストやメニューなど、サイト内を周るのに必要な内部リンクはしっかりと。

できた！！できたよロロちゃん！どうよ！見てよ！
<!doctype html>
<html lang="ja">
<meta charset="Shit_JS">
<head>
<title>揚げ出し豆腐のしめじあんかけレシピ</title>
<meta name="Keywords" content="料理,レシピ,揚げ出し豆腐">
<meta name="Description" content="簡単おいしい！揚げ出し豆腐のしめじあんかけのレシピです。">
<link rel="stylesheet" href="style.css">
</head>
<body>

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

<main>
<article>

<h1>揚げ出し豆腐のしめじあんかけ</h1>

<div id="image_ingredients">
<div id="image"><img src="image/demo7.jpg"></div>
<section id="ingredients">
<h2>材料</h2>
<ul>
<li>豆腐
<li>しめじ
<li>ネギ
<li>めんつゆ
<li>水
<li>片栗粉
</ul>
</section>
</div>

<section>
<h2>調理方法</h2>

<section>
<h3>豆腐を水切りする。</h3>
<p>しっかり水切りしないと揚げる時に油がはねて危険ですので水切りはしっかり行いましょう。</p>
<p>水切り方法は沢山ありますが、豆腐をキッチンペーパーで2重ほどに包み、レンジで加熱。その後キッチンペーパーを新しいものに変え、重りを乗せて冷ますのが楽です。</p>
</section>
<section>
<h3>水切りした豆腐に片栗粉をつけてカラッと揚げる</h3>
<p>フライパンに揚げ油を5ミリくらい引き、熱した後にお豆腐を入れます。</p>
<p>ひっくり返しながら全面サクッと仕上がるように揚げましょう。</p>
</section>
<section>
<h3>揚げ出し豆腐にかけるあんかけを作る</h3>
<p>揚げ出し豆腐にかけるあんかけを作りましょう。</p>
<p>お鍋に水、めんつゆを入れ沸騰させます。</p>
<p>沸騰したらしめじを入れましょう。</p>
<p>しめじがしなっとしてきたら水溶き片栗粉でとろみをつけてあんかけの完成。</p>
<section>
<h3>盛り付け</h3>
<p>揚げた豆腐に先ほど作ったしめじのあんかけをかけ、刻んだネギを添えます。</p>
</section>


<section>
<h2>感想</h2>
<p>カリっとした揚げ豆腐にとろーり優しいあんが絡んでいくつでも食べれちゃう♪</p>
</section>

</section>

</article>
</main>

<footer id="main1"><small>copyright &copy; メルちゃんの素敵なサイト★ all rights reserved.</small></footer>

</body>
</html>

body,h1,h2,p,ul,li {
	margin:0px;
	padding:0px;
}
body {
	color:#6b525b;
	font-size:15px;
	line-height:23px;
	background:#fff7de;
}
header,main,footer {
	display:block;
	width:1000px;
	margin:0px auto;
	box-shadow:5px 5px 10px #d4ccb4;
}
header {
	height:180px;
	margin-top:10px;
	font-size:20px;
	background:
	url(image/backimage.gif) no-repeat right 10px bottom 10px,
	url(image/backimage2.png) repeat,
	#ff4a74;
	border-radius:20px 20px 0px 0px;
	text-shadow:4px 4px 0px #ffffff;
}
header h1 {
	padding:25px 15px;
	color:#9e2634;
}
main {
	background:#ffffff;
	min-height:400px;
	padding:1px 0px 30px;
}
main h1 {
	margin:20px 0px;
	padding:6px;
	background:#ef5e7f;
	border:4px #ff97af;
	border-style:dashed none;
	color:#ffffff;
	text-shadow:1px 1px 0px #bf415e;
	text-align:center;
}
main h2 {
	margin:30px 20px 10px;
	padding:3px;
	border-bottom:dotted 2px #dd5179;
	font-weight:bold;
	color:#9e2634;
}
main h3 {
	margin:20px 25px 5px;
	font-weight:bold;
	color:#9e2634;
}
main .menu li img {
	border-radius:20px;
	height:213px;
}
main .menu li a img:hover {
	opacity:0.7;
}
main .menu {
	list-style:none;
	overflow:hidden;
	margin:0px 20px;
}
main .menu li {
	float:left;
	width:320px;
	margin-bottom:20px;
	text-align:center;
}
main .yoko {
	padding:5px 50px;
	overflow:hidden;
}
main .yoko li {
	float:left;
	margin-right:40px;
}
main p {
	margin:0 35px;
}
#image_ingredients {
	overflow:hidden;
}
	#image {
	width:520px;
	float:left;
	text-align:center;
	margin:0px 20px;
}
	#image image {
	max-width:500px;
}
	#ingredients {
	float:right;
	width:440px;
	margin-right:0px;
}
   #ingredients ul {
	margin:0px 0px 0px 50px;
}
   #ingredients ul li {
	margin:5px 0px;
}
footer {
	height:50px;
	margin-bottom:10px;
	background:#ff4a74 url(image/backimage2.png);
	border-radius:0px 0px 20px 20px;
	position:relative;
	text-align:center;
}
footer small {
	color:#ffffff;
	position:relative;
	top:15px;
}
Sample
ん。よくできたじゃない。初めてやるにしては上出来上出来。
相変わらずの冷えた感想で。
文句つけるならば、調理方法とかを書いてる箇所の横幅が広すぎて若干文字が追いづらかったり、右側にできる空白が気になったり。
わぁ！辛口！
でもよくできてるよ。
少しずつまた気づいたところから好きにいろんなデザイン足していけばいいしさ。
うん！なんかすごく楽しいね！
部屋を飾ったり、スマートフォンをデコったりするのと同じ感覚だしね。好きな人は好きだと思うよ。ほんと。
さて、ページができたことだし、早速index.htmlからリンク飛べるようにしなよ。
実はもうやってるよ！へへ、ちゃんと飛ぶのも確認したもんね！
すごくサイト！！って感じがしてもう嬉しくて嬉しくて！
仕事が早いね。
じゃあ、このレシピページからトップページへ戻るリンクはどうするの？
あ。どうしよか。
考えてなかったのね……。
ブラウザに「戻る」という機能はあるものの、やはりサイト内を周るのにサイト内リンクはしっかりしてると訪問者もありがたいってものだよ。
そうだよねぇ。よく「TOP」とかメニューボタンっぽいのがちゃんとあるサイトを見るよ
今回はメニューといったものを作ってないものね。
なら、ページの最下部に「トップページへ戻る」といったテキストリンクを用意してもいいし、パンくずリストを用意してもいいんじゃない？
パンくずリストって何？パンくず？なにそれおいしそう。
サイトってトップページがあって、そこからいろんなところにリンクが貼ってあったりするよね？時にはトップページから飛んだページに更にリンクがあって、そこから更に……といった感じにツリー構造になっていることが多いよね？
例えば洋服を売っているお店ならば、トップページがあって、そこから「靴」「アクセサリー」「Tシャツ」「スカート」とリンクがあり、「靴」を選んで中に入ったら、更にその中に「サンダル」「ブーツ」「シューズ」「パンプス」とかあって、そこから選んだ後に商品1個1個のページに入れるようになったりさ。

step13-3

あー、うんうん。あるね。
このとき、例えば上の図の「サンダル商品1」に行くには、
トップページ→靴→サンダル→サンダル商品1へとリンクを飛んでいくのね。
このどこから来たのか、というのを現在いるページに表示しておくのがパンくずリストって呼ばれてるよ。
例えば現在いるページがイヤリング商品1であれば、イヤリング商品1のページのどこかにトップページ ＞ アクセサリ ＞ イヤリング ＞ イヤリング商品1 と書いてあり、それぞれ「トップページ」「アクセサリ」「イヤリング」はそれぞれのページへ飛べるようにリンクがしてあるんだ。
パンくずリストっていう名前の由来は童話のヘンゼルとグレーテルのやつだね。
あぁーなんか見たことあるかも。
訪問者に現在位置がパッとわかるようになっているよ。
リンクがしてあれば戻るのも楽ちんだしね。
ただメルちゃんの場合 トップページ ＞ レシピページ という非常に簡単なパンくずリストになっちゃうから、いっそトップページに戻るリンクだけあれば良さそうだけどね。
今後サイトのリンクが増えてきたら付けてみたら？
そうだね！考えておくよ。ありがと！
とりあえず今はトップページへ戻るリンクだけつけておこうかな。

ページの共通部分を編集する場合への考慮

さて、レシピページも1個無事できたことだし、ガンガンレシピページ完成させてね。
あいよ！ところでさ、ページ沢山量産してページが40個できたとするじゃん。このページ全部ヘッダーとフッターは共通なわけなんだけれど、もしあとですべてのページのヘッダーとフッターを変えたいって思った時……どうなるの？
お察しの通り、悲惨なことになるね。
やっぱり！？40ページ分すべてコピー&貼り付けで対応するの！？しんど！！！
CSSを変えたい程度であればCSSファイル1つ編集すれば終わることだけれど、HTMLを変えないといけないならそうなるね。
まじかぁ！！！
うん。ブログとかの場合はそういう手間はいらないんだけれど、手打ちのサイトはしょうがないね。
HTMLやCSSとはまた違った言語、SSIとかPHPを使えば何とかできたりするんだけれども……
え、ほかにも言語あるの……？堪忍してよ
ってなるよね。あとはホームページ作成ソフトとかを利用する手も……ただそういうソフトを買うなり、探すなりしないとだけどね。
あとは<iframe>要素を使う手もあるかな。
お。新しい要素？HTMLなら覚えられる気がする！
<iframe>はインラインフレームと言って、HTMLファイル内に別のHTMLファイルを呼び出すことができる要素だよ。
試にやってみようか。

うわ！なにこれ！
このサイトのトップページを横幅670px縦幅300pxの中に呼び出しているよ。
<iframe src=”ファイル名”></iframe>で呼び出せるよ。
開始タグと終了タグの間に文字を書いておくと、ちゃんとHTMLファイルを呼び出せた場合、その文字は見えないけれど、<iframe>を対応していないブラウザで見たときにその文字が表示されるよ。未対応ブラウザの為に「ここはiframe対応ブラウザで見てください。」とか書いておくといいかもね。
ほう……？で、えっと、これがヘッダーフッターとどう関係するの？
ヘッダーだけのHTMLファイル、フッターだけのHTMLファイルを用意しておいて、それぞれのページのヘッダー部分、フッター部分をこの<iframe>要素で呼び出すんだよ。そうしたらヘッダーとフッターを編集したいときはヘッダーファイル・フッターファイルだけを編集することで、それを呼び出している全てのページのヘッダー・フッターの変更ができるわけ。
ほ……う……なんとなーく、わかるような……わからないような。
ただ、これをやっちゃうとHTML文書の構造としてはおかしくなっちゃうのと、<iframe>内のHTMLはクローラーが読み取ってくれないらしいことからSEO的にはよろしくないらしいよ。
推奨しない、と？
検索気にするなら、ね。
頑張ってコピー&ペーストしまくるか、最初から変えなくていいようにしっかり共通部分は練っておこうってことですか。
そんな悲壮な顔をしなくても、一応ほかにも方法あるよ。
すべてのファイルの共通部分を一括変更することのできるソフトとかあるのよ。
ほう！
でもそのソフトの話はまたいつかするよ。今はなしね。今のところヘッダーフッター変える予定ないしさ。気が向いたら番外として教えるよ。
恒例のお預けですか。
お預けです。
ただ、共通部分は本当にコピー&ペーストで一切の乱れ無く同じになるように書いておいたほうがいいよ。スペースキー1つや改行1つ分も違わないように心がけておいてね。
なんか難しそう……
気を付けていればそんなに難しくないと思うけどね。
はて、これでサイトはほぼできたようなものだし、次回はとうとうサーバーへのアップロードをやっちゃおうか。
どういう意味？
今までメルちゃんのパソコン内でしか見れなかったそのサイトを、ネット上に置いて誰でも閲覧できるようにするよ。
ほう！
このエントリーをはてなブックマークに追加

▲ Page top ▲