【急募！ウェブデザイナー】

両脇サイドバーでは無いのですが, 作ってみました.

使い方

• ヘッダ
  • breadcrumbsモジュールは外してもかまいません.
• フッタ
  • sidebar1
    • 画像の幅が60px固定を考えています.
    • リングモジュールのところは適宜書き換えてください.
  • sidebar2
    • 宣伝用画像の幅が250px以内ということにしてます.
    • こちらも適宜書き換えてください. template="hatena-module"を必ず使ってください.
• CSS
  • プロパティ別に別れています.
  • backgroundからurl("xxx.png")とある画像を保存して, お使い下さい.
  • 適当にfotolifeにアップロードすれば良いかと. 全部あわせても20kBいきません.
  • h4がレスポンスのヘッダに使われているようなので, 背景画像を付けておきました. お好みで外してください.
  • a:visitedの色指定をしていないので, ちょっと使いにくいかもしれません.

ヘッダ

<div class="main" id="main">
<hatena dateformat="%Y年%m月%d日" monthformat="%Y年%m月" name="breadcrumbs">

フッタ

</div>
<div class="sidebar" id="sidebar1">
 <h2>Menu1</h2>
 <div class="hatena-module">
  <div class="hatena-moduletitle">
   Ring
  </div>
  <div class="hatena-modulebody">
   <ul>
    <li><hatena name="ring" rid="ring_name" sid="nnnnnn" mode="thumbnail"></li>
    <li><hatena name="ring" rid="ring_name" sid="nnnnnn" mode="thumbnail"></li>
    <li>この辺にリングモジュールを</li>
   </ul>
  </div>
 </div>
 <hatena template="hatena-module" name="photo" listlimit="10">
</div>
<div class="sidebar" id="sidebar2">
 <h2>Menu2</h2>
 <hatena template="hatena-module" name="profile">
 <hatena template="hatena-module" name="calendar2">
 <hatena template="hatena-module" name="comment">
 <div class="hatena-module">
  <h3 class="hatena-moduletitle">Ad</h3>
  <div class="hatena-modulebody">
   <ul>
    <li><a href="#">ここに宣伝用の画像</a></li>
   </ul>
  </div>
 </div>
</div>

CSS

