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

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

コンテンツボリュームが少ない場合、シンプルなワンカラムのスタイルシートで設定するのもよいでしょう。広告表示のサイドバーなどをなくし、テキストのみでホームページを作成することでコンテンツ部分が読まれやすくなります。

また、デジカメなどで撮影した画像を掲載する場合でも、背景色を白に設定し、シンプルにしたサイトの方が写真画像の栄えもよくなるでしょう。

こちらは簡単な無料ホームページの作り方の箇所でご紹介しているサンプルと同じものですが、以下のようにスタイルシートの「float」の設定を解除し、サイドバーをなくすだけでカスタマイズすることができます。

body {
margin:0;
padding:0;
}
#outer {
margin:0 auto;
width:620px;
padding:0;
}
#header {
padding:0;
height:100px;
}
.description {
line-height:130%;
font-size:87.5%;
}
#main {
}
.content {
padding:0 0 10px 0;
margin-bottom:4px;
}
ul {
margin: 0 0 0 1em;
padding: 0;
}
li {
list-style:disc; 
}
p {
line-height:150%;
font-size:97%;
color:#333;
margin:1em 0;
}
img{
border:0;
}
hr {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #ccc;
height: 1px;
}
a{
font-weight:normal;
color: #00C;
}
h1 {
font-size:18px;
color: #033;
padding:34px 0 0 0;
margin:0;
font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}
h1 a{
color:#033;
text-decoration:none;
}
h1 a:hover{
text-decoration:underline;
}
h2 {
font-size:22px;
margin:0;
padding:9px 0 4px 0;
border-bottom:1px solid #999;
font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}
#footer {
color:#666;
font-size:12px;
height:100px;
text-align:center;
}
.pagetop {
padding-top:10px;
font-size:16px;
text-align:right;
}
blockquote{
border:1px solid #ccc;
padding:5px;
margin:10px;
}
 @media screen and (max-device-width: 480px) {
#outer {width:100%;}
h1 {padding:20px 0 0 0;}
#header, #main, #footer {padding: 0 10px;}
}

背景色を白色（#ffffff）、もしくはグレーなどの薄い色合いで統一して、瞳にやさいホームページにすると読みやすくなり、コンテンツのテキスト部分のみに集中がいくようになります。あるいは、シンプルな壁紙素材などを背景素材としてリピート設定しているケースも多いです。

掲示板や古くから運営されているホームページの場合も、ワンカラムでシンプルに作成されているケースが多いです。内部リンクについては、サイドバーなどのリンクをなくす代わりに、フッターなどのコンテンツの終わりにトップページや関連ページへの移動先を設定させておく必要があります。

けれども、ページボリュームの多いホームページの場合には、やはり、サイドバーなどを設定して内部リンクを充実させる作り方にした方がよいでしょう。

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

■ スタイルシートによるデザインの変更方法
スタイルシートでデザインを変更

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

■ 最新のスタイルシートのサンプル情報
最新版のテンプレートサンプル

■ シンプルなテンプレートはこちらにも。
シンプルな無料テンプレートの一覧

トップページへ