ホームページの作り方 > スタイルシートカスタマイズの例：その２

スタイルシートカスタマイズの例：その２

スタイルシートのカスタマイズ例その２です。
シンプルな感じのスタイルシートもおすすめです。

シンプルなホームページスタイルシート

コンテンツボリュームが少ない場合、テキストのみのシンプルなスタイルシートもおすすめです。サイドバーをなくし、テキストメインの形でホームページを作成すると、検索エンジンにもヒットしやすい？傾向があるように感じます。

これはおそらく、検索エンジンは画像やジャバスクリプトなどのコンテンツよりも、テキストベースでの関連性を重視する面が強く、内部リンク関連も少なめの方が関連性を把握しやすいためだろうと思われます。

初心者簡単な無料ＨＰの作り方の箇所でご紹介しているサンプルを、このページではサイドバーなどをなくしてカスタマイズしてみました。

背景色を薄い色合いで統一して、瞳にやさいホームページにすると読みやすくなり、サイドバーなどもないため、コンテンツのテキスト部分のみに集中がいくようになります。カスタマイズ方法としては、外枠の border をなくし、背景色を淡い色合いで単一に統一するとシンプルです。

例として、このページのスタイルシートはこのような感じにしていますが、背景色の候補としては、白（#ffffff）や薄い黄色（#F6EEC9）なども良く設定されることの多い色彩です。

body {
background-color:#E9F6F4;
color:#000000;
margin:0px;
padding:0px;
text-align:center;
}
#homepage{
margin:10px auto 0px auto;
width:960px;
color:#111111;
font-size:100%;
}
#freehp {
padding:15px 0px 0px 30px;
height:90px;
color:#000000;
text-align: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #31424D;
}
#howtohomepage {
float:left;
width:679px;
margin:0px 0px 0px 0px;

}
#freehomepage {
color:#676767;
padding:15px 0px 0px 0px;
font-weight:normal;
width:281px;
float:left;
margin: 0px;
text-align:left;
}
#footer {
height:50px;
clear:left;
}
p {
margin:1em 0 1em 0;
text-indent:1em;
}
img{
border:0px;
}
a{
font-weight:normal;
border-bottom-width: 1px;
border-bottom-color: #CCCCCC;
color: #0000ff;
}
#banner a{
text-decoration:none;
}
h1 {
font-weight:bold;
text-align:center;
color:#000000;
margin-top:0px;
margin-bottom:0px;
font-size:18px;
padding:10px 0px 0px 0px;
}

h2 {
font-size:18px;
color: #000000;
padding-left: 5px;
}

h3 {
font-size:16px;
color: #000000;
padding-left: 5px;
}
h3 a{
text-decoration: none;
color:#265699;
}
h4 {
font-size:16px;
color: #000000;
padding-left: 5px;
}

ul {
margin: 0 0 0 1em;
padding: 0;
}
li {
list-style:disk; 
}
.hpbuilder {
margin: 10px;

padding:10px 5px 0px 10px;
text-align:left;
line-height:150%;
}
.pagetop {
padding-right:35px;
text-align:right;
}
.hpcss {
font-size:13px;
padding:27px 10px 10px 15px;
font-weight:bold;
color: #333333;
text-align: left;
}
.side {
text-align: left;
line-height:1.8em;
padding:0px 8px 0px 8px;
margin-bottom:0px;
font-size:10px;
}
.side a{
font-weight:normal;
font-size:14px;
color:#003366;
text-decoration : none;
line-height : 15px;
}
#hpcreator {
height:50px;
clear:left;
}
blockquote{
border:1px solid #ccc;
padding:5px;
margin:10px;
}

要らない要素の設定は消し、必要なものだけ設定すると、スタイルシート自体もシンプルなものになります。わりと年数が経過しているような、ドメイン年齢の古いホームページの場合、このように作成されているケースが多いです。

サイドバーなどのリンクをなくする代わりに、フッターなどのコンテンツの終わりには、トップページや関連ページへの移動先を設定させておく必要があります。ただ、ページボリュームの多いホームページの場合には、やはり、サイドバーがあった方が便利です。

■ サンプルＨＰのカスタマイズ方法について
サンプルＨＰのカスタマイズ方法

■ スタイルシートによるデザインの変更方法のページ
ホームページのcssスタイルシート

■ スタイルシートカスタマイズの手順例について
スタイルシートカスタマイズの手順例

■ 最新のスタイルシートのサンプル情報
無料ホームページのサンプルcss最新版

トップページへ

PageTop▲