トップページ > テンプレートトップ > テンプレートサンプル（８）
ヘッダーのデザインは、「ページトップデザイン」で好みのレイアウトを作れます。
この背景色は、head部にある「#sidebar」の「background-color」の色を変更すれば、好みの背景色に変えられます。
淡色の背景色にしたときは「color」も変更してください。
このページのアレンジするところは、左のサイドバー（サイドバーに説明あり）と、最上部のリンクカラーになります。
リンクカラーはhead部の「.menu a」と「.menu a:hover」の「color」と「background-color」を変更してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テンプレート スタイル（8）</title> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; padding:0;} /*Page Layout*/ #container{width:900px;text-align:center;margin:0px auto;} #header{width:100%;padding:10px 0px 15px 0px;text-align:left;} #sidebar{float:right;width:180px;text-align:left; background-color:#444; color:#fff; padding:10px;} #contents{padding:0 10px;text-align:left;} #footer{clear:right;width:100%;padding:15px 0px;text-align:left;} /*Menu Style*/ .menu ul{list-style:none;width:100%; margin:0; padding:0;} .menu li{list-style:none; float:left;} .menu a{ display:block;font-size:12px;text-decoration:none;color:#00f;padding:2px 5px;} .menu a:hover{background-color:#009; color:#fff;} .clearall {clear: both;height: 0;line-height: 0.0;font-size: 0;} /*Others*/ #header p{ padding:0 0 0 10px; margin:0;} hr{clear:both; color:#999; height:1px;} /*ブラウザで確認したら、この下のソースは削除してください。*/ div#header{height:150px;} div#contents{ height:490px;} div#sidebar{ height:500px;} div#footer{ height:150px; background-color:#fcf;} /*ここまで削除*/ --> </style> </head> <body> <div id="container"> <div id="header"> <div class="menu"> <ul> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> <li><a href="リンク先ページ名.html">リンク先ページ名</a></li> </ul> </div> <hr> <p>ここがヘッダー </p> </div> <div id="sidebar"> ここがサイドバー </div> <div id="contents"> ここがコンテンツ </div> <div id="footer"> ここがフッター </div> </div> </body> </html>
テンプレートソースの利用方法は、テンプレートトップページに書いてあります。
このソースには、フォントスタイルや、リンクのスタイルのソースは、書かれていません。「ページプロパティ」のページで指定できます。
テンプレートトップへ戻る。