STEP.3 コンテンツ部分を編集しようManual
3-1.subpage.html を複製しよう
トップページ以外のページを作成する際には「subpage.html」を複製して作成していきます。
|
1.「tpl_005」フォルダの中にある subpage.html をテキストエディタで開いて下さい。
2.内容は変更せずに別名で保存して下さい。このページでは見本ボランティアセンターの作成例ですので「activities.html」→活動内容ページ、「archives.html」→過去の活動ページ、「participants.html」→参加者募集中のページ の3つのファイルを「subpage.html」を複製して作成しています。
|
subpage.html は下記のキャプチャような構成になっていますので各部分を編集していきます。「共通」と書かれている部分はトップページと共通の部分です。
とりあえず、画像はそのままで文字のみを編集していきましょう。
3-2.【1】h1部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-1.【1】h1部分の編集」で作成したものをコピペして下さい。
3-3.【2】サイト名部分の編集（「header」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-2.【2】サイト名部分の編集（「header」部分）」で作成したものをコピペして下さい。
3-4.【3】連絡先部分の編集（「header」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-3.【3】連絡先部分の編集（「header」部分）」で作成したものをコピペして下さい。
3-5.【4】ヘッダーメニュー部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-4.【4】ヘッダーメニュー部分の編集」で作成したものをコピペして下さい。
|
ただし、1点だけ編集する必要があります。
subpage.html のメニューでは「会社情報」の部分に「class="active"」がついていますので現在自分が編集している項目の「li」に「class="active"」を移動しましょう。※この「class="active"」は現在このページにいますよということをわかりやすくするために、メニューの色を他よりも少し濃くするための設定です。
※注意：「class="last"」となっている部分に「class="active"」を挿入したい場合には「class="last active"」のように半角スペースを入れて「active」を挿入して下さい。
|
3-6.【5】メイン画像部分の編集
メイン画像部分を編集しましょう。ここではメイン画像の左下に表示されている文字を編集します。この部分の文字はページごとに変更しても良いかと思いますが、今回は解説をわかりやすくするためにトップページと共通の文言にしています。メイン画像の変更方法は後ほど説明します。
|
変更前
<!– メイン画像 –>
<div id="mainBanner">
<img src="images/mainImg2.jpg" width="660" height="140" alt="">
<div class="slogan">
<h2>自然との調和を目指す企業です</h2>
<p>ホームページサンプルは自然との調和を目指します。<br>革新的な技術で世の中を動かす企業を目指します。</p>
</div>
</div>
<!– / メイン画像 –>
|
|
変更後
<!– メイン画像 –>
<div id="mainBanner">
<img src="images/mainImg2.jpg" width="660" height="140" alt="">
<div class="slogan">
<h2>ボランティアで地域貢献を目指す</h2>
<p>より豊かでより充実した地域社会づくりを<br>様々な活動を通して地域に貢献を目指す団体です。</p>
</div>
</div>
<!– / メイン画像 –>
|
3-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>
|
|
変更後
<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>
|
3-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>
|
3-9.【8】写真ギャラリー部分の編集
このページでは写真ギャラリーは使用しませんので削除します。
|
下記を削除
<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>
|
3-10.【9】サイドメニュー部分の編集
トップページ以外のページに出るサイドメニュー部分を編集します。見本ボランティアセンターのサイトではこの部分はお知らせなどを表示するスペースにしてみます。2つのメニューリストがありますが、今回は1つにしています。工夫次第で様々な使い方ができますので活用して下さい。リンク先のページの作成方法は後ほど解説します。
|
変更前
<h3 class="heading">革新的な技術</h3>
<article>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</article>
<h3 class="heading">ホームページサンプル</h3>
<article>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</article>
|
|
変更後
<h3 class="heading">お知らせ・ニュース</h3>
<article>
<ul>
<li><a href="subpage.html">被災地の支援について</a></li>
<li><a href="subpage.html">募金活動ボランティア募集中</a></li>
<li><a href="subpage.html">センターの説明会を開催します</a></li>
<li><a href="subpage.html">交流会の開催について</a></li>
<li><a href="subpage.html">センター施設のご案内</a></li>
</ul>
</article>
|
3-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>
|
3-12.【11】サイドバナー部分の編集
見本ボランティアセンターのサイトではサイドバナーは使用しませんので削除します。
|
下記を削除
<p><a href="subpage.html"><img src="images/side_banner.jpg" width="237" height="63" alt="" class="border" /></a></p>
|
3-13.【12】サイト名部分の編集（「footer」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-7.【7】サイト名部分の編集（「footer」部分）」で作成したものをコピペして下さい。
3-14.【13】連絡先部分の編集（「footer」部分）
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-8.【8】連絡先部分の編集（「footer」部分）」で作成したものをコピペして下さい。
3-15.【14】フッターナビゲーション部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-9.【9】フッターナビゲーション部分の編集」で作成したものをコピペして下さい。
3-16.【15】コピーライト部分の編集
この部分はトップページと共通になります。「実際にサイトを作ってみよう（トップページ編）」の「2-10.【10】コピーライト部分の編集」で作成したものをコピペして下さい。
3-17.タイトル、metaタグの変更
この部分はトップページと同じ編集方法となります。「実際にサイトを作ってみよう（トップページ編）」の「2-11.タイトル、metaタグの変更」部分を参考にしてページに合う内容に編集して下さい。
3-18.メイン画像の変更
この部分はトップページと同じ編集方法となります。「実際にサイトを作ってみよう（トップページ編）」の「2-12.メイン画像の変更」部分を参考にしてページに合う内容に編集して下さい。画像サイズを幅「660」、高さ「140」で新規作成し、「mainImg2.jpg」という名前でimagesフォルダに保存します。
3-19. コンテンツ部分の画像を変更
この部分は上記の「メイン画像の変更」と編集方法となります。画像サイズを幅「127」、高さ「140」で新規作成し、「sample1.jpg」「sample2.jpg」という名前でimagesフォルダに保存します。※注意：画像名を変更した場合はHTML側の画像名も必ず変更して下さい。
3-20. 実際にブラウザで確認してみよう
確認方法はトップページと同じとなります。作成したHTMLファイルをブラウザにドラッグアンドドロップで確認して下さい。「実際にサイトを作ってみよう（トップページ編）」の「2-14. 実際にブラウザで確認してみよう」を参考にして下さい。
|
見本ボランティアセンターのホームページでは上記と同じ作業を「activities.html」→活動内容ページ、「archives.html」→過去の活動ページ、「participants.html」→参加者募集中のページ の3ページで行なっています。
|
