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

メニューを表示

STEP5.実際にサイトを作ってみよう(表・テーブル編)Manual

写真

このページではサイトの「見本ボランティアセンター」のサイトで言うと「団体概要」にあたる部分の編集方法を解説しています。

ホームページ制作の準備がまだの方は「実際にサイトを作ってみよう(準備編)」で作成前の準備を行って下さい。


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

→完成した「見本ボランティアセンター」の団体概要ページ:
https://f-tpl.com/sample/volunteer/about.html


STEP.5 表・テーブル部分を編集しようManual

5-1.subpage.html を複製しよう

トップページ以外のページを作成する際には「subpage.html」を複製して作成していきます。

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

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

subpage.html は下記のキャプチャような構成になっていますので各部分を編集していきます。「共通」と書かれている部分はトップページ・もしくはコンテンツページと共通の部分です。

とりあえず、画像はそのままで文字のみを編集していきましょう。

キャプチャ

5-2.【1】h1部分の編集

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-1.【1】h1部分の編集」で作成したものをコピペして下さい。

5-3.【2】サイト名部分の編集(「header」部分)

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-2.【2】サイト名部分の編集(「header」部分)」で作成したものをコピペして下さい。

5-4.【3】連絡先部分の編集(「header」部分)

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-3.【3】連絡先部分の編集(「header」部分)」で作成したものをコピペして下さい。

5-5.【4】ヘッダーメニュー部分の編集

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-4.【4】ヘッダーメニュー部分の編集」で作成したものをコピペして下さい。

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

subpage.html のメニューでは「会社情報」の部分に「class="active"」がついていますので現在自分が編集している項目の「li」に「class="active"」を移動しましょう。

※注意:「class="last"」となっている部分に「class="active"」を挿入したい場合には「class="last active"」のように半角スペースを入れて「active」を挿入して下さい。

5-6.【5】メイン画像部分の編集

この部分はコンテンツページと共通になります。「実際にサイトを作ってみよう(コンテンツページ編)」の「3-6.【5】メイン画像部分の編集」で作成したものをコピペして下さい。※ページにあわせて文言や画像を変更してもOKです。

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

5-8.【7】表(会社概要)部分の編集

ここのテーブル部分を使って団体概要について記載していきます。

今回はサンプルよりも2行分増やしています。行を増やす場合には<tr>〜〜〜</tr>をひとかたまりとして複製して下さい。

変更前

<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">
<h3 class="heading">団体概要</h3>
<article>
<table class="table">
<tr>
<th>団体名</th>
<td>見本ボランティアセンター</td>
</tr>
<tr>
<th>設立</th>
<td>平成20年10月15日</td>
</tr>
<tr>
<th>活動内容</th>
<td>各種ボランティア活動・資金支援・技術援助・環境改善活動など</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>
<tr>
<th>メンバー</th>
<td>50名(2013年時点)</td>
</tr>
<tr>
<th>代表者</th>
<td>見本 太郎</td>
</tr>
</table>
</article>
</section>

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

5-10.【9】サイドメニュー部分の編集

この部分はコンテンツページと共通になります。「実際にサイトを作ってみよう(コンテンツページ編)」の「3-10.【9】サイドメニュー部分の編集」で作成したものをコピペして下さい。

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

5-12.【11】サイドバナー部分の編集

見本ボランティアセンターのサイトではサイドバナーは使用しませんので削除します。

下記を削除

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

5-13.【12】サイト名部分の編集(「footer」部分)

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-7.【7】サイト名部分の編集(「footer」部分)」で作成したものをコピペして下さい。

5-14.【13】連絡先部分の編集(「footer」部分)

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-8.【8】連絡先部分の編集(「footer」部分)」で作成したものをコピペして下さい。

5-15.【14】フッターナビゲーション部分の編集

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-9.【9】フッターナビゲーション部分の編集」で作成したものをコピペして下さい。

5-16.【15】コピーライト部分の編集

この部分はトップページと共通になります。「実際にサイトを作ってみよう(トップページ編)」の「2-10.【10】コピーライト部分の編集」で作成したものをコピペして下さい。

5-17.タイトル、metaタグの変更

この部分はトップページと同じ編集方法となります。「実際にサイトを作ってみよう(トップページ編)」の「2-11.タイトル、metaタグの変更」部分を参考にしてページに合う内容に編集して下さい。

5-18.メイン画像の変更

この部分はトップページと同じ編集方法となります。「実際にサイトを作ってみよう(トップページ編)」の「2-12.メイン画像の変更」部分を参考にしてページに合う内容に編集して下さい。画像サイズを幅「660」、高さ「140」で新規作成し、「mainImg2.jpg」という名前でimagesフォルダに保存します。

5-19. 実際にブラウザで確認してみよう

確認方法はトップページと同じとなります。作成したHTMLファイルをブラウザにドラッグアンドドロップで確認して下さい。「実際にサイトを作ってみよう(トップページ編)」の「2-14. 実際にブラウザで確認してみよう」を参考にして下さい。

白背景専門の無料写真素材サイト PAKUTASO/ぱくたそ-WEB制作デザイン向けの無料写真素材/商用可能
ページトップへ戻る