<a href="http://kerryl.blogsome.com/2005/11/25/i-might-have-been-on-the-wrong-side/">for brax</a>

テーマ化したいという発言があり, なぜか俺のidが出ていて, こちらとしてもお気に入りユーザーとして楽しませてもらっているので, CSSを書き直してみた.
感想としてははてなのCSSの書き方が謎. 全角スペースを使っているのも謎. インデントが半角スペースとtabがごっちゃなのも謎.

margin: 0px;
margin-top: 1em;
margin-bottom: 0.3em;

とか1行で書いた方が節約になっているのに.

構造としては

  • theme brax
  • auto inserted
  • user inserted

の三つに分かれているので, はてなに送るときはtheme braxの範囲を送ると良いかと. テーマ化されたときには, user insertedのところをデザイン→CSSではっつけてまたヘッダを弄ると良いと.
以下, CSS

/* ---------- theme brax ---------- */
body {
 width: 100%;
 padding: 0px 0px 1em;
 background: #f9f9f9;
 color: #000000;
 font-size: 90%; 
 font-family: 'Verdana', 'Century Gothic',  sans-serif; 
}

div.body {
 margin: 20px 20px;
 padding-bottom: 1em;
}

div.breadcrumbs p {
 font-size: 90%; 
}

div.header {
 margin: 20px 0px 5px;
 padding: 0px;
}

div.header h2 {
 display: inline; 
 margin: 0px 0px 8px;
 padding: 0px 0px 5px 5px;
 color: #d66373;
 background-color: transparent;
 font-size: 100%;
}

div.header ul.bookmarkinfo {
 display: inline;
 margin: 0px 0px 0px 10px;
 padding: 0px;
 font-size: 90%;
}

div.header ul.bookmarkinfo li {
 display: inline;
 margin: 0px 0px 0px 13px;
 padding: 0px;
}

div.main {
 display: block;
 z-index: 2;
 margin : 0px ;
 border: none;
}

div.main div.pager {
 font-size: 85%;
 margin: 0px 280px 0px 0px;
 text-align: right;
 clear: both;
 color: #d66373;
}

div.main div.pager a {
 padding: 2px 5px;
 border: 1px dotted #cccccc;
 background: white;
}

div.main div.pager a:hover, div.main div.pager a:active {
 padding: 2px 5px;
 border : 1.8px groove #f8f8ff /* ghostwhite */;
 background: ghostwhite;
}

div.hatena-moduletitle {
  font-size: 80%;
  margin-bottom: 3px;
}

/* ----- a:link ----- */
a:link,
a:visited {
 text-decoration: none;
}

a.category,
a.keyword {
 color: #6a5acd /* slateblue */;
}

a.okeyword {
 color: black;
 border-bottom: 1px dashed #d0d0d0; 
}

/* ----- div.taglist ----- */
div.taglist {
 float: right;
 width: 260px;
 padding-bottom: 30px;
}

div.taglist h3 {
 display: none;
}

div.taglist ul {
  margin: 0px;
  padding: 0px;
}

/* in ul.taglist */
div.taglist ul li {
 display: inline;
 line-height: 1.57;
}

ul.taglist a.tag-latest,
ul.taglist a.tag-later,
ul.taglist a.tag-earlier,
ul.taglist a.tag-earliest{
 color: #6a5acd /* slateblue */;
 border-bottom: dashed 1px #E9E3DB;
}

/* current tag */
ul.taglist a.currenttag {
 color: #D66373;
 font-weight: bold;
 background: white;
 border: ridge #ccc 1px;
}

div.taglist p a{
 margin: 0px;
 color:#009645;
}

/* ----- div.favoritelist ----- */
div.favoritelist {
 float: right;
 width: 250px;
 overflow: auto;
 margin: 0px;
 padding-bottom: 30px;
 color: black;
 background : #f8f8ff /* ghostwhite */;
 border: 4px double #e9e3db;
 font-family: verdana;
 scrollbar-face-color: #e9e3db;
 scrollbar-track-color: #d9d9db:
 scrollbar-3dlight-color: #cccccc; 
}

div.favoritelist h3 {
 margin: 5px;
 padding: 0px;
 background : transparent /* ray? */;
 font-size: 80%;
}

div.favoritelist ul {
 list-style-type: none;
 margin: 5px;
 padding: 10px;
}

div.favoritelist ul li {
 margin: 0px 0px 3px;
 font-size: 90%;
}

/* ----- dl.bookmarklist ----- */
dl.bookmarklist {
 display: block;
 margin: 0px 280px 15px 0px;
 padding: 0px;
 line-height: 1em;
 background: ghostwhite;
 border: 1px solid #cccccc;
 word-break: all;
}

