デザインをデバッグ中
CSSやDOMの勉強しつつ、デザイン作成中。とりあえず、前のデザインをバックアップ。
シンプラー改 <div class="main"> </div> <div class="sidebar"> <hatena name="profile"> <hatena name="calendar2" template="hatena-module"> <hatena name="sectioncategory" template="hatena-module" target="archive"> <hatena name="searchform"> <hatena name="section" template="hatena-module"> <hatena name="comment" template="hatena-module"> <hatena name="trackback" template="hatena-module"> <hatena name="antenna" template="hatena-module" listlimit="5"> <hatena name="pv" template="hatena-module"> <hatena name="asinlog" template="hatena-module" listlimit="10" moduletitle="Books" type="image"> <div class="hatena-module"> <div class="hatena-moduletitle">リンク集</div> <div class="hatena-modulebody"> <ul class="hatena-urllist"> <li><a href="http://socialtunes.net/">socialtunes</a></li> <li><a href="http://www.hatena.ne.jp/">はてな</a></li> <li><a href="http://a.hatena.ne.jp/">はてなアンテナ</a></li> <li><a href="http://b.hatena.ne.jp/">はてなブックマーク</a></li> <li><a href="http://d.hatena.ne.jp/">はてなダイアリー</a></li> <li><a href="http://q.hatena.ne.jp/">人力検索はてな</a></li> <li><a href="http://r.hatena.ne.jp/">はてなRSS</a></li> </ul> </div> </div> </div> </div> body{ color: #003333; text-align: center; background-color: #ffffff; font-size: 80%; font-family: Verdana, Osaka, sans-serif; line-height: 1.5; margin: 0; padding: 0; word-break: break-all; word-wrap: break-word; } /*** はてなヘッダ *******************************************************************/ table{ background-color: #ffffff; padding: 0 0 ; font-size: 90%; margin: 0 auto; width: 692px; _width: 690px; border-right: 1px solid #989898 ; border-left: 1px solid #989898 ; border-bottom: 1px solid #989898 ; } .hatena-body table, .hatena-body table table{ padding: 0; background-image: none; background-color: transparent; margin: 0; border: none; width: auto; } table td{ background-color:transparent; } table table{ background-color:#ffffff; background-image: none; border: none; width: 100%; padding: 0; } table table td{ background-color:transparent; } table div{ } table font, table a{ border:none; color:; font-size: 100%; } table font font{ font-size: 100%; } .hatena-body table font, .hatena-body table a{ color: ; font-size: 100%; } table a{ border: none; } table input{ border: 1px solid #dcdcdc; background-color : transparent; color: ; } /*** タイトル **********************************************************************/ h1 a{ border: none; color: #cccccc; } h1{ padding: 25px 15px; width: 690px; font-size: 150%; text-align: left ; color: #cccccc; background-color: #ffffff; font-family: arial,sans-serif; clear: both; margin: 0 auto; font-weight: bold; border-right: 1px solid #989898 ; border-bottom: 1px solid #989898 ; border-left: 1px solid #989898 ; } :root h1{ width: 660px; } /*** メイン ***********************************************************************/ .hatena-body{ width: 690px; margin: 0 auto; padding: 0; position: relative; background-color: #ffffff; border-right: 1px solid #989898 ; border-left: 1px solid #989898 ; } .hatena-body:after{ content:""; display:block; clear:both; } .main{ margin: 0; padding: 0; float: left; clear: left; width: 514px; border-right: solid 1px #989898 ; } h2, h2 a{ text-decoration: none; border: none; } h2 { font-size: 100%; font-weight: normal; margin: 0; padding: 5px 10px; text-align: right; color: #696969; border-top: 1px solid #989898 ; } span.date{ color: #696969; margin: 0 0; } span.title{ margin: 0 ; } a.edit{ font-weight: normal; } div.body { _width: 100%; padding: 0; margin: 0; text-align: center; } div.section{ margin: 0; padding: 15px 20px ; text-align: justify; /** border-top: 1px dashed #B9B8B4 ; **/ } div.section p { margin: 10px 0; padding: 0; } h3 { font-size: 100%; font-weight: bold; margin: 0; padding: 5px 0; text-align: left; border-top: 1px dashed #0095bf ; border-bottom: 1px dashed #0095bf ; } .section h3 a{ border none; } a.sectioncategory{ color: #cccccc; } span.sanchor{ /** color: #cccccc; **/ color: #0095bf; } span.timestamp{ font-size: 70%; font-weight: normal; letter-spacing: 0; color: #cccccc; } div.section p.sectionfooter{ font-size: 80%; text-align: right; clear: both; color: ; margin: 10px 0 0 0; padding: 2px 0 ; } p.sectionfooter a{ border-color:; color: ; } /*** カレンダー ***************************************************************/ div.calendar a{ border: none; } div.calendar{ font-size: 80%; text-align: right; margin: 0 0 ; padding: 3px ; } /*** 文字装飾 *******************************************************************/ a{ color: #c0c0c0; text-decoration: none; } a.keyword, a.okeyword{ text-decoration: none; border: none; color:#003333 ; } a:hover, a:hover font, a:hover span{ color: #99cccc; } h4 { font-size: 100%; font-weight: normal; margin: 1em 0; padding: 0 0 0 0.5em; /** border-left: solid 2px #D8D8D5; **/ border-left: solid 4px #0095bf; } h5{ font-size: 90%; font-weight: bold; margin: 1em 0 ; padding: 0; } p.seemore{ text-align: left; font-weight: normal; } p.seemore a{ border-width: 2px; } p.message{ color: ; } blockquote{ margin: 15px 0 ; padding: 0.5em 1em; border: 1px solid #B9B8B4 ; line-height: 1.5; } .section blockquote p{ margin: 0.5em 0; padding: 0; } cite a{ border: none; } cite{ font-weight: normal; font-style: normal; display: block; width: 98%; _width: 100%; padding: 3px 1%; } pre { margin: 15px 0; padding: 1em; line-height: 1.2; font-family:sans-serif; border: 1px solid #B9B8B4 ; } strong{ font-weight: bold; } em{ font-weight: normal; } ins{ } .section ul{ margin: 7px 1em 7px 1em; padding: 0; } .section ol{ margin: 7px 1em 7px 1.5em; padding: 0; } .section ul li, .section ol li, .section ol ul, .section ol ol, .section ul ul, .section li li { margin: 0 0 0 1em; padding: 0; } .section dl{ margin: 1em 2em; } .section dl{ margin: 10px 20px; } .section dt{ font-weight: normal; } span.footnote{ font-size: 70%; } span.footnote a{ border: 0; } div.footnote{ font-size: 90%; _font-size: 80%; padding: 15px; text-align: left; margin: 5px ; background-color: #f5f5f5; } p.footnote{ margin: 0; } span.highlight { background-color: #ffff00; padding: 1px; } /*** コメント・リファラ ********************************************************/ div.comment{ text-align: left; padding: 10px ; margin: 0; _width: 100%; border-top: dashed 1px #808080; } div.refererlist{ text-align: left; padding: 5px ; margin: 0; _width: 100%; } div.caption{ font-size: 90%; _font-size: 80%; padding: 0; margin: 0; text-align: right; } div.comment div.caption{ } div.caption a{ border: none; color: #696969; text-decoration: none; } div.refererlist ul{ margin: 0 7px; padding: 0; list-style-type: none; text-align: left; letter-spacing: 0; } div.commentshort{ margin: 0; padding: 0; _width: 100%; background-color: ; font-size: 90%; _font-size: 80%; } div.commentshort a{ text-decoration: none; } span.canchor{ display: none; } div.commentshort p { margin: 0.5em; font-size: 100%; } span.commentator{ font-weight: normal; margin: 0 ; padding: 0; } span.commentator, span.commentator a{ text-decoration: none; } /**** 画像関連 ****************************************************************/ a img{ border: none; } a:hover img{ text-decoration: none; } img.photo{ float: right; margin: 10px; } img.asin{ float: left; margin: 0 10px 10px 0; } img.hatena-fotolife { border: none; } /*** はまぞう *************************************************************/ div.hatena-asin-detail { margin: 15px 0; padding: 10px; border: 1px solid #B9B8B4 ; _width: 100%; } img.hatena-asin-detail-image { float: left; clear: left; border: 0; margin: 0 15px 0 0 ; } div.hatena-asin-detail-info{ float: left; clear: right; margin: 0; padding: 0; word-break: break-all; } .section p.hatena-asin-detail-title{ font-weight: normal; margin: 0; padding: 0; } div.hatena-asin-detail-info ul { list-style-type: none; margin: 0; padding: 0; } div.hatena-asin-detail-info li { margin: 0; padding: 0; } div.hatena-asin-detail p a{ text-decoration: none; } div.hatena-asin-detail-foot { clear: both; } /*** サイドバー ******************************************************************/ .sidebar { float: right; width: 175px; _width: 174px; padding: 0 ; margin: 0 ; text-align: left; font-size: 90%; _font-size: 80%; color: #696969; } .sidebar .hatena-module{ margin: 0 ; padding: 0 0 10px 0 ; text-align: left; _width: 100%; border-bottom:1px solid #999; } .sidebar .hatena-moduletitle, .sidebar .hatena-moduletitle a{ border: none; color: #696969; } .sidebar .hatena-moduletitle{ font-size: 100%; _font-size: 90%; padding: 3px; margin: 5px ; text-align: right; font-weight: normal; background-color: #f5f5f5; font-family: Helvetica, Arial, osaka, sans-serif; } .sidebar .hatena-modulebody{ padding: 0; margin: 0 10px; _width:100%; } .sidebar .hatena-modulebody a{ border: none; } /**** サイドバー(リスト) ****************************************************/ .hatena-modulebody ul{ padding: 0; margin: 0; list-style-type: none; } .hatena-modulebody li { display: block; } .hatena-modulebody li a{ color: ; display: block; _width: 100%; padding: 0 5px; } .hatena-modulebody ul.hatena-recentcomment li a{ display: inline; width: auto; } /*** calendar2モジュール ****************************************************/ table.calendar{ font-size: 90%; letter-spacing: 0; width: 100%; margin: 0 auto; padding: 0; border: none; background-image : none; background-repeat: no-repeat; border-collapse: collapse; } table.calendar td{ padding: 3px; text-align: center; } 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 { } td.calendar-day a{ } td.day-today{ background-color: #f5f5f5; } td.day-selected{ } td.day-selected a{ } td.calendar-weekday, td.calendar-sunday, td.calendar-saturday{ display:none; } td.calendar-day img { height: 16px; width: 16px; border: 0; } div.body { clear: none !important; } /*** keywordcloudモジュール ****************************************************/ ul.keywordcloud { margin: 10px; padding: 0; } ul.keywordcloud li { font-size:90%; display: inline; } a.keywordcloud0 { font-size: 80%; } a.keywordcloud1 { font-size: 100%; } a.keywordcloud2 { font-size: 120%; } a.keywordcloud3 { font-size: 140%; } a.keywordcloud4 { font-size: 160%; } a.keywordcloud5 { font-size: 180%; } a.keywordcloud6 { font-size: 200%; } a.keywordcloud7 { font-size: 220%; } a.keywordcloud8 { font-size: 240%; } a.keywordcloud9 { font-size: 260%; } a.keywordcloud10 { font-size: 280%; } a.keywordcloud0, a.keywordcloud1, a.keywordcloud2, a.keywordcloud3, a.keywordcloud4, a.keywordcloud5, a.keywordcloud6, a.keywordcloud7, a.keywordcloud8, a.keywordcloud9, a.keywordcloud10 { text-decoration: none; }