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

テンプレートパーティー

ホームページテンプレートの編集方法:土台作り

さて、ここからはいよいよホームページテンプレートの編集作業です。

解説に使うテンプレートはtp_biz18です

この解説では、メインメニューを画像タイプorテキストタイプどちらも選択可能なtp_biz18_white_blueを使用しますがその他のテンプレートでも基本は同じです。

ダウンロードしてきたテンプレートフォルダ内を見てみましょう

テンプレートにより、梱包内容は若干異なりますがhtmlファイル数枚とbaseやcssなどのフォルダ類が数枚です。

拡張子が見えない場合…上のサンプル画像の「index.html」などの.htmlという拡張子部分が見えない人はこちらをご覧下さい。これが見えていないと色々と不便なので見えるようにパソコン側の設定をします。

各フォルダの梱包内容は以下の通りですのでご参考までに。

  • baseフォルダ…imagesフォルダ内で使っているロゴやメニューなどの画像素材の文字なしの土台画像が梱包されています。お手持ちの画像ソフトで編集し、そのままimagesフォルダに上書きすれば簡単に画像の入れ替えができます。
  • cssフォルダ…スタイルシートファイルが入っています。テンプレート専用のファイルはstyle.cssになります。print.cssというのもたまにありますがこれは印刷専用のスタイルです。
  • imagesフォルダ…テンプレートで使っている画像素材の全てが梱包されています。
  • jsフォルダ…javascriptファイルが梱包されています。メニューのロールオーバー用のscript.jsやスライドショー用のslide_simple_pack.jsなど。このフォルダがついてないテンプレートもあります。
  • spjフォルダ…XHTMLテンプレートの一部に梱包されていますが、jQuery Mobileを利用したスマートフォン専用テンプレートとなります。一般的なホームページ編集ソフトでは編集できない可能性があるのでhtml側で調整した方がいいでしょう。また閲覧も古いバージョンのパソコンからは正常に見えない場合が多いので、最終チェックはスマホ環境からがおすすめです。

では、利用テンプレートをブラウザで見てみましょう。

トップページは全てindex.htmlというファイルになります。
index.htmlをクリック(又はダブルクリック)するとブラウザでサンプルを見る事ができますのでまず見てみましょう。

見ると、HP最上段に目立つメニューがあります。一番目立っているメニューを当サイトでは分かりやすいよう「メインメニュー」と呼んでいます。プロっぽく表現するならグローバルナビゲーションでしょうか。
このテンプレートの場合、「ホーム」「会社概要」「サービス紹介」「採用情報」「お問い合わせ」と全部で5個のメインメニューがありますね。テンプレートを使う上でこのメインメニューの数を合わせるのは重要なので覚えておきましょう。

メインメニューの数を変更したい場合…画像ソフトやスタイルの調整が必要になる為、ある程度知識がある上級者向けです。初心者の方はテンプレートのメインメニュー数に合わせてページ構成を考えてみて下さい。メニュー数を減らす場合、単純に減らして見た目上で我慢できればそれも可だとは思います。

補足:メインメニューが横並びではなく、縦並びの場合もあります。縦並びのメニューは基本的に数の増減は問題なくできます。

その他のhtmlファイルも全部見ておきましょう

テーブルタグやボックスなどの色々なレイアウトが入っていますので、自分が使うページに使いたいパーツがあればチェックしておきます。

では、自分に合わせた全ページのメニュー構成を考えましょう。

例えば、「トップページ(※これは必須です)」「会社概要ページ」「製品紹介ページ」「よく頂く質問ページ」「リンク集」にするとします。上のステップで述べましたが全部で5個分のメニューが必要です。
会社概要ページ」と「製品紹介ページ」については、サンプルテンプレートのcompany.htmlservice.htmlがそのまま使えそうなのでこれを使う事にしましょう。「トップページ」は全テンプレート共通でindex.htmlになります。

メニュー画像を入れ替えます

文字なしの土台画像はbaseフォルダに入っていますのでそれを使います。元々のメニューの画像ファイル名をチェックしてから同じファイル名のものに文字を入れて下さい。文字を入れたらそのままimagesフォルダに上書きします。

文字をのせたら輪郭がギザギザして汚い、思った色でのせられない場合は…
ほとんどのメニュー画像が色数が限定されたgif形式になっている為、画像ソフトによってはそのまま文字をのせようとすると輪郭がギザギザ汚くなったり、又は希望の色が使えない場合があります。そういった場合は画像ソフトの色数を増色してあげる設定をして下さい。設定方法についてはご利用の画像ソフトメーカー側にお尋ね下さい。また、保存時は、土台テンプレートの画像種類と同じ(gif形式ならgifに)にして下さい。

トップページを編集ソフトで開き、変更したメニューのリンク先アドレスを変更します