dl.bookmarklist dl,
dl.bookmarklist dt,
dl.bookmarklist dd {
  margin: 0;
  padding: 0;
  display: block;
}

dl.bookmarklist dt.bookmark {
 display: list-item;
 list-style-type: none;
 margin: 0.2em 0px 0px;
 padding: 5px 5px 5px 25px;
 font-size: 85%;
 background: url("/images/bookmark.gif") no-repeat 5px 0%; 
 line-height: 150%;
 word-break: break-all;
}

dl.bookmarklist dd dt {
  display: inline;
}

dl.bookmarklist dd dt:first-child {
  margin-left: 0;
}

dl.bookmarklist dd dt span.label,
dl.bookmarklist dd dd a span.label,
dl.bookmarklist dd dt.domain,
dl.bookmarklist dd dt.timestamp {
  display: none;
}

dl.bookmarklist dd dd {
 display: inline;
 font-size: 80%;
 margin: 5px;
 padding: 0px;
 word-break: break-all;
}

dl.bookmarklist dd dd.domain {
 font-size: 80%;
 color:#5C5C4F;
}

dl.bookmarklist dd dd.domain a.domain {
 color: #999;
}

dl.bookmarklist dd dd.timestamp {
 color: #999;
}

dl.bookmarklist dd {
 margin: 2px 10px 3px 20px;
}

dl.bookmarklist dd.comment {
 padding: 0px;
 color: #78746E;
 font-size: 80%;
 text-align: right;
 word-break: break-all;
}

dl.bookmarklist dd.comment a {
 color: #6a5acd /* slateblue */;
}

dl.bookmarklist dd.content {
 margin: 15px 15px 10px 40px ;
 font-size: 80%;
 line-height: 150%; 
 color: #5C5C4F;
 word-break: break-all;
}

/* a number of users who bookmark */
dl.bookmarklist dd.comment strong, 
dl.bookmarklist dd.content strong {
  background: yellow;
}

dl.bookmarklist dd dd.users em {
 display: inline;
 font-weight: bold;
 font-style: normal;
 background-color: #fff0f0;
}

dl.bookmarklist dd dd.users em a{
 color: #ff6666;
}

dl.bookmarklist dd dd.users strong {
 background-color: #ffcccc;
 font-weight: bold;
 display: inline;
}

dl.bookmarklist dd dd.users strong a {
 color: red;
}

dl.bookmarklist dd dd.delete form.delete {
 display: inline;
 margin: 0;
 padding: 0;
}

.tag {
 margin-right: 10px;
}

/* ----- asin ----- */
ul.hatena-asin,
ul.asinlist {
  padding: 0;
  margin: 0;
}

ul.hatena-asin li,
ul.asinlist li {
  display: inline;
}

div.asinlist {
 width: 80%;
 _width: 100%;
 margin: 120px 280px 2em 0px;
}

img.asin {
 width: 100px;
 height: 140px;
 margin:  5px 5px;
}

dl.asinlist {
 display: block;
 float: left;
 margin: 5px 5px 1em 5px;
 text-align: center;
}

dl.asinlist dd {
 margin: 0;
}

dl.asinlist dd dt {
 display: inline;
 margin: 0;
 text-align:  center;
}

dl.asinlist dd dd {
 display: inline;
 margin: 0;
 text-align: center;
 font-size: 80%;
}

dl.asinlist dd dt span.label {
  display: none;
}

dl.asinlist dd dd.users em {
 display: inline;
 background-color: #fff0f0;
 font-weight: bold;
 font-style: normal;
}

dl.asinlist dd dd.users em a{
 color: #ff6666;
}

dl.asinlist dd dd.users strong {
 display: inline;
 background-color: #ffcccc;
 font-weight: bold;
 font-style: normal;
}

dl.asinlist dd dt.edit {
 display: none;
}

dl.asinlist dd dd.delete form {
 display: inline;
}

dl.asinlist dd dd.users strong a {
 color: red;
}

div.asintaglist {
 clear: left;
 float: right;
 width: 260px;
}

/* ----- asin detail ----- */
dl.asindetail {
 display: block;
 padding: 0px;
 margin-right: 280px;
 line-height: 1.2em;
}

dl.asindetail dl,
dl.asindetail dt,
dl.asindetail dd {
 display: block;
 margin: 0;
 padding: 0;
}

dl.asindetail dt.bookmark {
 display: list-item;
 clear: left;
 margin: 1.2em 0px 0.3em;
 list-style-type: none;
 font-weight: normal;
}

