STEP.4 写真ギャラリー部分を編集しようManual
4-1.subpage.html を複製しよう
トップページ以外のページを作成する際には「subpage.html」を複製して作成していきます。
|
1.「tpl_005」フォルダの中にある subpage.html をテキストエディタで開いて下さい。
2.内容は変更せずに別名で保存して下さい。このページでは見本ボランティアセンターの作成例ですので「gallery.html」を複製して作成しています。
|
subpage.html は下記のキャプチャような構成になっていますので各部分を編集していきます。「共通」と書かれている部分はトップページ・もしくはコンテンツページと共通の部分です。
とりあえず、画像はそのままで文字のみを編集していきましょう。
4-2.【1】h1部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-1.【1】h1部分の編集」で作成したものをコピペして下さい。
4-3.【2】サイト名部分の編集（「header」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-2.【2】サイト名部分の編集（「header」部分）」で作成したものをコピペして下さい。
4-4.【3】連絡先部分の編集（「header」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-3.【3】連絡先部分の編集（「header」部分）」で作成したものをコピペして下さい。
4-5.【4】ヘッダーメニュー部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-4.【4】ヘッダーメニュー部分の編集」で作成したものをコピペして下さい。
|
ただし、1点だけ編集する必要があります。
subpage.html のメニューでは「会社情報」の部分に「class="active"」がついていますので現在自分が編集している項目の「li」に「class="active"」を移動しましょう。
※注意：「class="last"」となっている部分に「class="active"」を挿入したい場合には「class="last active"」のように半角スペースを入れて「active」を挿入して下さい。
|
4-6.【5】メイン画像部分の編集
この部分はコンテンツページと共通になります。「実際にサイトを作ってみよう（コンテンツページ編）」の「3-6.【5】メイン画像部分の編集」で作成したものをコピペして下さい。※ページにあわせて文言や画像を変更してもOKです。
4-7.【6】コンテンツ部分の編集
このページではコンテンツ部分は使用しませんので削除します。
|
下記を削除
<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article>
<img src="images/sample1.jpg" width="190" height="140" alt="" class="alignright border" />
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。</p>
</article>
</section>
<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article>
<img src="images/sample2.jpg" width="190" height="140" alt="" class="alignleft border" />
<p>革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。</p>
</article>
</section>
|
4-8.【7】表（会社概要）部分の編集
このページでは表は使用しませんので削除します。
|
下記を削除
<section class="content">
<h3 class="heading">会社概要</h3>
<article>
<table class="table">
<tr>
<th>会社名</th>
<td>ホームページサンプル株式会社（英語表記 Homepage sample Inc.）</td>
</tr>
<tr>
<th>設立</th>
<td>平成10年1月10日</td>
</tr>
<tr>
<th>事業内容</th>
<td>IT・マーケティング・福祉など</td>
</tr>
<tr>
<th>住所</th>
<td>〒012-3456 見本県見本市サンプル1-2</td>
</tr>
<tr>
<th>電話番号</th>
<td>0123-4567-89012</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>info@example.com</td>
</tr>
</table>
</article>
</section>
|
4-9.【8】写真ギャラリー部分の編集
写真ギャラリーのページですので「写真ギャラリー」部分を編集していきます。
見本ボランティアセンターの写真ギャラリーでは写真を6個から12個に増やし、ギャラリーの写真をクリックすると大きな写真が別ウィンドウで開くように変更しています。
写真の編集方法は「実際にサイトを作ってみよう（トップページ編）」の「2-12.メイン画像の変更」部分を参考にして画像を作成してください。ホームページに表示されているサムネイル画像は「gallery◯.jpg」という名前で、拡大される大きな画像は「photo◯.jpg」という名前でimagesフォルダに保存します。
|
変更前
<section class="content" id="gallery">
<h3 class="heading">写真ギャラリー</h3>
<article>
<figure class="grid"><a href="subpage.html"><img src="images/gallery1.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery2.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery3.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery4.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery5.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery6.jpg" width="190" height="140" alt=""></a></figure>
</article>
</section>
|
|
変更後
<section class="content" id="gallery">
<h3 class="heading">見本ボランティアセンターの写真ギャラリー</h3>
<article>
<figure class="grid"><a href="images/photo1.jpg" target="_blank"><img src="images/gallery1.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo2.jpg" target="_blank"><img src="images/gallery2.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo3.jpg" target="_blank"><img src="images/gallery3.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo4.jpg" target="_blank"><img src="images/gallery4.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo5.jpg" target="_blank"><img src="images/gallery5.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo6.jpg" target="_blank"><img src="images/gallery6.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo7.jpg" target="_blank"><img src="images/gallery7.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo8.jpg" target="_blank"><img src="images/gallery8.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo9.jpg" target="_blank"><img src="images/gallery9.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo10.jpg" target="_blank"><img src="images/gallery10.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo11.jpg" target="_blank"><img src="images/gallery11.jpg" width="190" height="140" alt=""></a></figure>
<figure class="grid"><a href="images/photo12.jpg" target="_blank"><img src="images/gallery12.jpg" width="190" height="140" alt=""></a></figure>
</article>
</section>
|
4-10.【9】サイドメニュー部分の編集
この部分はコンテンツページと共通になります。「実際にサイトを作ってみよう（コンテンツページ編）」の「3-10.【9】サイドメニュー部分の編集」で作成したものをコピペして下さい。
4-11.【10】サイド写真付きメニュー部分の編集
見本ボランティアセンターのサイトではサイド写真付きメニューは使用しませんので削除します。
|
下記を削除
<h3 class="heading">ホームページサンプル</h3>
<article>
<ul class="list">
<li><a href="subpage.html"><img src="images/thumb1.jpg" width="42" height="42" alt=""></a>サンプル株式会社では最新技術と自然との調和を目指します。</li>
<li><a href="subpage.html"><img src="images/thumb2.jpg" width="42" height="42" alt=""></a>サンプル株式会社では最新技術と自然との調和を目指します。</li>
<li><a href="subpage.html"><img src="images/thumb3.jpg" width="42" height="42" alt=""></a>サンプル株式会社では最新技術と自然との調和を目指します。</li>
</ul>
</article>
|
4-12.【11】サイドバナー部分の編集
見本ボランティアセンターのサイトではサイドバナーは使用しませんので削除します。
|
下記を削除
<p><a href="subpage.html"><img src="images/side_banner.jpg" width="237" height="63" alt="" class="border" /></a></p>
|
4-13.【12】サイト名部分の編集（「footer」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-7.【7】サイト名部分の編集（「footer」部分）」で作成したものをコピペして下さい。
4-14.【13】連絡先部分の編集（「footer」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-8.【8】連絡先部分の編集（「footer」部分）」で作成したものをコピペして下さい。
4-15.【14】フッターナビゲーション部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-9.【9】フッターナビゲーション部分の編集」で作成したものをコピペして下さい。
4-16.【15】コピーライト部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-10.【10】コピーライト部分の編集」で作成したものをコピペして下さい。
4-17.タイトル、metaタグの変更
この部分はトップページと同じ編集方法となります。「実際にサイトを作ってみよう（トップページ編）」の「2-11.タイトル、metaタグの変更」部分を参考にしてページに合う内容に編集して下さい。
4-18.メイン画像の変更
この部分はトップページと同じ編集方法となります。「実際にサイトを作ってみよう（トップページ編）」の「2-12.メイン画像の変更」部分を参考にしてページに合う内容に編集して下さい。画像サイズを幅「660」、高さ「140」で新規作成し、「mainImg2.jpg」という名前でimagesフォルダに保存します。
4-19. 実際にブラウザで確認してみよう
確認方法はトップページと同じとなります。作成したHTMLファイルをブラウザにドラッグアンドドロップで確認して下さい。「実際にサイトを作ってみよう（トップページ編）」の「2-14. 実際にブラウザで確認してみよう」を参考にして下さい。
