シンプル2列

このデザインについて

Werewolf サンプル
カテゴリー:シンプルベーステーマ:hatenaヘッダー:黒(太)
登録日:2010/02/12更新日:2010/02/12利用数:21
シンプルで使うことが前提のデザインです。
2列に並ばせるために作りました

ヘッダ/フッタ/スタイルシート

ページのヘッダ

<span style="color:#470104;"><Font Face= "HG丸ゴシックM-PRO","麗流隷書","Tahoma","魚石行書"><span style="font-size:45;"> 電詞探索</span></Font></span>
<div id="main">
<div class="Launch">
  <div class="LaunchBar">
    <a href="http://d.hatena.ne.jp/Werewolf/">diary</a>&nbsp;&nbsp;| 
    &nbsp;<a href="http://f.hatena.ne.jp/Werewolf/">Fotolife</a>&nbsp;&nbsp;|
    &nbsp;<a href="http://b.hatena.ne.jp/Werewolf/">bookmark</a>&nbsp;&nbsp;|	
  </div>
</div>
</div>

ページのフッタ


スタイルシート

#Main, #Main2 { margin-top: auto; margin-left: auto; margin-right: auto; width: 100%; text-align: left; vertical-align: top; }
.Launch { 
	background-repeat: repeat-x; 
	background-position: left bottom; 
       background-color: #EBE7DE;
	text-align: right; 
	color: #000000; 
	font-size: 18px; 
	font-family: Arial, Helvetica, Sans-Serif; 
	padding: 5px 10px 3px 0; 
	vertical-align: bottom;
}
div.Launch a:link { color: #470104; text-decoration: }
div.Launch a:visited { color: #470104; text-decoration: }
div.Launch a:hover { color: #EBE7DE; text-decoration: none; background: #470104; }
div.Launch a:active { color: #EBE7DE; text-decoration: none; background: #470104; }
h1 {
  color: #c2c2c2;
}
body {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  background-color: #000000;
}
li {
  font-size: 12pt;
}
a {
  font-weight: bold;
}
h1 {
  text-align: left;
  font-size: 60pt;
  font-weight: bold;
  border-bottom: 1px dotted #000000;
  margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 5%;
  margin-right: 5%;
  padding: 4px 4px 4px 4px;
}
ol {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 50px;
  margin-right: 5%;
}
.diff {
  font-size: 10pt;
  background-color: #000000;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 4px 4px 4px 4px;
}
.pager {
  font-size: 9pt;
  text-align: right;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 5%;
}
div.adminmenu {
  font-size: 90%;
  margin: 2% 5% 0% 0%;
  text-align: right
}
span.adminmenu {}
div.footer {
  color: #cccccc;
  margin: 5px;
  font-size: 80%;
  text-align: center;
}
form.hatena-searchform {
  text-align: right;
  margin-right: 5%;
}

body {
 margin: 0;
 padding: 0;
 background-color: #fcfcf0;
}

a{font-weight: bolder; }
a:link{color:#000033; text-decoration:underline;}
a:visited{color:#a80202; text-decoration:none;}
a:active{color:#470104; text-decoration:none;}
a:hover{color:#470104; text-decoration:none; background-color:#fcfcfc;}

h1{
 background-color: #EBE7DE;
 margin:0;
 padding:10px 32px;
 font-size:190%;
}

p.pager{
 text-align:right;
 width:100%;
 margin:0 0 6px 0;
 padding:3px 8px;
 font-size: 1px;
 color: #EBE7DE;
 background-color: #EBE7DE;
 border-bottom:solid 1px #666;
 height: 18px;
}

p.pager b , p.pager a{
 font-size: 16px;
 padding:3px 6px;
 margin:0 1px;
 border-top:1px #666 solid;
 border-right:1px #666 solid;
 border-left:1px #666 solid;
 position: relative; 
}

p.pager b{
 color:#030303;
 background-color: #fcfcf0;
 border-bottom:2px #f7f5d2 solid;
}

p.pager a{
 border-bottom:1px #030303 solid;
 background-color: #f5f3c9;
 text-decoration:none;
}

p.pager br{display:none;}

p.diff{
 height:64px;
 overflow: auto;
 background-color: #e3eefd;
 font-size:90%;
}

ol{
 margin: 0;
 padding:5px 0 0 0;
 line-height:130%;
}

li{
 float:left;
 width:49%;
 margin:0 2px 2px 2px;
 font-size:80%;
}

li a{ font-size:125%;}

form.hatena-searchform {
 text-align: right;
 margin-right: 5%;
}
div.footer {
 color: #ccc;
 margin: 16px;
 font-size: 90%;
 text-align: center;
}