dl.asindetail dd dt span.label,
dl.asindetail dd dd a span.label,
dl.asindetail dd dt.timestamp {
 display: none;
}

dl.asindetail dd dd dt span.label {
 display: inline;
}

dl.asindetail dd dt {
 display: inline;
}

dl.asindetail dd dd {
 display: inline;
 font-size: 80%;
 margin; 0;
 padding: 0;
}

dl.asindetail dd dd dd {
 font-size: 100%;
}

dl.asindetail dd dd.image {
 float: left;
 display: block;
 margin: 0px 5px;
 padding: 0px;
}

dl.asindetail dd dd.timestamp {
 color: #999;
}

dl.asindetail dd.comment {
 margin-top: 3px;
 padding: 0px;
 color: green;
 font-size: 80%;
}

dl.asindetail dd.content {
 margin-top: 0.5em;
 font-size: 80%;
}

dl.asindetail dd.comment a {
 color: green;
}

dl.asindetail dd.comment strong, 
dl.asindetail dd.content strong {
 background: yellow;
}

dl.asindetail dd dd.users em {
 background-color: #fff0f0;
 font-weight: bold;
 display: inline;
 font-style: normal;
}

dl.asindetail dd dd.users em a{
 color: #ff6666;
}

dl.asindetail dd dd.users strong {
 display: inline;
 background-color: #ffcccc;
 font-weight: bold;
 font-style: normal;
}

dl.asindetail dd dd.delete form.delete {
  display: inline;
  margin: 0;
  padding: 0;
}

dl.asindetail dd dd.users strong a {
  color: red;
}

/* ---------- Hatena auto inserted ---------- */
body {
  color: #000;
  margin: 0px;
  padding: 0px;
}

img {
  border: 0px;
}

p.message {
  text-align: center;
  background: #f0f0ff;
  margin-left: 100px;
  margin-right: 100px;
  padding: 10px;
  border: 1px solid #c0c0ff;
  font-size: 90%;
}

ul.message {
  font-size: 90%;
}

div#banner {
  background: #B9B8B4;
  padding: 0px;
  margin: 0px;
  border-bottom: 1px solid #989793;
}

div#banner h1 {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

div#bannersub {
  color: #8F8E89;
  background: #D8D8D5;
  border-bottom: 1px solid #989793;
}

div#bannersub td {
  font-size: 80%;
  color: #8F8E89;
  text-align: center;
}

div#bannersub td a {
  color: #8F8E89;
  text-decoration: none;
}

div#bannersub table {
  width: 100%;
}

form.searchform {
 position: absolute;
 text-align: left;
 top: 14px;
 left: 300px;
 margin: 0;
 padding: 0;
 white-space: nowrap;
}

form.searchform input {
 vertical-align: bottom;
}

form.searchform input.searchword {
 font-size: 8pt;
 width: 120px;
 padding: 0;
}

form.searchform input.searchbutton {
 padding: 0;
 margin: 0;
 border: none;
}

img.logo {
 position: absolute;
 text-align: right;
 top: 0;
 right: 0;
}

/* ---------- user inserted ---------- */
/* ---------- ヘッダ弄り ---------- */
div#banner {
 background: #f9f9f9;
 padding: 0px;
 margin: 10px0px 0px 10px;
 border:  none;
}

div#banner h1 {
 margin: 0px;
 padding: 0;
 border: none;
}

div#bannersub {
 background: gray;
}

div#bannersub td {
 font-size: 75%;
 background: white;
 margin-left: 50px;
}

div#bannersub td a {
 color: gray;
 margin: 0px;
 border: none;
}

div#bannersub table {
 width: 100%;
 border:  none;
}

form.searchform {
 position: absolute;
 text-align: left;
 top: 14px;
 left: 300px;
 margin: 0;
 padding: 0;
 white-space: nowrap;
}

form.searchform input {
 vertical-align: bottom;
}

form.searchform input.searchword {
 font-size: 10pt;
 width: 120px;
 padding: 0;
}

form.searchform input.searchbutton {
 padding: 0;
 margin: 0;
 border: none;
}

img.logo {
 display: none;
}

/* ---------- hatena-module ---------- */
/* braxのブックマークの中からの検索ボックス */
form.hatena-usersearch {
 position: absolute;
 top: 12px;
 left: 500px;
}

/* カレンダー */  
div.calendar {
 position: absolute;
 right: 50px;
 top: 90px;
 font-size: 80%;
}

/* hide breadcrumbs */
div.breadcrumbs {
 display: none;
}