(id:mu-gi)
募集してみたところ、喜ばしいことに即座にカヨさんが手を挙げてくださったので、早速デザイン作業に移ります。今回も細かい要望をいただいておらず、わりとおまかせっぽい感じなので、方向性を間違えないように意識しないといけないと思う。なんとなく今まで使用しておられたテーマから、好みみたいなものは読み取れている気がするので、そこらへんを抑えつつ、作っていきたいと思う。出来上がりはシンプルに仕上げるつもり。しっかり手を入れるんだけど、本文まわりの装飾はできるだけシンプルに。背景をこだわって落ち着いた雰囲気を出せればいいかなぁ。そんな感じ。
作業中
きれいな写真を撮る方なので、フォトライフの画像の見せ方とか考えてみたいと思った。とりあえずヘッダに横並びにしたり、3カラムにして一列に並べたりしてみたんだけど、どうもしっくりこない。他の作業が終わるまで特別よいアイデアが浮かばない場合は普通にサイドバーに格納することにする。
全体の色味は落ち着いた感じでつくることにした。好きなCDジャケとか聞いといて、ほとんど参考にできてないのでどうかと思ったりした。そこらへんはえらく申し訳ない気持ちです。
提案
全体的に同じトーンで仕上げてたものを見てもらった際に、差し色があったらいいかも?との提案から速攻で採用。でも明らかに自分のセンスが問われる作業だったために、試行錯誤の結果、一応仕上げたものの若干不安は残りました。
感想
積極的に意見をいただけたことが、かなり良い方向にむかったような気がしてます。自分が作ったってよりは共同制作的なノリに近い気がする。自分ですべて決めていくのもいいけれど、こうゆう作り方はセンスの部分でかなり勉強になるので楽しかったし一歩進歩したような気がした。
html { margin:0; padding:0; border:none; } body { font-size: 80%; font-family: Verdana, Osaka, sans-serif; line-height: 1.6; letter-spacing: 0px; color: #5B4737; background-color: #FEF9E7; margin: 0 0 0 80px; padding: 0; background-position: top left; word-break: break-all ; word-wrap: break-word ; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20051123/20051123161837.gif"); 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: 0px 10px; padding: 0px 10px; width: 710px; background-color: #; 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-image: none; background-color: transparent; } table table td{ font-size: 80%; } table table td font, table table td a{ border:none; color: #C7C9C9; font-size: 11px; } td a{ border: 0; } table input{ height: 20px; border: solid 1px #CFCFCF; background-color: #ffffff; } .hatena-body table{ width: auto; margin: 0; padding:0 10px; border: 0; background-image: none; background-color : transparent; } h1 { font-weight: normal; color: #6D6D6D; text-align: center; line-height: 1.2; font-size: 120%; padding: 50px 0px 50px 90px; width: 640px; background-color: #; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20051126/20051126232638.gif"); background-repeat: no-repeat; background-position: center; } h1 a{ border: none; color: #6D6D6D; } .hatena-body{ position: relative; padding: 10px 0px; text-align: left; width: 730px; background-color: #; background-image: url(""); background-repeat: no-repeat; background-position: top center; } .main{ margin: 0px auto 0px 0px; padding: 0px; width: 520px; text-align: center; border-right: 1px solid #D6D6D6; } .day { margin: 10px 0px; padding: 0px 10px; 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: normal; text-decoration:none; margin: 0px 2px; padding: 10px 5px 8px 0px; text-align: right; line-height: 1; border-top: 1px solid #DEDEDE; border-bottom: 3px double #ffffff; background-color: #D52609; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20051125/20051125222110.gif"); background-repeat: no-repeat; background-position: center top; } span.date{ color: #ffffff; font-size: 200%; padding: 5px 10px; } span.title{ color: #ffffff; font-size: 100%; font-family: Verdana, Osaka, sans-serif; margin: 0 0 0 10px; padding: 5px 10px; } .body { padding: 0px; margin: 0px; background-image: url(""); background-repeat: no-repeat; background-position: bottom left; } .section{ margin: 0px; padding: 10px 35px 0px 35px; background-color: #ffffff; } h3, h3 a{ border: none; } h3 { font-size:100%; font-weight: normal; margin: 10px 0px 15px 0px; padding: 10px 0px; text-align:left; line-height: 1; border-bottom: 1px dotted #6E6D07; background-image: url(""); background-repeat: no-repeat; background-position: bottom center; } a.sectioncategory{ } span.sanchor{ color: #6E6D07; font-size: 12px; 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: #5B4737; border-bottom: 1px dotted #A9AF84; } a.keyword, a.okeyword { text-decoration: none; border: none; color: #5B4737; } a img{ border: none; } a:link { } a:visited { } a:hover { text-decoration: none; border: none; } a:active { color: #ffffff; } h4 { font-size:100%; font-weight: normal; padding: 0 0 0 17px; margin: 1em 0; text-align:left; border-left: 4px double #787845; border-bottom: 1px dotted #787845; word-break:break-all; } h5 { font-size:100%; font-weight: normal; padding: 0 0 0 17px; margin: 1em 5px; border-left: 4px double #E7E7E7; text-align:left; word-break:break-all; } blockquote{ border: solid 1px #D1C59B; background-color: #FFFFFB; margin: 10px 3px; padding: 10px 8px; } .section blockquote p{ margin: 0.5em; padding: 0; } cite a{ border: none; color: #5D5629; } cite{ font-weight: normal; font-style: normal; font-size: 10px; border: 3px double #D1C59B; padding: 2px 5px; float:right; background-color: #ffffff; } pre { border: double 3px #82D1D6; background-color: #FDFFFF; color: #486E6D; margin: 10px 2px; padding: 10px 15px; overflow: auto; } font{ line-height: 1.2em; } em a{ border: none; color: #DD702E; } em{ font-weight: normal; font-style: normal; color: #DD702E; } ins a{ border: none; } ins{ text-decoration: none; border-bottom: solid 1px #ffffff; } .day td{ padding: 5px 5px 5px 7px; margin: 0; background-color: #EFE9D4; border: solid 1px #847647; } .day th{ padding: 5px 5px 5px 7px; margin: 0; border: solid 1px #847647; background-color: #C5B88C; font-weight: normal; } .day table{ margin: 10px 0; font-size: 100%; border: none; border-collapse: collapse; text-align: center; border: solid 2px #847647; } input { border: 1px solid #EEE5D9; background-color: #FCF7EE; margin: 0px 2px; color: #584629; } /************************* 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 30px 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 { _width: 100% ; font-size: 90%; padding: 5px 0px; margin: 0px 11px; background-image: url(""); background-repeat: no-repeat; background-position: top left; } div.refererlist{ display: none; _width: 100% ; font-size: 100%; padding: 0px 14px 20px 20px; margin: 0px; text-align: right; background-image: url(""); background-repeat: no-repeat; background-position: bottom center; } 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%; 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; padding: 3px 5px; background-color: #E3C9DE; border: 1px solid #C2A8BD; background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20051125/20051125223534.gif"); background-repeat: repeat; background-position: top left; } form span.commentator{ margin: 10px 0px 1px 0px; } div.commentshort P { margin: 2px 0; padding: 0px; font-size: 95%; letter-spacing: 0px; background-color: #; } p.sectionfooter { margin: 10px 0px 0px 0px; text-align: right; } p.sectionfooter a{ color: #5B4737; text-decoration: none; border: none; font-size: 90%; } /******************asin detail***********************/ div.hatena-asin-detail { margin: 10px 5px; padding: 10px ; color: #6C6C6C; border: double 3px #BAAE57; background-color: #FCFBF3; _width: 100%; } div.hatena-asin-detail a{ color: #6C6C6C; } div.hatena-asin-detail a:hover{ color: #6C6C6C; 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-left: 3px double #BAAE57; _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 { position: absolute; top: 30px; left: 750px; width: 70px ; padding: 0px; margin: 0 ; font-size: 80%; text-align: center; background-color: #; color: #9B9B93; } .sidebar { position: absolute; top: 30px; left: 520px; width: 200px ; padding: 0px; margin: 0 ; font-size: 80%; text-align: center; background-color: #; color: #9B9B93; } .sidebar a{ color: #9B9B93; } .hatena-module{ margin: 30px 10px; padding: 0px; _width: 100% ; text-align: center; background-color: #; background-image: url(""); background-repeat: repeat-y; background-position: top center; } .hatena-module a:hover{ color: #887743; } .hatena-moduletitle, .hatena-moduletitle a{ border: none; } .hatena-moduletitle{ font-size: 130%; letter-spacing: 0px; font-weight: normal; padding: 4px 5px; margin: 0px; letter-spacing: 0px; line-height: 1; border-bottom: 3px double #E3E3E3; background-color: #; background-image: url(""); background-repeat: no-repeat; background-position: top center; } .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; border: 1px solid #FCFBF9; } .hatena-modulebody li { margin: 2px 0px; background-color: #; } .hatena-modulebody li a{ padding: 2px 5px; line-height: 1.1; } .hatena-modulebody li a:hover { color: #887743; background-color: #; } /******************* profile module *******************/ .hatena-profile { } .hatena-profile img{ } .hatena-profile-id a{ font-size: 100%; padding: 2px; margin: -5px 0px; width: auto; display: block; background-image: url(""); background-repeat: no-repeat; background-position: bottom center; } .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: 45px; } ul.hatena-photo li a{ display: inline; margin: 0px; padding: 0; text-align: center; border: none; } ul.hatena-photo li a:hover{ width: 45px; 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%; height: 10px; margin: 0px; padding: 5px; text-align: right; position: static; } div.calendar a{ border: none; } /********************** calendar2 **********************/ table.calendar{ color: #9B9B93; 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: #3F2F15; } 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: #ffffff; 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%; }