(id:chachaki)
とりあえず、何か好きなものとか教えてください。とした時に挙げてもらったものを全く参考にしてない感じがあって、申し訳ないなぁ。と思うのは毎度のことなんですけども、ちゃちゃきくんのイメージって正直、的確に掴めてる自信がなくて、その中で、わりと短文で構成されている様子とかから、ゴテゴテするよりは文章が映えるように、シンプルでカチカチっとしたのが似合うんじゃないかと思ったのでそのような方向性で作ってみました。 あと、色見は寒色で。理系っぽい感じですかね。
要望
- プロフとAudioscrobberとBogPetをうまく配置したい。
- Ringを最下部に横に並べたいです。
- keyword:はてな年間100冊読書クラブへのリンクを表示。
- 院生ブログランキングバナーを設置したい。
この緑色のヘッダで、きれいにまとめてる人をみかけたことがないので、あえてチャレンジしてみたけど、けっこういい感じにまとまったように思う。一度、ゴテゴテに画像を入れてみたのだけれど、やはりイメージと違ったので、あえてプレーンな形に戻してみました。画像を入れてるのはモジュールタイトルくらいか、あと背景の斜線はこないだブクマで話題になってたツールを使ってみました。あれは色味の差が大きいときはエッジが目立ってしまい、きれいに描画しないので、便利だけどセンスを問われるツールですね。なかなかに難しかったです。
html { margin:0; padding:0; border:none; } body { font-size: 80%; font-family: Verdana, Osaka, sans-serif; line-height: 1.7; text-align: center; letter-spacing: 0px; color: #000000; background-color: #F9F9F9; margin: 0 auto; padding: 0; word-break: break-all ; word-wrap: break-word ; background-image: url("http://lab.rails2u.com/bgmaker/slash.png?margin=3&linecolor=E2E2EC&bgcolor=EAEAEA"); background-repeat: repeat; background-position: top left; scrollbar-base-color: #B7A99B; scrollbar-arrow-color: #2E260D; scrollbar-shadow-color: #2E260D; scrollbar-highlight-color: #2E260D; scrollbar-darkshadow-color: #2E260D; scrollbar-face-color: #B7A99B; } /********************** header **********************/ table { margin: 45px auto 0px auto; padding: 0px 0px; width: 648px; border: 1px solid #2A7981; border-bottom: 1px solid #2A7981; background-color: #4097A0; background-image: url(""); background-repeat: repeat-y; background-position: top center; } td { background-color : transparent; width: auto; margin: 0; padding: 0; } table table td{ background-color : transparent; margin: auto; padding: auto; } table table{ margin: 0px; padding: 3px 0px 0px 10px; border: none; width: 100%; background-color: #70B7BF; border-top: 1px solid #2A7981; background-image: url(""); background-repeat: repeat-x; background-position: left bottom; } table table td{ font-size: 80%; } table table td font, table table td a{ border:none; color: #C4E4E4; font-size: 12px; } td a{ border: 0; } table input{ height: 20px; border: 1px solid #3F808F; background-color: #419BA4; } .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; color: #ffffff; text-align: right; line-height: 1.2; font-size: 25px; padding: 60px 30px; width: 586px; border-right: 1px solid #2A7981; border-left: 1px solid #2A7981; background-color: #F6F6F6; background-image: url(""); background-repeat: no-repeat; background-position: center; } h1 a{ border: none; color: #9FBDBA; } .hatena-body{ margin: 0px auto 50px auto; position: relative; padding: 0px; text-align: left; width: 646px; border-right: 1px solid #2A7981; border-left: 1px solid #2A7981; border-bottom: 1px solid #2A7981; background-color: #F6F6F6; background-image: url(""); background-repeat: no-repeat; background-position: top center; } .main{ margin: 0px auto 0px 180px; padding: 0px; text-align: center; border-left: 1px solid #6F757C; } .day { margin: 0px 0px 50px 0px; padding: 0px; text-align:left; background-image: url(""); background-repeat: repeat-y; background-position: top center; background-color: #; } h2, h2 a{ text-decoration: none; border: none; } h2 { font-size: 100%; font-weight: bold; text-decoration:none; margin: 0px 15px; padding: 5px 10px; text-align: left; line-height: 1; border-left: 2px solid #305470; border-bottom: 1px solid #305470; } span.date{ 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; background-image: url(""); background-repeat: no-repeat; background-position: bottom left; } .section{ margin: 0px; padding: 10px 25px; background-color: #; } h3, h3 a{ border: none; } h3 { font-size:100%; font-weight: normal; margin: 10px 0px 20px 0px; padding: 8px 0px; text-align:left; line-height: 1; border-bottom: 1px solid #696969; background-image: url(""); background-repeat: no-repeat; background-position: bottom center; } a.sectioncategory{ } span.sanchor{ color: #003A9B; font-size: 13px; margin: 5px 15px 5px 0px; background-image: url(""); background-repeat: no-repeat; background-position: left; } span.timestamp{ font-size:70%; font-weight: normal; letter-spacing: 0px; } .section p { margin: 0px; text-align:left; padding: 0; } /**************** decoration *************************/ a{ text-decoration: none; color: #003A9B; border: none; } a.keyword, a.okeyword { text-decoration: none; border: none; color: #000000; } a img{ border: none; } a:link { } a:visited { } a:hover { text-decoration: none; border: none; color: #ffffff; } a:active { color: #16DD45; } h4 { font-size:100%; font-weight: normal; padding: 0 0 0 17px; margin: 1em 0; text-align:left; border-bottom: 1px solid #84888B; word-break:break-all; } h5 { font-size:100%; font-weight: normal; padding: 0 0 0 17px; margin: 1em 5px; border-left: 4px double #84888B; text-align:left; word-break:break-all; } blockquote{ border: solid 1px #84888B; background-color: #; margin: 10px 0px; padding: 10px; } .section blockquote p{ margin: 0.5em; padding: 0; } cite a{ border: none; color: #000000; } cite{ font-weight: normal; font-style: normal; font-size: 10px; border: 3px double #84888B; padding: 2px 5px; float:right; background-color: #ffffff; } pre { border: double 3px #84888B; background-color: #; 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; color: #000000; } ins a{ border: none; } ins{ text-decoration: none; border-bottom: solid 1px #84888B; } .day td{ padding: 5px 5px 5px 7px; margin: 0; background-color: #F8F8F8; border: dotted 1px #A7A3A3; } .day th{ padding: 5px 5px 5px 7px; margin: 0; border: solid 1px #A7A3A3; background-color: #E1E9D6; font-weight: normal; } .day table{ margin: 10px 0; font-size: 100%; border: none; border-collapse: collapse; text-align: center; border: solid 2px #A7A3A3; } .hatena-module input { margin: 0px 2px; color: #D0EFEF; border: 1px solid #2A7981; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20051129/20051129094036.gif"); background-repeat: repeat-x; background-position: left bottom; } /************************* 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: 60px 20px 5px 10px; padding: 0; } .body img.asin{ float: right; margin: 50px 25px 5px 10px; padding: 0; border: solid 1px #D1CAB2; } /********************* footnote **********************/ span.footnote{ font-size: 70%; } span.footnote a{ border: 0; } div.footnote{ padding: 0px 30px; margin: 0px; } p.footnote{ margin: 3px 0px; font-size: 90%; } p.footnote a{ border: none; } /********************** comment ***********************/ div.comment, div.refererlist { _width: 100% ; font-size: 90%; padding: 5px 20px; margin: 0px; background-color: #; background-image: url(""); background-repeat: no-repeat; background-position: top left; } div.refererlist { text-align: right; } div.refererlist ul{ margin: 0 5px; padding: 0; list-style-type: none; font-size: 100%; letter-spacing: 0px; } form div.refererlist ul{ font-size: 100%; letter-spacing: 1px; } div.caption{ font-size: 100%; padding: 0; margin: 0; text-align: right; } div.refererlist div.caption{ } form div.refererlist div.caption{ font-size: 100%; padding: 0 0.5em; margin: 0.5em 0; } div.caption a{ font-size: 80%; color: #000000; border: none; } div.commentshort{ margin: 0 0 0 0; } div.commentshort textarea{ width: 90%; height: 10em; } span.canchor{ display: none; } div.commentshort a{ border: none; } div.commentshort a:hover{ color: #ffffff; } span.commentator{ font-weight: bold; display:block; margin: 0px 0px 5px 0px; padding: 1px 5px; border-bottom: 1px solid #696969; background-color: #; background-image: url(""); background-repeat: repeat; background-position: top left; } form span.commentator{ margin: 10px 0px 1px 0px; } div.commentshort P { margin: 2px 0; padding: 10px; font-size: 95%; letter-spacing: 0px; background-color: #; } p.sectionfooter { margin: 10px 0px 0px 0px; text-align: right; } p.sectionfooter a{ color: #000000; text-decoration: none; border: none; font-size: 90%; } /******************asin detail***********************/ div.hatena-asin-detail { margin: 10px 5px; padding: 10px ; color: #000000; border: double 3px #838383; background-color: #ffffff; _width: 100%; } div.hatena-asin-detail a{ color: #000000; } div.hatena-asin-detail a:hover{ border: none; } img.hatena-asin-detail-image { float: left; border: 0; margin: 0 20px 0 0 ; } div.hatena-asin-detail-info{ float: left; margin: 10px; word-break: break-all; } .section p.hatena-asin-detail-title{ font-weight: normal; border-bottom: 1px dotted #838383; _width: 100%; padding: 0px 10px; margin: 5px 0 15px 0; } div.hatena-asin-detail-info ul { list-style-type: none; margin: 0; padding: 0; font-size: 91%; } 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-r { width: auto; padding: 0px; margin: 0px; height: 30px; font-size: 80%; text-align: center; color: #C4E4E4; border-top: 1px solid #2A7981; background-color: #4097A0; } .sidebar { position: absolute; top: -150px; left: 0px; width: 180px ; padding-top: 0px; margin: 0 ; font-size: 80%; text-align: center; border-right: 1px solid #6F757C; background-color: #ECECEC; color: #626472; } .sidebar a{ color: #626472; } .hatena-module{ margin: 20px 0px 0px 0px; padding: 0px; _width: 100% ; text-align: center; background-image: url(""); background-repeat: repeat-y; background-position: top center; } .hatena-module a:hover{ color: #FFA467; } .hatena-moduletitle, .hatena-moduletitle a{ border: none; color: #C4E4E4; } .hatena-moduletitle{ font-size: 13px; letter-spacing: 0px; font-weight: normal; padding: 4px 5px; margin: 0px 0px 5px 0px; color: #C4E4E4; letter-spacing: 0px; line-height: 1; border-top: 1px solid #2A7981; border-bottom: 1px solid #2A7981; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20051129/20051129094036.gif"); background-repeat: repeat-x; background-position: left bottom; } .hatena-modulebody{ padding: 5px 5px; margin: 0px; _width:100%; background-image: url(""); background-repeat: no-repeat; background-position: bottom center; } .hatena-modulebody a{ border: none; } /********************** sideber li **********************/ .hatena-modulebody ul{ padding: 3px; margin: 0px; list-style-type: none; text-align: left; } .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: auto; list-style-type: none; text-align: center; } ul.hatena-photo li{ margin: 0px; display: inline; width: none; } ul.hatena-photo li img{ width: 60px; } 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; border-left: 2px solid #BFBAA9; border-right: 2px solid #BFBAA9; } /******************** asin log ***********************/ ul.hatena-asinlog{ padding: 5px 5px; margin: 0; width: auto; 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: 26px; } 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:80%; } .main div.calendar { font-size:80%; margin: 0px; padding: 0px 15px; text-align: right; position: static; } div.calendar a{ border: none; } /********************** calendar2 **********************/ table.calendar{ color: #000000; font-size: 11px; letter-spacing: 0px; width: 80%; _width: 100%; margin: 0 auto; 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:center; } td.calendar-day a{ border-bottom: 1px 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; border: solid 1px #ffffff; z-index: 1; } td.calendar-day a:hover img{ border: solid 1px #ffffff; 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%; } div.body { clear: both; }