(id:large)
「 色キチなので白とか薄い色は使わずに、濃いか暗めの色で 」ってことで希望を出してもらいました。それをうけて、わりと濃い目の色の組み合わせで作ってみたのだけど、自分で一から色を重ねていくとどうも落ち着きのない仕上がりにしかならなかったことから、ちょっとなんか参考にと、雑誌で特集されてた昔の航空機メーカーの色使いを見ながら仕上げてみました。それでもやっぱりどうも自分でも自信が持てなかったので、あとはふじわらさん側で好みの色とかあればガシガシ変更してみてください。っつう形でCSSをメールしました。つまり、ええと、けっきょく、おれはなんにもできなかったよ。って感じがものすごいある。なにが足りないのかよくわかんないけども、少々の好みなんて許容できちゃうような技量&センスがあればな。って思わずにはおれませんでしたね。とりあえず使用先でどのような変更が加えられて採用されるのか、ちょっと楽しみです。それで、あーそうゆうことかーって勉強したい。
html { margin:0; padding:0; border:none; } body { font-size: 83%; font-family: Verdana, Osaka, sans-serif; line-height: 1.6; text-align: center; letter-spacing: 0px; color: #650909; background-color: #81CEC8; margin: 0 auto; padding: 0px; word-break: break-all ; word-wrap: break-word ; background-image: url(""); background-repeat: repeat; background-position: top left; } /********************** header **********************/ table { margin: 0px auto; width: 784px; _width: 780px; border-left: 2px solid #933932; border-right: 2px solid #933932; background-color: #CE2618; } td { background-color : transparent; width: auto; margin: 0; padding: 0px 0px; } table table td{ background-color : transparent; margin: auto; padding: auto; vertical-align: bottom; } table table{ margin: 0px; padding: 3px 0px 0px 10px; border: none; width: 100%; height: 100px; background-image: url(""); background-repeat: repeat-y; background-position: top center; } table table td{ font-size: 80%x; } table table td font, table table td a{ border:none; font-size: 11px; color: #E75852; } td a{ border: 0; } table input{ height: 18px; border-top: 2px solid #FCECFC; border-left: 2px solid #FCECFC; background-color: #F2F2EC; } .hatena-body table{ width: auto; margin: 0; padding:0 10px; border: 0; background-image: none; background-color : transparent; } h1 { margin: 0px auto; font-weight: bold; text-align: right; line-height: 1.2; font-size: 19px; padding: 5px 20px; width: 740px; _width: 780px; border: 2px solid #933932; background-color: #fff; } h1 a{ border: none; color: #933932; } .hatena-body{ margin: 0px auto; position: relative; padding: 10px 0px 0px; text-align: left; width: 780px; border-left: 2px solid #933932; border-right: 2px solid #933932; background-color: #FF9090; } .hatena-body:after{ content:""; display:block; clear:both; border-bottom: 1px solid transparent; } .main{ margin: 0px; padding: 0px; float: left; clear: left; width: 568px; _width: 564px; text-align: center; border-right: 1px solid #933932; } .day { margin: 0px 10px 50px 10px; padding: 0px; text-align:left; color: #350000; } h2, h2 a{ border: none; color: #E75852; } h2 { font-size: 100%; font-weight: bold; text-decoration:none; margin: 0px -10px; padding: 6px 10px; text-align: right; line-height: 1; border-top: 1px solid #FF7B7B; border-bottom: 1px solid #FF7B7B; background-color: #FE8585; background-image: url(""); background-repeat: no-repeat; background-position: right bottom; } span.date{ font-weight: bold; font-size: 100%; padding: 0; } span.title{ font-size: 100%; font-weight: normal; font-family: Verdana, Osaka, sans-serif; margin: 0 0 0 10px; padding: 0; } .body { padding: 0px; margin: 0px 0px 30px; } .section{ margin: 20px 0px; padding: 30px 20px; background-color: #FF9E9E; background-image: url(""); background-repeat: no-repeat; background-position: top; } h3, h3 a{ border: none; } h3 { font-size:100%; font-weight: normal; margin: 10px 0px 20px -5px; padding: 5px 0px; text-align:left; line-height: 1.5; } a.sectioncategory{ } span.sanchor{ color: #CE2618; font-size: 15px; margin: 0px 5px 0px 0px; padding: 17px 15px 12px 15px; background-image: url(""); background-repeat: no-repeat; background-position: left; } span.timestamp{ font-size:70%; font-weight: normal; letter-spacing: 0px; } .section p { margin: 10px; text-align:left; padding: 0; } /**************** decoration *************************/ a{ text-decoration: none; color: #D50005; } a.keyword, a.okeyword { text-decoration: none; border: none; color: #650909; } a img{ border: none; } a:link { } a:visited { } a:hover { text-decoration: none; border: none; color: #FF00E4; } a:active { color: #16DD45; } h4 { font-size:100%; font-weight: normal; padding: 0 0 0 17px; margin: 1em 0px; text-align:left; border-left: 3px solid #E75852; border-bottom: 1px solid #E75852; word-break:break-all; } h5 { font-size:100%; font-weight: normal; padding: 0 0 0 17px; margin: 1em 5px; border-left: 5px solid #E75852; border-bottom: 1px solid #E75852; text-align:left; word-break:break-all; } blockquote{ margin: 10px 0px; padding: 10px; overflow: auto; color: #8E5757; border: 1px solid #E75852; background-color: #EDBEBE; } blockquote a{ color: #0088A1; border: none; } .section blockquote p{ margin: 0.5em; padding: 0; } cite a{ border: none; color: #000000; } cite{ font-weight: normal; font-style: normal; font-size: 10px; padding: 2px 5px; float:right; } pre { border: 3px double #E75852; background-color: #F9DEEA; color: #000000; margin: 10px 2px; padding: 10px 15px; overflow: auto; } font{ line-height: 1.2em; } em a{ border: none; color: #000000; } em{ font-weight: normal; font-style: normal; } ins a{ border: none; } ins{ text-decoration: none; border-bottom: solid 1px #84888B; } .day td{ padding: 5px 5px 5px 7px; margin: 0; background-color: #FCD2D2; border: dotted 1px #B74545; } .day th{ padding: 5px 5px 5px 7px; margin: 0; border: solid 1px #B74545; background-color: #FFB9B9; font-weight: normal; } .day table{ margin: 10px 0; font-size: 100%; border: none; border-collapse: collapse; text-align: center; border: solid 1px #B74545; } .hatena-module input { margin: 0px 2px; border: 1px solid #B74545; } /************************* list **********************/ .section ul{ margin: 1em 15px 1em 25px; padding: 0; } .section ol{ margin: 1em 15px 1em 30px; padding: 0; } .section ul li, .section ol li, .section ol ul, .section ol ol, .section ul ul, .section li li { margin: 0 0 0 8px; padding: 0; } .section dl{ margin: 10px 15px; } .section dt{ font-weight: normal; } .section dd{ } /********************** img ***************************/ img.photo{ float: right; border: solid 1px #D1CAB2; margin: 75px 5px 5px 10px; padding: 0; } .body img.asin{ float: right; margin: 5px 5px 5px 10px; padding: 0; border: solid 1px #F08181; } /********************* footnote **********************/ span.footnote{ font-size: 70%; } span.footnote a{ border: 0; } div.footnote{ padding: 0px 20px; margin: 40px 0px; } p.footnote{ margin: 3px 0px; font-size: 85%; } p.footnote a{ border: none; } /********************** comment ***********************/ div.comment, div.refererlist { _width: 100% ; font-size: 80%; padding: 5px 20px; margin: 0px; background-color: #; } div.refererlist { text-align: right; } div.refererlist ul{ margin: 0 5px; padding: 0; list-style-type: none; letter-spacing: 0px; } form div.refererlist ul{ font-size: 100%; letter-spacing: 1px; } div.caption{ padding: 0; margin: 0; text-align: right; } div.refererlist div.caption{ } form div.refererlist div.caption{ padding: 0 0.5em; margin: 0.5em 0; } div.refererlist div.caption a{ border: none; color: #350000; } div.commentshort{ margin: 0 0 0 0; } div.commentshort textarea{ width: 90%; height: 10em; } span.canchor{ } div.commentshort a{ border: none; } div.commentshort a:hover{ } span.commentator{ font-weight: normal; margin: 0px 0px 10px 0px; padding: 1px 20px 1px 8px; } form span.commentator{ margin: 10px 0px 10px 0px; } div.commentshort P { margin: 10px 15px; padding: 5px; letter-spacing: 0px; } p.sectionfooter { margin: 10px 0px 0px 0px; text-align: right; } p.sectionfooter a{ text-decoration: none; border: none; font-size: 90%; } /******************asin detail***********************/ div.hatena-asin-detail { margin: 3px 0px 15px 0px; padding: 10px ; border: solid 1px #F08181; background-color: #EADEE7; font-size: 100%; } div.hatena-asin-detail a{ } div.hatena-asin-detail a:hover{ border: none; } img.hatena-asin-detail-image { float: left; border: 0; margin: 0 20px 0 0 ; height: 110px; border: solid 1px #D3D2D3; background-color: #FBFCFF; } div.hatena-asin-detail-info{ float: left; margin: 0px; word-break: break-all; } .section p.hatena-asin-detail-title{ text-align: center; font-weight: normal; padding: 3px 10px 1px; margin: 0px; border-bottom: 1px solid #B89DB1; background-color: #D3D2D3; } div.hatena-asin-detail-info ul { list-style-type: none; font-size: 80%; margin: 0; padding: 5px 10px; } div.hatena-asin-detail-info li { margin: 0; padding: 0; } div.hatena-asin-detail p a{ border: 0; } div.hatena-asin-detail-foot { clear: left; } /************************ form **********************/ form{ margin: 0; padding: 0; } form.hatena-searchform{ margin: 5px 0; } div.day div.comment form{ margin: 0; padding: 0; } form h2, form div.body{ padding: 1em 1.5em; width: auto; } form h2{ margin: 15px 20% 0 0; font-size: 120%; padding: 5px 15px; color: #000000; } form h2 span.date, form h2 span.title{ border: none; display: inline; margin: 0; padding: 5px 15px; } form textarea{ width: 90%; } form h3{ display: block; margin: 2em 0 1em 0; padding: 0; border-bottom: solid 1px #000000; font-size: 100%; } /********************** sidebar ***********************/ .sidebar-t { width: auto; padding: 0px; margin: 0px; height: 0px; font-size: 80%; text-align: center; color: #C4E4E4; background-color: #ffffff; } .sidebar-r { width: auto; padding: 0px; margin: 0px; height: 30px; font-size: 80%; text-align: center; color: #C4E4E4; border-top: 1px solid #2A7981; } .sidebar { float: right; clear: right; width: 210px; padding: 10px 0px; margin: 0px; font-size: 90%; text-align: center; color: #C5BC8A; } .sidebar a{ color: #C5BC8A; } .sidebar a:hover{ color: #D3CCBE; } .hatena-module{ margin: 0px 3px 10px; padding: 0px; _width: 100% ; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060315/20060315223118.gif"); background-repeat: repeat-y; background-position: top center; } .hatena-moduletitle, .hatena-moduletitle a{ border: none; color: #7D2C25; } .hatena-moduletitle{ text-align: right; font-size: 13px; letter-spacing: 0px; font-weight: normal; padding: 8px 10px 25px 15px; margin: 0px; letter-spacing: 0px; line-height: 1; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060315/20060315223120.gif"); background-repeat: no-repeat; background-position: top center; } .hatena-modulebody{ padding: 5px 5px; margin: 0px; _width:100%; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060315/20060315223119.gif"); background-repeat: no-repeat; background-position: bottom center; } .hatena-modulebody, .hatena-modulebody a{ border: none; color: #7D2C25; } /********************** sideber li **********************/ .hatena-modulebody ul{ padding: 3px 5px 3px 0px; margin: 0px; text-align: left; list-style-type: none; } .hatena-modulebody li { margin: 2px 0px; background-color: #; } .hatena-modulebody li a{ padding: 2px 5px; line-height: 1.1; } .hatena-modulebody li a:hover { background-color: #; } /******************* profile module *******************/ .hatena-profile { } .hatena-profile img{ } .hatena-profile-id a{ font-size: 100%; padding: 2px; margin: 0px; width: auto; display: block; } .hatena-profile-body { } /******************* photo module *******************/ ul.hatena-photo{ padding: 0px; margin: 0; width: 190px; list-style-type: none; text-align: center; } ul.hatena-photo li{ margin: 0px; display: inline; width: auto; } ul.hatena-photo li img{ width: 50px; } ul.hatena-photo li a{ display: inline; margin: 0px; padding: 0; text-align: center; border: none; } ul.hatena-photo li a:hover{ background-color: transparent; border: none; } ul.hatena-photo li a img{ margin: 3px 0px; filter: none; border: 2px solid #ffffff; } ul.hatena-photo li a:hover img{ filter: none; } /******************** asin log ***********************/ ul.hatena-asinlog{ padding: 5px 5px; margin: 0; width: 190px; list-style-type: none; text-align: left; } ul.hatena-asinlog li{ margin: 0 ; padding: 0; display: inline; width: none; } ul.hatena-asinlog li img{ width: 40px; } ul.hatena-asinlog li a{ display: inline; width: 48%; margin: 0 0 10px 0; padding: 0; text-align: center; border: none; } ul.hatena-asinlog li a:hover{ width: 48%; background-color: transparent; border: none; } ul.hatena-asinlog li a img{ filter: none; border: 1px solid #ffffff; } ul.hatena-asinlog li a:hover img{ filter: none; border: 1px solid #ff0000; } /********************* rss module *********************/ div.hatena-modulebody dd{ margin: 0; } /********************** calender **********************/ div.calendar { font-size:70%; margin: 0px 15px } .main div.calendar { font-size:80%; margin: 0px; padding: 0px 15px; text-align: right; position: static; color: #CE2618; } div.calendar a{ border: none; color: #CE2618; } /********************** calendar2 **********************/ table.calendar{ font-size: 11px; letter-spacing: 0px; width: 180px; margin: 0 auto 0 0; padding: 0; border: none; background-image : none; background-repeat: no-repeat; text-align: center; position: relative; } table.calendar a{ } td.calendar-current-month{ font-weight: normal; } td.calendar-prev-month, td.calendar-current-month, td.calendar-next-month{ text-align: centerr; } td.calendar-day a{ border-bottom: 2px solid #E5E5E4; position: relative; z-index: 0; } td.calendar-day a:hover{ z-index: 0; } td.calendar-weekday, td.calendar-sunday, td.calendar-saturday{ display:none; } td.calendar-day a img { width: 13px; height: 13px; z-index: 1; } td.calendar-day a:hover img{ width: auto; height: auto; bottom: -5px; right: -5px; position: absolute; z-index: 2; } /************************ adminmenu ****************************/ div.adminmenu{ text-align: right; margin: 0 0 0 50px; font-size: 80%; padding: 5px 10px; width: 650px; border: none; color: #000000; } div.adminmenu a{ border: none; color: #3F2F15; } span.adminmenu{ margin: 0 2px; } .hatena-body div.adminmenu{ margin: 0; text-align: left; border: none; width: auto; padding: 5px 10px; } /*********************/ span.highlight { background-color: #FF5FEF; padding: 1px; } div.footer{ padding: 10px; text-align: center; } .footer, .footer a{ color: #000000; border: none; } /*********keywordcloud************/ ul.keywordcloud { margin: 10px; padding: 0; } ul.keywordcloud li { font-size:90%; display: inline; } a.keywordcloud0 { font-size: 100%; } a.keywordcloud1 { font-size: 150%; } a.keywordcloud2 { font-size: 200%; } a.keywordcloud3 { font-size: 250%; } a.keywordcloud4 { font-size: 300%; } a.keywordcloud5 { font-size: 350%; } a.keywordcloud6 { font-size: 400%; } a.keywordcloud7 { font-size: 450%; } a.keywordcloud8 { font-size: 500%; } a.keywordcloud9 { font-size: 500%; } a.keywordcloud10 { font-size: 500%; }