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

テンプレートパーティー

ホームページテンプレートのカスタマイズ方法のご紹介

土台となるテンプレートをダウンロードしましょう。

まずは土台となるgoods2_pink02テンプレートをダウンロードし、解凍しておきましょう。
今回はpink02の色を使いましたが、より比較しやすくする為対照的なものを選んだだけで実際はどのカラーを選んで頂いても構いません。

解凍できない場合、Vector(※外部サイトです)などで解凍ソフトを探してみて下さい。zip形式を解凍できるものであればどれでも構いません。

実際にどんなデザインかプレビューで見てみます。

index.htmlを開いてみると、柔らかい印象の女性っぽいカラーテンプレートが出てきました。
これをビジネス系に変更していきます。

まず全体の印象を決めるメイン写真を入れ替えます。

goods2_pinkテンプレートには雑貨屋イメージの写真が入っていますので、これをビジネスイメージに変更します。メイン画像を変更するだけで全体の印象も代わりますし、使うカラーも決めやすくなります。
インターネット検索で「フリー写真」など検索すれば色々なサイトが出てきますが、今回は当サイトの姉妹サイトのPHOTO-CHIPSを使ってみます。商用利用も問題ないので、テンプレート編集時に是非ご活用下さい。

画像が決まったら、テンプレート内メイン画像と置き換えましょう。

今回は、より「ビジネスチックな会社」である事をイメージし、ビルの写真(No.153)を使ってみます。テンプレートのimagesフォルダ内にある、container_bg.jpgがメイン画像なのでこれをお手持ちの画像ソフトで開きます。開いたら、ビルの写真のレイヤーを元画像の上に重ねましょう。レイヤー機能が搭載されていないソフトもあるのでこの場合はビルの写真本体をcontainer_bg.jpgのサイズに切り抜いて使って下さい。

元画像と同じような雰囲気でマスク処理(一部が消えてみえるような処理)をかけます


別にマスク処理でなくても、消しゴム機能とかで問題ありません。また、テンプレート画像と同じようにではなく、サイズを変えたり、消す範囲を変更して違いを試してみるのもいいでしょう。
できたら、上書き保存します。

Photoshopソフトをお持ちでライセンス会員の特典(PSDファイル取得)を受けられた方は、psdフォルダ内のcontainer_bg.psdのメイン写真レイヤーのすぐ上に置き換えたい画像を配置すれば、元画像と全く同じマスク処理をかけられますので便利です。

ビルの写真に置き換わったテンプレートをプレビューで見てみます

まだかなりチグハグな印象ですが、何となくビジネスの雰囲気が出てきました。
では、ピンクのテーマカラーをビジネス系に変更していきましょう。

ロゴを変える

ロゴは、文字なしの土台画像がbaseフォルダに入っていますので、これをお手持ちの画像ソフトで開きます。
開くと分かりますが、女性っぽいレースの飾りが邪魔ですね。これを消してみましょう。

Photoshopソフトをお持ちでライセンス会員の特典(PSDファイル取得)を受けられた方は、psdフォルダ内のlogo.psdを使えば、レースのレイヤーを簡単に削除する事ができます。

柄の入っていない部分を選択し、レースの上に広げます。

色をビジネスっぽく変更してサイト名をのせましょう。

お手持ちのソフトによって色々方法はあるかと思いますが、色の調整が可能なものが多いと思いますのでそれをご活用下さい。どうしてもできなかった場合、同じサイズにして自分オリジナルの画像を作ってみてもいいでしょう。そのほうが早くてイメージに合う色になる可能性が高い場合もあります。

ロゴと同じ手順で、h2タグの見出し背景画像も変更します。

こちらの画像は角が丸くなっており、レースが入っている部分を消しづらいと思うので、思い切って両サイドまで広げて四角形に変更してみましょう。

意外にこのほうがビジネスっぽくて、角が丸いよりいいかもしれません。

ロゴと同じ手順で、HPの外側の背景画像(bg.gif)も変更します。

