スタイルシートカスタマイズの手順例
無料サンプルのスタイルシートをカスタマイズしましょう。
実際に作業する際の手順例をご紹介しています。
FC2無料ホームページでのカスタマイズ例
無料サンプルをカスタマイズする際の実際の手順を、FC2無料ホームページでの作り方を例にご紹介します。ちなみに、FC2無料ホームページへの登録方法自体に関しては、こちらのページをご参考ください。
実際に、私が最近作り始めた健康関連のホームページを例にご紹介します。
ホームページのタイトルやコンテンツの文章の記入
まずは、「ソース」のボタンを押して、ホームページのタイトルを記入しましょう。h1タグで囲まれている部分がタイトルの部分になります。
デフォルトではどこにもリンクしていないので、自分のホームページのURLを指定してリンクタグを作成しましょう。リンクタグのhtmlについては、こちらのページを、、。
テキストのボリュームアップ
次に、テキスト部分のボリュームを増やしましょう。今回、私はh1とh2、それにh3をふたつでページを作成してみました。
トップページのテキストボリュームは、何文字という決まりはないですが、ある程度のボリューム感があった方が検索エンジンでもヒットされやすくなります。今回は、上のようなこんな感じで作成してみました。
スタイルシートで色彩を変更
次に、スタイルシートで色彩を変更してみましょう。どの部分を変更すると、どの部分の色彩が変わるのかについては、こちらのページを参考に、該当する部分に背景色を指定してください。背景色を白に指定する場合は、background-color:#ffffff;を記入します。
background-color:色彩のコード;という感じです。
たとえば、ホームページ全体の背景色を上のようなグレー？にする場合、スタイルシートのbodyの部分に、background-color:#EAEFF5;を記入します。
body {
background-color:#EAEFF5;
}
上の場合、background-color(背景色)に#EAEFF5（グレー）を指定し、color:（テキストの文字色）に#000000（黒）を指定していることになります。間にはさまっている点々は、左右で微妙に違うので（コロンとセミコロンの違い）、正確に半角英数で記入するようにしましょう。
ホームページのcssスタイルシートの部分でご紹介している無料ツールなどを使いながら、インターネット上で適当な色彩を採取してみると簡単です。
枠線などの細かい部分の調節
次に、枠線などの細かい部分を調節しましょう。上のサイトでは、ヘッダーの枠線をを取り、ホームページの外側の線の色彩を多少薄い色にしています。
border-width: 1px;
border-style: solid;
border-color: #A3A8AB;
このようなスタイルシートの場合、上から順に、ボーダーの線幅が１ピクセルで、線種が実線、色彩に#A3A8ABを指定していることになります。
画像などのリピート素材などの設定
次に、背景にリピート素材などを設定しましょう。グラデーション素材などがいい感じかと思います。今回はヘッダーに金色の素材を配置してみました。リピート素材のスタイルシートへの指定方法などについてはこちらのページをご覧ください。
アイコン画像素材などを指定してのCSSカスタマイズ
最終的に、無料のホームページ素材なども使用しながら、デザインを調節するといい感じになるかと思います。無料画像を配布しているサイトの情報についてはこちらを参考に、、。
無料画像のブログで使い方
上の画像のアイコン素材は購入したものですので、無料ではありませんが、自分で作成すると（ＨＰタイトルバナー画像の作り方）わりと簡単かと思います。
だいたい、このような感じで、スタイルシートをカスタマイズしながらホームページのデザインを変更していくと、簡単に作成できるのではないかなと思います。
ちなみに、今回作成したスタイルシートも掲載しておきますんで、自由に使っちゃってください。金の素材などはこのホームページ内でご紹介しているのを使ってますんで、ダウンロードして指定すれば同じ感じになるかと思います。
素敵なホームページになるといいですね、、。