ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

ホームページテンプレートの編集方法:その他のページの編集

前のステップでトップページの共通パーツができましたので、残りページの準備に入ります。

作るページを改めて確認します

  • トップページ(index.html)…梱包のindex.htmlを使います。前のステップで土台はできていますね。
  • 会社概要(company.html)
  • 製品紹介(service.html)
  • よく頂く質問(faq.html)
  • リンク集(link.html)
  • お問い合わせ(contact.html)

トップページ以外の土台ページを作りましょう

トップページとその他ページの構成が全く同じなら、トップのhtmlファイルをそのままコピーして使えるのですが、トップページにはスライドショーが入っていたり、特定のスタイルが指定してあったりする場合があるので、まずはトップ以外の土台ページを作ります。

会社概要ページを土台ページを兼ねて作ります

梱包のcompany.htmlはテンプレートの使い方説明のみのページでしたので新しく作って上書きしたいところですが、後で説明を読む可能性があるので、ひとまず別名にして保存しておきます。これはこのファイルに限らず、後で使うかもしれないパーツが入ったhtmlファイルは上書きや削除をいきなりするのではなく、一旦邪魔にならないファイル名に変更して残しておく事をおすすめします。最終的に不要なファイルはホームページ完成時に削除すればいい事ですので。

company.htmlと、index.htmlを編集ソフトで開きます(メモ帳でも可)

前のステップで作業した共通パーツをindex.htmlからコピーし、そのままcompany.htmlに貼り付けていきましょう。

まずはタイトルタグとmetaタグをcompany.htmlにコピーします

index.htmlの冒頭のtitleタグからmetaタグまでの4行を丸ごとコピーし、company.htmlの同じ場所に貼り付けます。

次はその下のheaderブロックを上と同じように丸ごとコピペしてきます

subブロック内も同じようにコピペしてきましょう

最後にfooter内のcopyright表記もコピペします

これで共通パーツのコピーは完了です。mainブロック内は全体で使いやすいよう一旦削除します。

全部削除してしまうと編集ソフトの編集画面に慣れている人は使いづらいので、h2タグやpタグぐらいセットで残しておいてもいいかと思います。

company.htmlをプレビューで見ると、かなりすっきりとしているのがわかりますね。

さて、土台ページができたので…

このhtmlファイルを他のページ名で保存していきます。その他の方法としては、今までの工程を各ページで改めて行う方法もありますが、面倒なのと間違えそうなのとでやめておきます。

まず、使わないhtmlファイルをバックアップします

上のステップでもやりましたが、使わないhtmlファイルは削除や上書きをするのではなく一旦別ファイル名にして保存しなおしておきましょう。

company.htmlを別名として保存していきます

今回使うhtmlファイルは冒頭にリストアップした通りなので、既にできているindex.htmlとcompany.html以外のページ用に保存していきましょう。この別名でのhtmlファイル保存方法はソフトにより異なるのでご自分の環境で保存していって下さい。

今追加保存したファイルを見てみると…

当然ですが、全部company.htmlと同じものが入っていますので、mainブロック内にあった飾り用の見出し画像も会社概要のままです。これは各htmlごとに追加するなりしておいて下さい。ちなみに、文字の入っていない土台画像がテンプレートのbaseフォルダに入っていますので新規に追加したページ用にご活用下さい。

さて、後は各htmlファイルのmainコンテンツに情報を入力して完成させるのですが

ここで重要なのがバックアップしておいたhtmlファイルたちです。今から会社概要ページと製品紹介ページをこのファイルを使って作り上げていきます。

company.htmlを開きます。

土台ページでしたので、mainブロックは空のままです。
会社概要を入れたいので、テーブルがついているテンプレートのパーツを使いたいと思います。
ずっと前のステップで、「ダウンロードしてきた梱包テンプレート内を一通り見ておきましょう」といった箇所がありましたよね。その時にどのhtmlに使えそうなテーブルタグが入っていたか見たのを思い出してみて下さい。

recruit.htmlファイルに使えそうなテーブルが入っています。このパーツを使いましょう。
バックアップして別名にしていたrecruitファイルをテンプレートフォルダ内から探してみて下さい。当方の環境だと以下の赤枠ファイルが該当しました。

別名にしていたrecruit用ファイルを開き、テーブルのパーツをcompany.htmlにコピペしましょう。

今回もhtml側を見てみます。recruitファイルのmainブロック内に以下のテーブルタグのパーツがあるのでコピーしましょう。

コピーしたら、company.htmlのhtml側を開き、mainブロック内に貼り付けましょう。

後は編集画面側でもhtml側でもどちらでも使い慣れた方で構いませんので会社の情報を入力していってみて下さい。
また、他のページでも同様のテーブルを使いたいなら同じ手順で追加していくといいでしょう。

次は製品紹介ページを作ってみます

上の会社概要と同じステップをふみます。まずは、製品紹介用に使えそうなパーツをバックアップしておいたhtmlからみつけます。service用がよさそうですね。

別名にしていたservice用のhtmlファイルを開きます。

開くとhtml側のmainブロック内にbox1というclass名がついたパーツが沢山あります。全部同じものなので1個をコピーして土台で作っていたservice.htmlに必要な数だけ貼り付けて下さい。

後はサムネイル画像やサンプルテキストを自社用に入れ替えれば完成です。

テンプレートによっては、ボックス内におすすめマークなどを出すスタイルを追加したサンプルもあります。こういったものも必要なパーツ単位でコピーしてhtml側で加えたい場所に追加すれば間違えなく思ったボックスが出来上がります。

以上のようにして各htmlファイルのmainブロック内を自社用に完成させていって下さい

htmlソース側を見ただけで拒否反応が出る人も多いかとは思いますが、中途半端に編集画面側で編集してしまうとhtml側がぐちゃぐちゃになって取り返しがつかなくなる場合もあるので、最低限の土台などはhtml側で準備してあげて、後の変更(テキストの入れ替え、画像の入れ替えなど)を編集画面側で行うと不具合も出にくくなりますのでおすすめです。

完成させたら、バックアップで残していたhtmlファイル類を削除しましょう

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

マニュアル通りに頑張ってるんだけど、思ったようにできないっ!!

という人のための質問掲示板もあります。ご活用下さい。

↑ PAGE TOP