ロゴと同じ手順だと、かなり濃い色になりますので、背景画像はゼロから作り直して頂いても構いません。

続いて、ロゴ下のメニューの配色も調整します。

goods2テンプレートのメニューはテキストと背景色で構成されているので、梱包のcssフォルダ内にあるstyle.cssで簡単に変更できます。以下の赤枠内をまずロゴカラーに合わせて変更してみましょう。
今回は、上から「#2531AD」「#1f2080」「#2531AD」に変更しました。

さて、テンプレートがどのような雰囲気になったか見てみましょう。

かなりビジネスっぽくなってきました。
現時点で気になるのは、HPの背景画像が途中からピンクになってしまっている点です。
これを編集していきます。

HPの背景色をブルーに変更します。

梱包のstyle.cssを再度見ます。HPの外側背景設定は、bodyのパーツで設定しています。
上の方にありますので探してみましょう。「background-color」というのが「背景色」の設定部分です。

途中で切れているブルーとなじませる為には、途切れる直前のブルーの色を抜き出してここに設定しなおせばいい事になります。切れた部分の色は「#2541C6」なので、このカラーコードと入れ替えましょう。

なぜ背景画像が途中で切れてしまっていたのかというと、この画像内のbackground-repeatとbackground-positionの影響です。「repeat-x」で背景画像をX軸(横軸)にリピート、「top」で上部に固定配置させている為、背景画像がHPの上に横並びで敷き詰められた形になって、その下が空白になってしまっている状態になっているのです。これらの2行がない場合、よく見かける延々と背景画像が敷き詰められたタイプになります。

改めてプレビューで見てみると…

どうですか?きれになじみましたか?
ほぼこれで完成に近いのですが、最後に細かい調整もしておきましょう。

左コンテンツのh3見出しの色もブルー系に。


今回は、メニューの中の色に合わせ、#2531ADに変更しましょう。

リンクの文字色、フッターの背景色、注意書きの文字のピンク色も同じくブルーに変更します。

リンクは上の方に、ピンク色の文字は下の方にあります。

cssファイル内によく出てくる「color」というのは、文字色の事です。
背景色は「background-color」。もしくは背景画像等と含めて「background」で指定する事もあります。

左コンテンツ内のサムネイル写真のマウスオン時のフチ色も変更します。


borderタグは「border」のみだと四辺全体の指定になりますが、それぞれ指定する事もできます。文字の下だけに入れたい場合などは「border-bottom」など。続く数字は線の幅で、真ん中が線種、最後が線の色の指定です。線種はsolid(直線)以外に、dotted(点線。IE6以下だとdashedと同じ見た目にしかなりません)、dashed(破線)、double(二重線。幅を3px以上にしないと効果が分かりません)など他にも色々あるのでスタイルシートの情報サイトなどで検索してみるといいでしょう。

忘れてました。gallery.htmlのh3タグの文字色も変更しておきましょう。

このcssファイルには「#main .box2 h3」と入っています。これは「mainブロック内にあるbox2の中にあるh3タグ」のみを対象に設定を反映させる事ができます。逆に、mainブロックの外や、box2以外では使えないという意味です。box2の外でも使いたいなら、「#main h3」にすればOKです。既に同じスタイルが存在している場合、cssの下の方で記述されているものが反映されます。

最後にテーブルタグ用の見出しの背景色を変更しておきます。


ここで使っているピンクの画像は、imagesフォルダ内にある「bg2.gif」です。ロゴを作った際と同じ手順か、自分オリジナルで作ってみてもいいでしょう。作ったらプレビューで再度見てみます。

途中で色が途切れてしまっているので、HPの背景画像の時と同じようにstyle.css側で背景色の調整をします。

変更したらプレビューで見てみましょう。きれいになじみましたか?

完成です!お疲れ様でした。

ちょっと待って!もちょっとカスタマイズしたんだけど…

という人は、『続・カスタマイズページ』をご覧下さい。

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

↑ PAGE TOP