/* background */
#main { background:white }
#sidebar1 { background:rgb(252,252,252) }
#sidebar2 { background:rgb(250,250,250) }
.hatena-body { background:white url("http://f.hatena.ne.jp/images/fotolife/s/smoking186/20060325/20060325213353.png") right top repeat-y }
.hatena-body span.highlight { background:yellow }
.hatena-body table { background:transparent }
.hatena-body table td { background:rgb(244,244,244) }
.hatena-body table th { background:rgb(233,233,233) }
body { background:rgb(244,244,244) }
center table { background:rgb(253,253,255) }
div.section { background:transparent }
h1 { background:white }
h4 { background:transparent url("http://d.hatena.ne.jp/images/diary/s/smoking186/2006-03-25.png") left center no-repeat }
p.sectionfooter { background:rgb(251,251,255) }
pre { background:rgb(244,244,244) }
table { background:white }
table td { background:transparent }
table.calendar td.calendar-day a { background:rgb(247,247,247) }
table.calendar td.day-selected { background:yellow }
table.calendar td.day-selected a { background:yellow }
table.calendar td.day-today { background:rgb(255,255,255) }
/* border */
#sidebar1 { border:1px solid rgb(233,233,233) }
#sidebar2 { border:1px solid rgb(233,233,233) }
.hatena-body .hatena-asin-detail { border:1px solid rgb(233,233,233) }
.hatena-body .hatena-asin-detail-image { border:1px solid rgb(244,244,244) }
.hatena-body table { border:1px solid rgb(233,233,233) }
blockquote { border:1px solid rgb(60,60,120) }
img { border:none }
pre { border:1px solid rgb(233,233,233) }
/* border-bottom */
.section dd { border-bottom:1px solid white }
abbr { border-bottom:1px dashed gray }
acronym { border-bottom:1px dashed gray }
center table { border-bottom:none }
dfn { border-bottom:3px double silver }
div.section { border-bottom:1px solid #f9f9ff }
h1 { border-bottom:1px solid rgb(240,240,240) }
h3 a:first-child { border-bottom:none }
h5 { border-bottom:1px solid white }
h6 { border-bottom:1px solid white }
table { border-bottom:1px solid rgb(230,230,230) }
/* border-left */
.hatena-body { border-left:1px solid rgb(233,233,233) }
.section dd { border-left:2px solid rgb(20,20,40) }
h5 { border-left:4px solid rgb(60,60,120) }
h6 { border-left:3px solid rgb(20,20,40) }
/* border-top */
#main { border-top:1px solid rgb(230,230,230) }
#sidebar1 { border-top:1px solid rgb(230,230,230) }
#sidebar2 { border-top:1px solid rgb(230,230,230) }
h1 { border-top:1px solid rgb(233,233,233) }
/* box-model */
* { box-model:content-box }
/* clear */
.hatena-body .hatena-asin-detail-foot { clear:both }
/* color */
.day h2 { color:rgb(20,20,40) }
.day h2 a { color:rgb(20,20,40) }
.hatena-body span.highlight { color:black }
a { color:rgb(60,60,120) }
a:visited { color:rgb(120,60,120) }
a:active { color:red }
body { color:black }
h1 a { color:rgb(20,20,40) }
h3 * { color:rgb(20,20,40) }
h3 { color:rgb(20,20,40) }
table.calendar td.calendar-saturday { color:blue }
table.calendar td.calendar-sunday { color:red }
/* content */
q cite:after { content:"]" }
q cite:before { content:"[" }
span.footnote:after { content:"]" }
span.footnote:before { content:"[" }
/* display */
#sidebar1 h2 { display:none }
#sidebar2 h2 { display:none }
blockquote * cite { display:inline }
blockquote cite { display:block }
table.calendar td.calendar-day a { display:block }
/* float */
.hatena-body .hatena-asin-detail-image { float:left }
/* font-family */
* { font-family:'Trebuchet MS', sans-serif }
.hatena-body .AA * { font-family:"ＭＳ Ｐゴシック", "Mona", "mona-gothic-jisx0208.1990-0" }
.hatena-body .AA { font-family:"ＭＳ Ｐゴシック", "Mona", "mona-gothic-jisx0208.1990-0" }
/* font-size */
#hatena-archive h2 { font-size:100% }
#sidebar1 { font-size:90% }
#sidebar2 { font-size:90% }
* { font-size:100% }
.day { font-size:90% }
.day h2 { font-size:200% }
center table { font-size:85% }
div.breadcrumbs { font-size:90% }
div.calendar { font-size:90% }
h1 { font-size:250% }
h3 { font-size:110% }
h4 { font-size:105% }
h5 { font-size:105% }
h6 { font-size:103% }
p.sectionfooter { font-size:90% }
q cite { font-size:90% }
span.footnote { font-size:90% }
/* font-style */
cite { font-style:italic }
samp { font-style:italic }
var { font-style:italic }
/* font-weight */
#sidebar1 .hatena-moduletitle { font-weight:bold }
#sidebar2 .hatena-moduletitle { font-weight:bold }
.hatena-body .haetna-asin-detail-title { font-weight:bold }
.section dt { font-weight:bold }
dfn { font-weight:bold }
table.calendar td.calendar-current-month { font-weight:bold }
table.calendar td.calendar-next-month { font-weight:bold }
table.calendar td.calendar-prev-month { font-weight:bold }
/* left */
.hatena-body { left:0px }
/* letter-spacing */
h1 { letter-spacing:15px }
/* line-height */
* { line-height:1.4 }
.hatena-body .AA * { line-height:1.05 }
.hatena-body .AA { line-height:1.05 }
/* list-style */
#sidebar1 ul li { list-style:none }
#sidebar2 ul li { list-style:none }
.refererlist ul li { list-style:none }
.hatena-body .hatena-asin-detail-info ul { list-style:none }
/* margin */
#sidebar2 .hatena-module { margin:10px 5px 20px }
#sidebar2 table.calendar { margin:0px }
* { margin:0px }
.ad { margin:10px }
.day .ad { margin:10px 0px 40px 30px }
.day .comment { margin:10px 0px 40px 30px }
.day .refererlist { margin:10px 0px 40px 30px }
.day div.footnote { margin:10px 0px 40px 30px }
.day h2 { margin:0px 10px }
.day img { margin:10px }
.hatena-body .hatena-asin-detail { margin:10px }
.hatena-body .hatena-asin-detail-info { margin:5px }
.hatena-body .hatena-asin-detail-info ul { margin:5px }
.hatena-body table { margin:10px }
.hatena-body table.hatena-question-detail { margin:10px }
.section dd { margin:2px 2px 2px 10px }
.section dl { margin:10px 10px 10px 30px }
.section dt { margin:2px }
.section ol { margin:10px 10px 10px 30px }
.section ol ol { margin:5px 5px 5px 20px }
.section ol ul { margin:5px 5px 5px 20px }
.section ul { margin:10px 10px 10px 30px }
.section ul ol { margin:5px 5px 5px 20px }
.section ul ul { margin:5px 5px 5px 20px }
.sectionfooter img { margin:0px }
blockquote * cite { margin:0px }
blockquote { margin:1em 10px }
blockquote cite { margin:2px 5px }
div.breadcrumbs { margin:10px }
div.section { margin:10px 10px 40px 30px }
h4 { margin:10px }
h5 { margin:5px }
h6 { margin:5px }
pre { margin:10px }
/* margin-bottom */
h3 { margin-bottom:10px }
/* margin-left */
#main { margin-left:0px }
.hatena-body { margin-left:20px }
.section p { margin-left:15px }
/* margin-right */
#hatena-about .day { margin-right:360px }
#hatena-archive .day { margin-right:360px }
#hatena-archive div.calendar { margin-right:360px }
#main { margin-right:350px }
.hatena-body .hatena-asin-detail-image { margin-right:10px }
.section p { margin-right:10px }
div.calendar { margin-right:10px }
h3 a:first-child { margin-right:5px }
/* margin-top */
#sidebar1 .hatena-modulebody { margin-top:5px }
#sidebar1 h3 { margin-top:10px }
#sidebar1 ul li { margin-top:5px }
p.sectionfooter { margin-top:20px }
/* outline */
a:active { outline:1px dashed gray }
/* padding */
* { padding:0px }
.hatena-body .hatena-asin-detail { padding:5px }
.hatena-body table td { padding:3px }
.hatena-body table th { padding:3px }
.section dd { padding:3px }
blockquote { padding:5px 0px }
h1 { padding:40px 20px }
h3 { padding:0px }
h4 { padding:0px 0px 0px 14px}
h5 { padding:5px }
h6 { padding:5px }
p.sectionfooter { padding:3px }
pre { padding:5px }
center table td { padding:10px 0px 0px 0px }
/* position */
#sidebar1 { position:absolute }
#sidebar2 { position:absolute }
.hatena-body { position:relative }
/* right */
#sidebar1 { right:270px }
#sidebar2 { right:10px }
/* text-align */
#sidebar1 { text-align:center }
#sidebar1 .hatena-moduletitle { text-align:center }
#sidebar2 .hatena-moduletitle { text-align:center }
#sidebar2 p.hatena-profile-image { text-align:center }
#sidebar2 table.calendar { text-align:center }
blockquote * cite { text-align:left }
blockquote cite { text-align:right }
div.calendar { text-align:right }
h1 { text-align:center }
p.sectionfooter { text-align:right }
/* text-decoration */
.day h2 a { text-decoration:none }
a { text-decoration:none }
a:hover { text-decoration:underline }
/* top */
#sidebar1 { top:0px }
#sidebar2 { top:0px }
.hatena-body { top:0px }
/* vertical-align */
q cite { vertical-align:super }
span.footnote { vertical-align:super }
/* width */
#sidebar1 { width:70px }
#sidebar2 { width:250px }
#sidebar2 table.calendar { width:240px }
.hatena-body table.hatena-question-detail { width:98% }
table.hatena-question-detail td.hatena-question-detail-label { width:39.8% }
table.hatena-question-detail td.hatena-question-detail-value { width:60% }
/* _width */
.hatena-body table.hatena-question-detail { _width:auto }