現状のままだと変更したメニューのリンク先やalt指定が前のテンプレートのままなので変更していきます。
今回は誰でも変更できるようにhtml側を調整してみますが、編集ソフトになれた人は自分で以下の変更をやってみて下さい。
html側を開き(メモ帳でも可)、上の方にある<ul id="menu">という文字を見つけてみて下さい。基本的に当サイトではこの文字がメインメニューのスタート(最後は</ul>)になります。

間に各メニューが1行ずつ入っているのがわかりますね。html側では縦に並んでいますが、テンプレートのデザイン側はこれが横に並んでいます。どのメニューを変更したかはすぐわかりますよね。今回の場合は左から3つ目と4つ目と5つ目を変えたので、それぞれ変更しましょう。

まず3つ目については、リンク先アドレスはservice.htmlのまま使おうと思うのでそのままにします。alt指定は「サービス紹介」から「製品紹介」にしたのでそのように文字を入れ替えます。

続いて4つ目ですが、これは「採用情報」から「よく頂く質問」に変えたので、リンク先アドレスも変更します。「よく頂く質問」は「faq」や「qa」といった文字をよく使うので今回はfaq.htmlにしておきます。alt指定も変更しましょう。

最後に5つ目です。「お問い合わせ」を「リンク集」にしたので、これもリンク先はlink.htmlに変更しておきましょう。alt指定の変更もお忘れなく。

変更できましたか…?

開始タグと終了タグについて…html側を見ているとお気づきかと思いますが、<p>と</p>や、<strong>と</strong>などをセットでよく見かけます。スラッシュ「 / 」が入っているのと入っていないのとがセットになっていて、入っていない方(<p>や<strong>)が開始タグ、入っている方(</p>や</strong>)が終了を意味するタグです。この中にテキストや画像を入れて使います。これらは入れ子として使う場合もあります。

例:<p>これは段落タグです。</p>
例:<p><strong>これは入れ子になったものです。</strong></p>
入れ子になっていいない例:<p><strong>これは入れ子になっておらず、NGです。</p></strong>

ちなみに、pタグはブロック要素、strongはインライン要素といって意味が異なり、逆の入れ子の形(<strong><p></p></strong>)にすると文法違反になりますが、ちょっと難しいのでここでは割愛します。
また、改行はXHTMLの場合は<br />と記載し、これ1つで終了タグも含めている意味になっています。XHTML以外は<br>と記載しますが終了タグが別に存在する事はありません。

補足:メインメニューがテキストタイプを利用の場合は

当テンプレートはメインメニューを画像タイプではなく、テキストタイプで使う事もできます。画像タイプよりhtml側はシンプルになっているので、変更しやすいかと思います。上の工程と同じように赤枠内を変更して下さい。

他、全ページで共通で使いたい部分はここで全部編集しておきましょう

ロゴ画像を自分用に変更しましょう。alt指定も忘れず。

上のメニュー画像のステップでやったように、ロゴが画像タイプのテンプレートの場合はbaseフォルダにロゴの文字なし土台画像も入っていますので、それにあなたのサイト名をのせてimagesフォルダに上書きしましょう。

今変更したロゴ名にあわせてhtml側のalt=""の部分にもテキストを追加しておきましょう。

titleタグとmetaタグを変更しましょう

どちらもhtml側の上から数行目にありますので探してみて下さい。

<title>と</title>の間に挟まれている部分がtitleタグです。間のテキストをあなたのサイトに合わせて変更します。titleタグはSEO対策上で最も重視されるワードなので念入りに決めて下さい。冒頭に事業内容のワードを入れておいたり、地元で集客したい業者なら県名など入れておくのもいいでしょう。

metaタグは当テンプレートには2か所あります。サイト説明用(description)とキーワード用(keywords)です。 サイト説明用は検索結果に出る場合があるので、見た人が訪問したくなるような文章を入れておきます。キーワードは昔はSEO対策で頑張って設定していましたが今はあまり重要視されていません。が、一応設定しておきます。5~10個ぐらい、サイトに関連するキーワードをカンマ「 , 」区切りで入力しておきましょう。


変更できましたか…?

h1タグを変更しましょう

更に少し下に<h1>と</h1>で囲まれた箇所が1か所あります。ここがh1タグです。テンプレートのデザイン面で見ると小さい文字になっている事がほとんどですが、ここがh1タグになります。文字サイズは小さくなっていますがこれもSEO対策上重要なのでtitleタグ同様念入りに考えて入力しましょう。

hタグについての解説…hタグは見出しを意味します。h1からh6まであり、数字が小さいほど重要度が高いとされます。XHTMLではh1タグは1ページ内に1つが推奨となっていますが、最新のhtml5ではいくつでも入れられるようになりました。

フッターのコピーライト表記を変更しましょう

htmlの下の方に<div id="footer">で開始されているfooterブロックがあるので探します。titleタグ同様にサンプルテンプレート名が入っていますので、ここを変更します。

ちなみに、上記は2012年用です。2013年になったら、2012の数字を2013に変更しましょう。「面倒だ…」という場合、この数字は削除してもらっても構いません。

