商用利用可能な無料ホームページテンプレート・無料WordPressテーマ

→編集前のページ：
https://f-tpl.com/sample/tpl_005/subpage.html

→完成した「見本ボランティアセンター」のお知らせ・ニュースページ：
https://f-tpl.com/sample/volunteer/news.html

1.「tpl_005」フォルダの中にある subpage.html をテキストエディタで開いて下さい。

2.内容は変更せずに別名で保存して下さい。このページでは見本ボランティアセンターの作成例ですので「news.html」を複製して作成しています。

ただし、1点だけ編集する必要があります。

subpage.html のメニューでは「会社情報」の部分に「class="active"」がついていますがお知らせ・ニュースのページはこのヘッダーメニュー部分に含まれませんので「class="active"」は削除して下さい。

変更前

<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" id="1">被災地の支援について</h3>
<article>
<p>見本ボランティアセンターでは被災地の支援活動を行なっています。実際に被災地へ行き、炊き出しやがれき処理などの作業を行っています。一日も速い復興のためにご協力をお願い致します。</p>
</article>
</section>

<section class="content">
<h3 class="heading" id="2">募金活動ボランティア募集中</h3>
<article>
<p>2013年5月5日に見本駅前にて募金活動を実施します。現在募金活動ボランティアに参加して頂ける方を募集しています。午前10時から午後1時までの活動となります。</p>
</article>
</section>

<section class="content">
<h3 class="heading" id="3">センターの説明会を開催します</h3>
<article>
<p>見本ボランティアセンターの活動内容やボランティア募集に関する説明会を見本会議室で開催します。お誘い合わせの上、是非ご参加下さい。</p>
</article>
</section>

<section class="content">
<h3 class="heading" id="4">交流会の開催について</h3>
<article>
<p>県外のNPO法人との交流会を実施します。ボランティア活動や各種活動の情報交換を目的とした会合です。参加費は無料で2013年5月5日に見本ボランティアセンター内の会議室で開催します。</p>
</article>
</section>

<section class="content">
<h3 class="heading" id="5">センター施設のご案内</h3>
<article>
<p>見本ボランティアセンター施設の見学会を実施します。参加費は無料です。活動内容やボランティア募集に関する説明会も同時開催となりますのでお誘い合わせの上、ご参加下さい。</p>
</article>
</section>

下記を削除

<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>

下記を削除

<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>

下記を削除

<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>

下記を削除

<p><a href="subpage.html"><img src="images/side_banner.jpg" width="237" height="63" alt="" class="border" /></a></p>

以上で全てのページの作成が完了しました。あとは作成したページをリンクでつなげていく作業を行えば制作は完了となります。もう一息、頑張りましょう！