はじめに

サイト用テンプレートを使った、ホームページの作り方をご紹介しています。今回は、CSSファイルに手を加えることで、自分好みにアレンジしてサイトを作る方法です。

テンプレートを使って作るホームページの作り方 -CSS編-

必要なもの

  • サイトテンプレート
  • テキストエディタ
テンプレートはお好みのものを使ってください。「サイト テンプレート」で検索をかけると色々出てきます。

今回は、テンプレート配布サイトのLoveAppleさんからテンプレートをお借りしました。
エディタは、HTMLタグが分かりやすいようにサクラエディタを使用しています。

STEP1:ダウンロードしたテンプレートを開く

テンプレートをダウンロードしたら、中身を確認してください。まず、READ MEのようなファイルがある場合は開いて、書いてあることを読みます。使い方や、使用における注意などが書かれているので、必ず読むようにしましょう。

STEP2:index.htmlを開く

index.htmlを開き、どのようなサイトになっているかを確認します。閉じなくてもOKです。ピンクの部分を変更しようと思います。

ダブルクリックして、普通に開けば、自分の普段使っているブラウザで開くことができます。

STEP3:cssファイルをテキストエディタで開く

stylesheet.cssの上で右クリックし、任意のテキストエディタで開きます。

cssファイルは、それぞれのテンプレートによって名前が違います。.cssという拡張子がついているものを開きます。

STEP4:内容を変更する

変更したい部分を変更し、上書き保存します。今回は、リンクの文字の色を変更させてみたいと思います。

A:link {color:#4682b4;}

A:link {color:#ff1493;}

つまり、deeppinkに変えてみました。

万が一、失敗したことを考えて、ダウンロードした元のファイルをコピーして保存しておくといいです。

STEP5:再び、index.htmlを開く(更新する)

2と同じようにして、index.htmlを開くか、開いたままであれば、更新してください。変更された部分が反映されています。

このようにして、サイトをアレンジしていきます。

文字の色について

文字の色を変更するためには、「#」から始まる英数字の部分(RGBの16進数)を変更することによって出来ます。

  • 色辞典:定番の色ならこちらで見つかります。
  • COLOURlovers:色のアイディアに迷ったら、こちらのサイトがおすすめです。(HEXというのが16進数です)

おわりに

いかがでしたでしょうか。テンプレートを使うことによって、ホームページを作る時間が大幅に短縮できると思います。

インターネット上にはとても素敵なテンプレートが沢山あります。是非色々探してみて、自分の気に入ったデザインのもので試してみてください。

HTMLタグに関しては、こちらも参考にしてみてください。HTMLタグを使って作るホームページの作り方(WIN向け)