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

テンプレートパーティー

ページごとにテーマカラーが変わるカラフルテンプレートにカスタマイズする方法

当サイトのテンプレートのほとんどが、全10カラーずつ配布されています。各カラーごとに分かれているテンプレートがメインですが、せっかく色が沢山そろっているのでこれを組み合わせて、ページごとにテーマカラーが変わるカラフルなテンプレートにカスタマイズしてみましょう。

使用テンプレートは…

メニューが画像タイプ、h2やh3の見出しは背景画像タイプで構成されているtp_biz11にします。
土台とするテンプレートはトップページのテーマカラーになりますので、じっくり選んで下さい。今回は、全体的にやさしいカラーで統一したいので、トップページは水色タイプにしました。

メインメニューの数だけカラーを決めましょう

tp_biz11のメインメニューは全部で5個あります。
各ページごとにテーマカラーを変えるわけですので、5色の組み合わせを考えていきましょう。お好みでチョイスしてもらって構いません。
今回の例題では、左から「水色(skyblue)」「黄緑(green02)」「オレンジ(orange)」「ピンク(pink)」「茶色(brown)」をチョイスする事にしました。

チョイスしたカラーでメニュー画像を揃えましょう

土台テンプレートにメニューの1つめ(水色)は入ってますので、2つ目以降のメニューをもってきます。
2つ目は黄緑(green02)なので、tp_biz11_green02のテンプレートをDLし、imagesフォルダに入っている「menu_02.gif」と「menu_over_02.gif」をもってきます。
3つめはオレンジ(orange)なので、tp_biz11_orangeの「menu_03.gif」と「menu_over_03.gif」をもってきます。同じ手順で5色分揃えていきましょう。

ここで一旦プレビュー


土台テンプレートのindex.htmlをプレビューで見てみましょう。メニューがカラフルに入れ替わっていれば成功です。マウスオン時の画像も間違えていないか確認しておいて下さい。尚、ブラウザによってローカル上でのプレビューだと警告が出る場合があるのでその場合は警告を解除してあげて効果が見えるようにしておきましょう。

トップページ以外の編集に入ります

各メニューカラーに合わせてページごとにテーマカラーを変えていきます。
まずは、2ページ目以降に名前を付けてあげましょう。
今回は分かりやすいように、
2ページ目(会社概要/company.html)=page2
3ページ目(サービス/service.html)=page3
4ページ目(採用情報/recruit.html)=page4
5ページ目(お問い合わせ/contact.html)=page5
にします。

html側に上記で決めた名前を記載していきます

2ページ目は会社概要なのでcompany.htmlファイルを開き、htmlが見える状態にします。
<body>という行が上の方にありますのでそこに上で決めたページ名(page2)を加えます。

idではなくclassを付けた理由…当サイトのテンプレートにはbodyタグにid値のついたタイプが多くある為、今回は複数指定が可能なclassを使いました。
もし「c1」というid値がついていた場合、<body id="c1" class="page2">のようにすればOK。
また、すでに「c1」というclass指定がある場合だと<body class="c1 page2">のように半角スペースで区切って追加すればOKです。

同じ手順で残りのページもclassを指定していって下さい。page3、page4、page5、と数字を変更するのをお忘れなく。

名前がついた所で、2ページ目(company.html)からカラーチェンジしていきます

まだhtmlに名前がついただけなので、company.htmlはメニュー以外は土台テンプレートのままです。
今、水色に見えている部分を全部黄緑にしていきます。

まずは、ヘッダー上部のh1タグ部分の水色のラインから変えます。

tp_biz11_green02のimagesフォルダから「header_bg.gif」を持ってきたいのですが、土台テンプレートと同じ画像ファイル名なのでファイル名を変更してから持ってくる必要があります。
上でつけたpage名と同じ要領で「header_bg_page2.gif」とでもしてみましょう。

次にロゴ画像、TEL画像をもってきます

上と同じ要領で、ロゴ画像名、TEL画像名を変更してからimagesフォルダに持ってきます。
ロゴは「logo_page2.gif」、TELは「tel_page2.gif」にします。

subコンテンツのh3見出しの背景画像をもってきます

画像ファイル名は「title_bg1_page2.gif」にします。

サンプルテンプレートのsubブロック最上段に入っている画像のh3タグはテキストタイプに変更しておいて下さい。画像のまま使う場合は単に使いたい色の画像を準備して配置するだけなので、今回の例題からは外させて頂きます。

2ページ目(company.html)の画像の移動は以上で終了です。残りページも同じ手順で作業します。

他に色の付いたh2見出しのラインや、フッターの色についてはcssファイルで直接色を指定してありますので、2ページ目(company.html)の画像の移動はこれで完了となります。
3ページ目以降も、同じ手順で必要な画像をもってきて下さい。数字部分がページごとに変わるので間違えないように。

全ページ分の画像の移動が完了したら、style.cssの編集に入ります

cssフォルダに入っているstyle.cssをテキストエディタなどで開きます。
まず2ページ目(company.html)にスタイルを追加していきましょう。

ヘッダー背景画像を変えます

トップページのスタイル内から背景画像の行をコピーし、2ページ目(company.html)用として追加します。上のステップでbodyタグ部分を<body class="page2">としましたので「.page2 #header」というスタイル名にして背景画像もheader_bg_page2.gifに変更します。この「.page2」というのは「class="page2"」と同じ意味です。htmlだと「class」と記載しますがcssだと「.」と記載するだけです。ちなみにhtmlの「id」はcssだと「#」です。
尚、bodyタグのclass指定なので「.page2」でなく「body.page2」でもいいのですがこの辺は編集する側によってどこまで記載するか判断が変わります。ちょっと説明が長くなりましたが、「.page2 #header」というのは、「.page2」というclass指定がある中の「#header」ブロックに対してという意味になります。

背景のスタイル記載方法について、このサンプルではbackground-imagebackground-colorなど1行ずつ別々に記載されていますが、backgroundとして1行にまとめているスタイルもあります。この場合も同様に、1行丸ごとコピーし、変更が必要な部分だけを変更してもらえればOKです。

ロゴと電話番号を入れ替えます

ロゴと電話番号画像は、html上に実際に配置している画像なので、直接読み込んでいるファイル名を変更しておいて下さい。cssの編集はこれらについては不要です。

mainブロック内のh2見出しタグ背景画像を変えます

ヘッダー背景画像の時と同じような感じですが、今度は背景画像ではなくh2の下線の色を変更するスタイルを設定します。

subブロック内のh3見出しタグ背景画像を変えます

h3の背景画像は上のステップで移動してきたものを読み込み直します。これもヘッダーの際と同じような手順です。

SUB MENUのマウスオン時の背景色を変えます

フッターの背景色を変えます

メインブロック内で色のついたテキスト(color1)も変更したい人は変更して下さい

color1のスタイルを使わない人は追加編集は不要です。

以上で2ページ目(company.html)の調整は終了です。プレビューで見てみましょう。

以下のように、メニューのカラーと統一されていれば成功です。

残りのページも同じ手順で変更していって下さい。

変更が完了すれば完成です。左の画像をクリックすれば調整後のサンプルを見る事ができます。
尚、必要に応じて、リンクカラーやサービスページのmainブロック内にあるbox2のh3見出しカラーなども変更してみて下さい。

マニュアル通りにやったけどうまくできない!という人は

こちらのサポート掲示板をご利用下さい。

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

↑ PAGE TOP