はてな義援金バナーを日記のヘッダに挿入

管理

はてな義援金のバナーを日記のヘッダに挿入しました。
それで削った写真一覧のデザインデータを自分用にメモ。

CSS

#exhibition{
  width:842px;
 _width:844px;
 *width:844px;
  height:110px;
  overflow-x:auto;
  overflow-y:hidden;
background:#336633 none;
position:relative;
}
#exhibition .hatena-module{
  width:3100px;
  margin-left:130px;/* タイトルの長さに合わせて調整してください */    
  border:none;
  background:transparent;
}
#exhibition .hatena-moduletitle{
  position:absolute;
  top:30px; /* タイトルの長さにあわせて調整してください */  
  left:15px; /* タイトルの長さにあわせて調整してください */  
  background:transparent;
  text-align:left;
  margin:0;
  padding:0;
  border:none;
  font-size:14px;
  font-style:normal;
}

#exhibition .hatena-moduletitle a{
  display:block;
  height:30px;
  padding:8px 15px 0px 15px;
  background:transparent;
  color:white;
}

#exhibition .hatena-moduletitle a:hover{color:white;}
#exhibition .hatena-moduletitle a:visited{color:white;}
#exhibition .hatena-modulebody ul{
  margin-top:0px;
}

#exhibition .hatena-modulebody ul li{
  display:inline;
  float:left;
  width:50px;
  margin-right:10px;
  padding:0;
  border:none;
  background:#FFF;
  text-align:center !important;
}

#exhibition .hatena-modulebody ul li a{
  margin-top:4px;
  margin-bottom:12px;
  margin-right:auto;
  margin-left:auto;
  width:40px;
  height:40px;
  overflow:hidden;
  display:block;
  border:1px solid #B5C7D6;
}

#exhibition .hatena-modulebody ul li a img{
  background:#FFF;
}

日記のヘッダ

<div id="exhibition">
  <hatena name="rss" url="http://f.hatena.ne.jp/Yuny/%ef%bc%9f%e3%83%8f%e3%82%a4%e3%82%af/rss" template="hatena-photo" moduletitle="Yuny's ?-Haiku!">
</div>
<div class="main">