ホームページのcss(スタイルシート)でデザイン変更
ホームページのデザイン変更はcssスタイルシートで。
ひながたのサンプルを例にカスタマイズしましょう。
cssスタイルシートで色彩を変更
無料ホームページで色彩やレイアウトなどのデザインを変更する場合はcssで一括して変更しましょう。
無料サンプルのcssスタイルシートには、このサイトとまったく同じものが入っているんで、色彩やレイアウトを変更して、オリジナル感あふれるあなた色のホームページを作成するといいと思います。（追記：最新版が後ろのページにあります。）
このcssスタイルシートで色彩を指定している箇所は、#E9F6F4 などのシャープのあと６桁の数字になっています。この６桁の数字を変更することで色彩を変更することができます。
色彩の数字コードがわからない場合はパワースポイトなどの無料の色彩採取ツールをダウンロードして、こんな色にしたいという色彩の数字コードを調べてみると分かりやすいです。
採取したい色彩にカーソルをあわせて、スペースキーを押せば数字コードが表示されます。
body の background-color やＨ１の色彩、font-size の大きさを変更するだけでもかなり印象が違ってくるはずです。
【実際のカスタマイズ手順の例】
たとえば、当ホームページのサンプルを使って、上のようなデザインへカスタマイズする際の実際の手順をこちらのページでご紹介しています。
【スタイルシートカスタマイズの例：その２】
シンプルな感じのスタイルシートもおすすめです。サイドバーなどをなくして、テキストコンテンツがメインのシンプルなCSSも簡単だと思います。
cssで背景画像などのデザインを変更
ヘッダーの背景画像を挿入したり、アイコンを挿入することによってホームページのデザインを大きく変えることができてしまいます。
あなたがデジカメなんかを持っている場合は自分の持っている画像や写真をホームページ背景に設定してみるのもいいのではないかなと思います。
背景画像を差し込む場合は読みにくくらならい程度にヘッダーあたりに挿入するのがおすすめです。このホームページにヘッダー画像を挿入してデザイン変更するとこのような感じになります。
また、デジカメをもっていなくて写真画像がない人でも、グラデーション素材をホームページの背景画像に設定するとわりとおしゃれな感じに仕上がることかと思います。
グラデーション素材のホームページの箇所も参考に、自分で作成したり、ウェブ上で無料配布されているものを使用されてみてはいかがかと思います。
ファビコン使用で個性のあるホームページ作り
ホームページを閲覧するときには、ブラウザによってはファビコンが表示される場合もあるかと思います。ファビコンはブラウザに表示されてるこんなやつです。
ホームページにファビコンを作成してもブラウザによっては見えないこともあったりしますが、ファビコンがあるのとないのとではかなりイメージ的な違いが出てくるのではないかなと思います。
たいていはあるＨＰを思い浮かべる時、ファビコンイメージが出てくる場合は多いのではないでしょうか。ファビコンはウィンドウズに付属しているペイントなどを使用することで簡単に作成できちゃいます。
ホームページのタイトルバナーの作り方
ホームページタイトルも、テキストのものだと味気ないものですが、バナー画像を使うとおしゃれです。通常はグラフィックソフトを使って作成する場合が多いですが、作り方がなかなか難しかったり、ソフトが高かったりするかと思います。
そんな時はフォントをインストールしてペイントなどでタイトルバナーを簡単に作成してみると個性的です。
簡単な作り方はこちらのページで、、
ロゴマークとしてトップページにリンクする形でも、そのまま画像でのページタイトル表示にしてもいいのではないかなと思います。画像の alt の部分には、テキストでそのページを説明するものを入力しておくといいと思います。
cssスタイルシートでレイアウトを変更
次にcssスタイルシートでレイアウトを変更するとサイドバーの位置やレイアウト幅を変更することができます。初心者簡単な無料ホームページの作り方ということで更新していますが、このレイアウト変更は色彩のデザイン変更に比べて難しいです。
というのもレイアウトの幅を変更してしまうと閲覧するブラウザによっては正しく表示されないということが発生してしまうからです。サイドバーがページ下部へまわりこんだり、デザインが崩れちゃっているホームページを見かけることもあるかと思います。
ホームページ作成者のブラウザで正常に表示されているからといって、訪問者のブラウザで正常に表示されるかというとそういうものでもないです。特にfloat指定のブラウザ違いはわたしもさっぱりなんでウェブ上で検索してみてください。
次のページ：無料ホームページのサンプルcss最新版