Hatena::Grouppico

cpk:d:origin

cpk:d:origin

cpk:d:origin

かんたんデザイン設定対応。見栄えよりも構造の欠陥を無くして、自分の作るテーマの基盤となるものとなっています。

更新履歴

  • 2005/11/5 append
  • <中略>
  • 2006/7/24 adminmenu周り修正

ヘッダ色

wh

ヘッダ部

<div class="main">

フッタ部

</div>
<div class="sidebar">
<!-- profile -->
<!-- calendar2 -->
<!-- antenna -->
</div>

スタイルシート

html {
  margin: 0;
  padding: 0;
}

body{
  color: #000000;
  background: #e5e5e5;
  font-size: 80%;
  font-family: "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, "MS Pゴシック", sans-serif;
  line-height: 1.6;
  margin: 0;
  text-align: center;
  padding: 0;
  word-break: break-all;
  word-wrap: break-word;
}

/*:: header ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

table#banner{
  padding: 0;
  font-size: 100%;
  margin: 0 auto;
  width: 700px;
  text-align: left;
  background: #ffffff;
}

table#banner td{
  background: transparent;
  padding: 0 10px;
}

table#banner table{
  background: transparent;
  border: none;
  width: 100%;
  font-size: 100%;
  line-height: 1;
}

table#banner table td{
  background: transparent;
  padding: 0;
  margin: 0;
}

table#banner div{
  font-size: 80%;
}

table#banner font,
table#banner a{
  border: none;
  color: #a0a0a0;
  font-size: 100%;
}

table#banner font font{
  font-size: 100%;
}

table#banner input{
  background: #f9f9f9;
  color: #000000;
  border: none;
}

/*:: title ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

h1{
  padding: 40px 15px;
  width: 640px;
  _width: 700px;
  *width: 700px;
  font-size: 150%;
  text-align: left;
  color: #000000;
  font-family: Myriad,Helvetica,Arial,sans-serif;
  clear: both;
  margin: 0 auto;
  font-weight: bold;  
  background: #f0f0f0;
  border: solid 15px #ffffff;
}

h1 a{
  text-decoration: none;
  border: none;
  color: #000000;
}

/*:: main ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-body{
  width: 700px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  position: relative;
  background: #ffffff;
}

.hatena-body:after{
  content: "";
  display: block;
  clear: both;
  border-bottom: 1px transparent solid;
}

.main{
  margin: 0;
  padding: 0;
  float: left;
  clear: left;
  width: 500px;
}

.day{
  margin: 0 15px 2.5em 15px;
  position: relative;
  top: 0;
  left: 0;
}

h2,
h2 a{
  text-decoration: none;
  border: none;
  color: #a0a0a0;
}

h2 {
  font-size: 100%;
  font-weight: bold;
  margin: 0 0 1em 0;
  padding: 0;
  text-align: left;
  line-height: 1;
}

span.date{
  margin: 0;
  text-align: left;
  color: #aaaaaa;
  font-size: 100%;
}

span.title{
  margin: 0 5px;
  text-align: left;
}

a.edit{
  font-weight: normal;
  color: #ddd;
  margin: 0 0 0 10px;
}

.body {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
}

.section{
  margin: 0 0 2.5em 0;
  padding: 0;
}

.section p {
  margin: 1em 0;
  padding: 0;
}

h3 {
  font-size: 120%;
  font-family: arial,sans-serif;
  font-weight: bold;
  margin: 0 0 0.7em 0;
  padding: 0;
  text-align: left;
}

h3 a:first-child,
span.sanchor {
  text-decoration: none;
}

a.sectioncategory{
  color: #000000;
  text-decoration: none;
}

span.sanchor{
  color: #FB7BD9;
  font-family: sans-serif;
  margin: 0 3px 0 0;
}

span.timestamp{
  font-size: 70%;
  font-weight: normal;
}

.section p.sectionfooter{
  font-size: 80%;
  text-align: right;
  clear: both;
  color: #a0a0a0;
  margin: 1.5em 0 1em 0;
  padding: 0: 
}

p.sectionfooter a{
  text-decoration: none;
  color: #a0a0a0;
  border-bottom: solid 1px #eeeeee;
}

.ad{
  margin: 2em 0 3em 0;
  text-align: left;
}

/*:: calendar/breadcrumbs ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.calendar a{
  text-decoration: none;
  color: #a0a0a0;
  border-bottom: solid 1px #eeeeee;
}

.calendar{
  text-align: right;
  color: #a0a0a0;
  margin: 0 10px;
  font-size: 80%;
}

#hatena-archive .calendar{
  text-align: left;
  color: #000000;
  margin: 0 15px 0.5em 15px;
  font-size: 100%;
}

#hatena-archive .calendar a{
  color: #000000;
}

.breadcrumbs{
  font-size: 80%;
  color: #a0a0a0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.breadcrumbs a{
  color: #a0a0a0;
}

/*:: format ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

a{
  text-decoration: underline;
  color: #000000;
}

a.keyword,
a.okeyword{
  text-decoration: none;
  border: none;
}

a:hover,
a:hover font,
a:hover span{
  color: #FB7BD9;
  border-color: #FB7BD9;
}

h4 {
  font-size: 100%;
  font-weight: bold;
  margin: 1.5em 0 1em 0;
  padding: 0 0 0 0.5em;
  text-align: left;
  word-break: break-all;
  border-left: solid 3px #FB7BD9;
}

h5{
  font-size: 100%;
  font-weight: bold;
  margin: 1em 0;
  padding: 0 0 0 0.5em;;
  text-align: left;
  word-break: break-all;
  border-left: solid 3px #d0d0d0;
}

p.seemore{
  text-align: left;
  font-weight: bold;
}

p.seemore a{
  border-color: #f0f0f0;
  color: #666666;
}

blockquote{
  margin: 1em 0;
  padding: 1px 0;
  border: solid 2px #f0f0f0;
  color: #000000;
}

.section blockquote p{
  margin: 1em;
  padding: 0;
}

cite a{
  border: none;
  text-decoration: none;
}

cite{
  font-weight: bold;
  font-style: normal;
  display: block;
  width: 98%;
  _width: 100%;
  padding: 3px 1%;
}

pre  {
  margin: 1em 0;
  padding: 1em;
  font-family: 'MS Gothic', monospace;
  background: #f0f0f0;
  color: #000000;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.section blockquote a,
.section pre a{
  color: #000000;
}

strong{
  font-weight: bold;
}

em{
  font-weight: normal;
  font-style: normal;
  background: #FB7BD9;
  color: #000000;
}

ins{
  text-decoration: none;
  color: #999999;
}

ins a{
  color: #999999;
}

/*:: list ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.section ul{
  margin: 1em 1em 1em 1em;
  padding: 0;
}

.section ol{
  margin: 1em 1em 1em 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 0;
}

.section dt{
  font-weight: normal;
}

/*:: image ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

a img{
  border: none;
}

img.photo{
  float: right;
  margin: 10px;
}

img.asin{}

img.hatena-fotolife {}

/*:: table ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.day td{
  padding: 5px;
  margin: 0;
  border: solid 1px #dddddd;
}

.day th{
  padding: 5px;
  margin: 0;
  border: solid 1px #dddddd;
  font-weight: bold;
}

.day table{
  margin: 1em 0;
  font-size: 100%;
  border: none;
  border-collapse: collapse;
  text-align: left;
  border: solid 2px #dddddd;
}

/*:: asin detail ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-asin-detail{
  margin: 1em 5px;
  padding: 1em;
  border: solid 2px #e0e0e0;
  _width: 100%;
}

img.hatena-asin-detail-image {
  float: left;
  border: 0;
  margin: 0 10px 0 0: 
}

.hatena-asin-detail-info{
  float: left;
  margin: 0;
  word-break: break-all;
}

.section .hatena-asin-detail p{
  font-weight: bold;
  margin: 0;
}

.section .hatena-asin-detail p a{
  border: 0;
  text-decoration: none;
}

.section .hatena-asin-detail-info ul {
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.section .hatena-asin-detail-info li {
  margin: 0;
  padding: 0;
}

.hatena-asin-detail-foot {
  clear: left;
}

/*:: question ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.day table.hatena-question-detail{
  margin: 1em 0;
  padding: 5px;
  font-size: 100%;
  border: solid 2px #e0e0e0;
  text-align: left;
  table-layout: auto;
}

th.hatena-question-detail-title{
  border: none;
  padding: 5px;
  margin: 0;
  font-weight: bold;
  width: auto;
}

th.hatena-question-detail-title a{
  border: none;
  text-decoration: none;
}

td.hatena-question-detail-label{
  width: 30%;
}

td.hatena-question-detail-value{
  width: auto;
}

img.hatena-question-image{}

/*:: footnote ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

span.footnote{
  font-size: 70%;
}

span.footnote a{}

div.footnote{
  padding: 0;
  text-align: left;
  margin: 0 0 1em 0;
}

p.footnote{
  margin: 0;
  font-size: 80%;
}

/*:: comment ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.comment,
.refererlist{
  text-align: left;
  padding: 0;
  margin: 0 0 1em 0;
  _width: 100%;
}

.caption{
  padding: 0;
  margin: 0;
}

.caption a{
  text-decoration: none;
  border-bottom: solid 1px #eeeeee;
}

.refererlist ul{
  margin: 0 7px;
  padding: 0;
  list-style-type: none;
  text-align: left;
  font-size: 80%;
}

.commentshort{
  margin: 10px 0;
  padding: 0;
}

form .commentshort{}

span.canchor a{
  color: #d0d0d0;
  text-decoration: none;
}

.commentshort a{
  text-decoration: none;
}

span.commentator{
  font-weight: bold;
  margin: 0;
  padding: 0;
}

span.commentator,
span.commentator a{
  color: #000000;
}

.commentshort p{
  margin: 0 0 1em 0;
  font-size: 100%;
}

.comment textarea{
  width: 400px;
}

/*:: form ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

form{
  margin: 0;
  padding: 0;
}

form.hatena-searchform{
  margin: 0 0;
}

.day form .body{
  margin: 0;
  padding: 0 10px;
}

/*:: sidebar ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.sidebar {
  float: right;
  clear: right;
  width: 200px;
  color: #000000;
  margin: 0;
  text-align: left;
  font-size: 85%;
}

.hatena-module{
  margin: 0 0 15px 0;
  padding: 10px;
  text-align: left;
  _width: 100%;
  background: #f0f0f0;
}

.sidebar .hatena-module{
  margin: 0 15px 15px 0;
}

.hatena-moduletitle a{
  border: none;
  text-decoration: none;
}

.hatena-moduletitle{
  font-size: 120%;
  line-height: 1;
  padding: 0;
  margin: 0 0 5px 0;
  font-weight: bold;
}

.hatena-modulebody{
  padding: 0;
  margin: 0;
  _width: 100%;
}

.hatena-modulebody a{
  border: none;
  text-decoration: none;
  color: #000000;
}

/*:: sidebar list ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-modulebody ul{
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.hatena-modulebody li {
  display: block;
}

.hatena-modulebody li a{
  color: #000000;
  padding: 0;
}

.hatena-modulebody li a:hover {
  color: #FB7BD9;
}

.hatena-modulebody ul.hatena-recentcomment li a{
  display: inline;
  width: auto;
}

/*:: profile module ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-profile{}

p.hatena-profile-image{
  margin: 0;
}

p.hatena-profile-id{
  margin: 0;
  font-weight: bold;
}

p.hatena-profile-id a{}

p.hatena-profile-body{
  margin: 0;
}

ul.hatena-profile-list {
  margin: 0 !important;
  padding: 0;
}

ul.hatena-profile-list li {
  display: inline;
  margin: 0;
  padding: 0;
}

/*:: rss module ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

dl.hatena-rss{
  margin: 0;
}

dl.hatena-rss dt{}

dl.hatena-rss dd{
  margin: 0 0 0 0.5em;
  padding: 0;
  color: #999999;
}

/*:: photo module ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

ul.hatena-photo{
  padding: 0;
  margin: 0;
  width: auto;
  list-style-type: none;
  text-align: left;
}

ul.hatena-photo:after{
  content: "";
  display: block;
  clear: both;
  border-bottom: 1px transparent solid;
}

ul.hatena-photo li{
  margin: 0;
  padding: 0;
  display: block;
  width: 49.9999%;
  float: left;
  text-align: center;
  vertical-align: middle;
  height: 80px;
}

ul.hatena-photo li img{}

ul.hatena-photo li a{}

ul.hatena-photo li a img{
  border: solid 1px #f0f0f0;
}

ul.hatena-photo li a:hover img{
  border: solid 1px #FB7BD9;
}

/*:: calendar2 module ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

table.calendar{
  font-size: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  color: #000000;
  border: none;
  border-collapse: collapse;
}

table.calendar td{
  padding: 5px 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{
  text-decoration: underline;
}

td.day-today{
  background: #e0e0e0;
}

td.day-selected{
  background: #FB7BD9;
  color: #000000;
}

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

/*:: keywordcloud ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

ul.keywordcloud {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

ul.keywordcloud li { display: inline; }
ul.keywordcloud li a{ text-decoration: none; }
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%; }

/*:: adminmenu ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

div.adminmenu{
  text-align: right;
  width: 670px;
  _width: 700px;
  *width: 700px;
  padding: 0 15px;
  margin: 0 auto;
  background: #ffffff;
  font-size: 60%;
}

.main div.adminmenu{
  width: 100%: 
  background: transparent;
  font-size: 100%;
}

.sidebar div.adminmenu{
  width: 100%;
  font-size: 100%;
  text-align: left;
  background: transparent;
  padding: 0;
  margin: 0;
}

span.adminmenu{
  margin: 0 3px;
}
span.adminmenu a{
  text-decoration: none;
}

.sidebar span.adminmenu{
  display: block;
  width: 49.99%;
  float: left;
  margin: 0;
}
.sidebar div.adminmenu:after{
  content: "";
  display: block;
  clear: both;
  border-bottom: 1px transparent solid;
}

.main span.adminmenu a,
.sidebar span.adminmenu a{
  text-decoration: none;
  background: transparent;
  padding: 0;
}

/*:: other ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

p.message{
  color: #ff0000;
}

span.highlight {
  background: yellow;
}

.footer{
  text-align: center;
  clear: both;
  _width: 100%;
}

.footer,
.footer a{
  color: #dddddd;
  border: none;
}