上記のタグで「&copy;」と見えている部分(太字になっているのは利用ソフトの影響です)は「文字実態参照」を使用したものです。デザイン側を見ると分かりますが、©という風にcopyrightのマークになります。他にも色々ありますので気になる人は検索してみましょう。

左コンテンツも変更しましょう

左コンテンツ(subブロック)にはサンプル用のメニューや説明などが入っています。今回は、左コンテンツ内の一番上の「SUB MENU」パーツと、一番下のフリーエリアを使う事にします。

不要なパーツを削除します。

当サイトのテンプレートは、左右に分かれているブロックのうち、狭い方をsubブロック、広い方をmainブロックとして制作していますので、html側を見ればすぐ見つけられます。subブロックを見つけたら、今回削除するブロックを見つけます。大きなブロックごとに改行を空けている(少し前のタイプは空いてないものもあります)ので比較的判断しやすいかと思います。
尚、html側での改行自体はデザイン面には全く関係ないので、自分の使いやすいように変更してもらって構いません。

上記画面の一番下の行の<!--/sub-->というのは「サブブロックの終了タグですよ」、という説明用のコメントタグです。実際のsubブロックの終了タグは上の行の</div>になるのですが、この</div>というタグはhtml内のあちこちにある為、開始タグから離れているとどのタグの終了タグかわからなくなるので説明(コメント)としてつけているものです。コメントはなくてもレイアウト上問題ありません。
コメントタグ自体は<!--ここにコメント-->と書くもので、デザイン面では見えず、html側でのみ見る事ができるタグです。他にも沢山入っているので見てみるといいでしょう。
ちなみにcssファイルのコメントタグは/*ここにコメント*/です。

削除完了しましたか?

以下のようになればOKです。ブラウザでプレビュー確認しておかしくないかなど見ておくとより安心です。編集ソフトのデザイン面だとレイアウトが崩れてみえる場合が多いので、デザインの確認は必ずブラウザ(Internet ExplolerやFirefoxなど)で行って下さい。

h3タグとsubmenuを自社用のものに変更してみましょう。

基本的なものは上のステップで行ったメインメニューと同じです。メニューテキスト名とリンク先アドレスを変更するだけです。今回は、以下のようにしてみましたが自社用に合わせて調整してみて下さい。

もう1つ残したブロックには、お問い合わせ用の画像バナーを置いてみましょう。

当サイトのテンプレートでは、メインメニュー内にお問い合わせメニューを置いている場合が多いのですが、今回はパーツが足りなかったのでここに目立つようなバナー画像を置いてみます。あまり目立たせたくないなら、上のsubmenuパーツを使って下さい。
残っているパーツに、画像を置く場合の最大幅の説明があるのでそれを読んで下さい。当テンプレートの場合、「段落タグ外なら幅220pxまで」と書いてあるので幅220pxのバナー画像(↓)を準備します。以下画像はそのまま使ってもらっても構いません。

バナー画像の配置は編集ソフトで行ってみます。

画像の配置はhtml側のみでの作業だとちょっと難しいので、編集ソフト側から行ってみます。色々なやり方があると思いますので、お手持ちのソフトに合わせてバナー画像を入れてみましょう。

画像を置いたら、編集ソフト側はそれ以降触らないようにして見てみます。
当サイトの環境の場合、少し右に飛び出て配置されたように見えますね。編集面では原因がわからないのでそのままhtml側を見てみましょう。切り替えができない場合は一旦保存してhtml側が見えるソフトで見てみて下さい。

上のステップで「触らないように」と書いているように、移動直後からそのままの状態でhtml側を見ると、画像タグが反転しているのがわかります。(※ご利用の編集ソフトにより、こうならない場合もあり。)

見てみるとすぐわかるかと思いますが、<p>という段落タグの開始直後に画像が入ってしまっているのがわかります。
今回は段落タグ外に置きたいので、段落タグから出してあげる必要があります。
現在選択されている状態なので、そのまま切り取り(Ctrl+Xか、右クリックして出てきたメニューから「切り取り」を選択)をし、<p>の上の行に入れましょう。また、説明文が入っていた段落タグ<p>パーツは使わないなら削除しましょう。

ブラウザで見てみましょう

今回は段落タグの外に出したため、余白が入らない形になって上のh3タグにくっついてしまっています。
h3タグの下に余白を入れてみましょう。

html側を開き、以下のようにclass="mb1em"を追加します。
このスタイルは梱包のstyle.cssに設定済である可能性が高いので、ほとんどのテンプレートではこれだけで余白が出るようになります。

再度、ブラウザで見てみましょう。

以下のように適度な余白がとれていればOKです。このお問い合わせバナーには、メインメニュー作業でやった時同様に、リンク設定やalt指定も行っておいて下さい。
また、h3タグのテキスト情報も「お問い合わせ」などに変更しておいて下さい。

……又は、今ちょっと思いましたが、ここのh3タグはなくてもよかったかもしれませんね。。。すみません。

共通設定完了です

では、その他のページの作業に入りましょう。

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

↑ PAGE TOP