floating-box

このデザインについて

floating-boxawawawa サンプル
カテゴリー:シンプルベーステーマ:なしヘッダー:標準(太)
登録日:2006/11/13更新日:2007/01/25利用数:139
横幅は600px固定です

■2007-01-25
 - #hatena-antenna-searchの指定を忘れていたので、記述しました。
  今まで、上部ヘッダで検索した際、表示が崩れていました。
  ごめんなさい。

 + ヘッダ色とボックスの色を合わせる記述を追加しました。
  CSSの最初の方にある「色リスト」から好きな色の見出し
  (/* gray */など)を探し、
  直後のコメントアウトを解除してください。

  (例)
  /* gray */
  /* ← grayを有効にしたければこれを消す
   ・
   ・
   ・
  */ ← これも消す
  /* green */
   ・
   ・
   ・

ヘッダ/フッタ/スタイルシート

ページのヘッダ

<h1><hatena name="title"></h1>

ページのフッタ


スタイルシート

body{color:black;background-color:white}
/* ------------------------------

 色のリスト

------------------------------ */
/* hatena */
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#e5ebff}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#e5ebff}
a{color:#00e}
/* gray */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#ededed}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#ededed}
a{color:#474a54}
*/
/* green */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#cfefd8}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#cfefd8}
a{color:#276d75}
*/
/* purple */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#f0e8f2}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#f0e8f2}
a{color:#00e}
*/
/* brown */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#ede2ce}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#ede2ce}
a{color:#753919}
*/
/* red */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#ffeaea}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#ffeaea}
a{color:#9c0700}
*/
/* sepia */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#fff5e0}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#fff5e0}
a{color:#bb8743}
*/
/* pink */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#ffedea}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#ffedea}
a{color:#cb5e66}
*/
/* tea */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#e9eede}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#e9eede}
a{color:#96ab7e}
*/
/* light gray */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#ededed}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#ededed}
a{color:#989793}
*/
/* light blue */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#eff9ff}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#eff9ff}
a{color:#00e}
*/
/* white */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#eee}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:white}
a{color:#666}
*/
/* orange */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#fff6cd}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#fff6cd}
a{color:#fc7819}
*/
/* lime */
/*
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#e8ffec}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:#e8ffec}
a{color:#43ba83}
*/
/* black */
/*
body{color:white;background-color:black}
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li, h1{border-color:#999}
#hatena-antenna-simple ol li, #hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{background-color:black}
a{color:white}
div#toggle_visited a{color:black;background-color:#999}
*/
/* ------------------------------

 色リストここまで

------------------------------ */
a:hover{color:red}
#hatena-antenna-search p.diff b{background-color:yellow;color:black}
div.footer{color:#ccc}
/*  */
body{text-align:center;margin:0;padding:0}
h1{font-size:140%;padding:0.2em;border-bottom-style:dotted;border-bottom-size:1px }
h1, h2, h3, h4, h5, h6, p{text-align:left;margin:0.2em auto;width:600px;clear:both}
div.footer{text-align:center;clear:both}
p.pager{font-size:80%;text-align:right;margin-top:0;margin-bottom:0}
.hatena-inc_filter{text-align:left}
#hatena-antenna-normal ol, #hatena-antenna-simple ol, #hatena-antenna-detail ol, #hatena-antenna-search ol, #hatena-antenna-image ol.image, p.pager, .hatena-inc_filter, #toggle_visited{margin-right:auto;margin-left:auto;padding-right:0;padding-left:0;width:600px}
#hatena-antenna-image ol.image{margin-right:auto;margin-left:auto;padding-right:0;padding-left:0;width:650px}
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li{text-align:left;overflow:hidden}
#hatena-antenna-detail ol li, #hatena-antenna-search ol li{text-align:left}
/* box */
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-detail ol li, #hatena-antenna-search ol li, #hatena-antenna-image ol li{margin:0 3px 0.5em 2px;padding:0.1em 0;border-style:solid;border-size:4px }
#hatena-antenna-normal ol li{height:10em}
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li, #hatena-antenna-image ol.image li{width:186px}
#hatena-antenna-normal ol li, #hatena-antenna-simple ol li{list-style-type:none;list-style-image:none;float:left;overflow:hidden}
#hatena-antenna-normal ol li{clear:none}
#hatena-antenna-simple ol li{height:4.5em}
#hatena-antenna-detail ol li, #hatena-antenna-search ol li{margin-bottom:2em;padding-bottom:0;width:100%}
/*  */
#hatena-antenna-normal ol li p, #hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{font-size:80%;text-align:left;margin-right:0;margin-bottom:0;margin-left:0;padding:0.3em}
#hatena-antenna-normal ol li p{padding-right:0.3em;padding-left:0.3em}
#hatena-antenna-detail ol li p, #hatena-antenna-search ol li p{padding-right:0;padding-left:0}
#hatena-antenna-normal ol li p{width:180px;height:100%}
#hatena-antenna-normal ol li .modified, #hatena-antenna-simple ol li .modified, #hatena-antenna-detail ol li .modified, #hatena-antenna-search ol li .modified{font-family:monospace;text-align:justify;display:block;width:100%;clear:both}
#hatena-antenna-normal ol li .author, #hatena-antenna-simple ol li .author, #hatena-antenna-detail ol li .author, #hatena-antenna-search ol li .author{font-size:80%;text-align:right;display:block;clear:both}
#hatena-antenna-normal ol li a img, #hatena-antenna-simple ol li a img, #hatena-antenna-detail ol li a img, #hatena-antenna-search ol li a img{float:left}
/* a */
a{font-weight:bold}
/*  */
#hatena-antenna-simple{font-size:90%}