<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; }