 ichbin
 サンプル
|
|||
| カテゴリー：シンプル | ベーステーマ：hatena | ヘッダー：■ライトグレー(細) | |
| 登録日：2010/10/03 | 更新日：2010/10/03 | 利用数：160 | |
|
・更新内容が表示される部分の縦の長さを短く制限しています。ご不便なときは、下記スタイルシートの冒頭の「更新内容が表示される部分の縦の長さ」の値を指示に従って書き換えて下さい。ただしInternet Explorerでこれを行うと、角丸のデザインが一部崩れることがあります。 ・初期状態では横３列構成ですが、４列以上にしたいときは下記スタイルシートの冒頭部分を指示に従って書き換えて下さい。 ・Internet Explorer 8とFireFox3.6で表示の確認をしています。Internet Explorerは8より前のバージョンでは意図どおりの表示にならないような気がします。 |
|||
<h1><hatena name="title"></h1> <div class="setumei"> <!--アンテナのサブタイトルや説明文は、ここに書くことができる。--> </div>
/********** [更新内容が表示される部分の縦の長さ (ブラウザがInternet Explorerのとき)] **********/
/******* 更新内容をより多く表示したいときは、下記の2ヶ所の値を増やしてください *******/
*html p.diff{
height:140px; /*← ここの値を増やす。 例： height:180px; など*/
}
*html #hatena-antenna-normal ol li{
height:243px; /*← ここの値を増やす。 例： height:280px; など*/
}
/********** [更新内容が表示される部分の縦の長さ (ブラウザがInternet Explorer以外のとき)] **********/
/******* 更新内容をより多く表示したいときは、下記の2ヶ所の値を増やしてください *******/
p.diff{
height:130px; /*← ここの値を増やす。 例： height:180px; など*/
}
#hatena-antenna-normal ol[start$="1"] li{
height:220px; /*← ここの値を増やす。 例： height:280px; など*/
}
/********** [横に４列以上並べたいとき (ブラウザがInternet Explorerのとき)] **********/
/******* 横に４列以上並べたいときは、下記の値を増やしてください *******/
*html #hatena-antenna-normal ol, *html #hatena-antenna-simple ol, *html #hatena-antenna-image ol{
width:790px; /*← ここの値を"1100px"ぐらいにすると４列になります。値を"auto"にすると横幅いっぱいに並びます。*/
}
/********** [横に４列以上並べたいとき (ブラウザがInternet Explorer以外のとき)] **********/
/******* 横に４列以上並べたいときは、下記の値を増やしてください *******/
#hatena-antenna-normal ol, #hatena-antenna-simple ol, #hatena-antenna-image ol{
width:760px; /*← ここの値を"1000px"ぐらいにすると４列になります。値を"auto"にすると横幅いっぱいに並びます。*/
}
/********** [全体の設定 ] **********/
body{
text-align:center; /*要素を中央揃えにする。（IE用）*/
font-family:Tahoma, "MS UI Gothic";
color:#112211;
}
/*リンク文字の色*/
body a:link, body a:hover{
color:#2086db/* #2187dc #17d*/;
}
/*訪問済みリンク文字の色*/
body a:visited{
color:#8989ab;
}
/*テキストを左寄せ*/
#simple-header, h1, div.setumei, ol, p{
text-align:left;
}
/*ヘッダ*/
#simple-header{
background-color:#358adf;
}
/*olタグ以外の要素の横幅とマージン*/
h1, div.setumei, p#pager_relate, p#pager_group{
width:740px;
margin-left:auto;
margin-right:auto;
}
/*アンテナの説明文やサブタイトルを書く部分。h1タグの直下。*/
div.setumei{/*
margin-left:5%;
margin-right:5%;*/
font-size:14px;
}
/*広告文
p#pager_relate+ol li{
}
*/
/*olタグ*/
#hatena-antenna-normal ol, #hatena-antenna-simple ol, #hatena-antenna-image ol{
list-style-type:none;
/*width:760px;*/
margin-left:auto;
margin-right:auto;
padding-left:15px;
}
/*ノーマルモードで更新内容が表示される部分*/
p.diff{
padding:5px 10px 10px 10px;
margin-bottom:10px;
background-color:transparent;
overflow:hidden;
font-size:12px;
}
/*更新日時*/
.modified{
display:block;
margin-bottom:10px;
}
/*各ページのタイトルについての指定。 ブラウザによっては効かない。*/
.modified+a{
display:block;
}
/*liタグの中のテキスト*/
li span, li a, #hatena-antenna-image ol.image li .modified{
font-size:14px;
}
/*各liタグの回り込みを有効にするための設定*/
p.diff:after{
clear:none;
}
/*Copyrightの表示*/
.footer{
padding:10px;
clear:both;
}
/******* Internet Explorer以外のブラウザに適用する設定 *******/
/*liタグ（広告文を除く）*/
#hatena-antenna-normal ol[start$="1"] li, #hatena-antenna-simple ol[start$="1"] li, #hatena-antenna-image ol[start$="1"] li{
margin: 5px;
padding: 10px;
float: left;
display: block;
width: 220px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow:hidden;
clear:none;
background-color:#fff;
background-image:url(http://img.f.hatena.ne.jp/images/fotolife/i/ichbin/20101003/20101003151220.png);
background-repeat:no-repeat;
background-position:top;
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-right:solid 1px #999;
border-bottom:solid 2px #bbb;
border-radius: 15px; /* CSS3 */
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /*Chromeなど*/
}
/*シンプルモードの各ページの縦の長さ*/
#hatena-antenna-simple ol[start$="1"] li{
height:70px;
}
/*画像モードの各ページの縦の長さ*/
#hatena-antenna-image ol[start$="1"] li{
height:220px;
padding-top:45px;
}
/*シンプルモードの各ページ名を縦方向にセンタリング*/
#hatena-antenna-simple ol[start$="1"] li .modified+a{
display:inline;
vertical-align:middle;
}
/*画像モードのスクリーンショット画像の大きさ*/
#hatena-antenna-image ol li a.screenshot img{
width:150px;
height:150px;
}
/******* Internet Explorerのみに適用する設定 *******/
/*olタグ*/
*html #hatena-antenna-normal ol, *html #hatena-antenna-simple ol, *html #hatena-antenna-image ol{
/*width:770px;*/
margin-left:0;
}
/*liタグ*/
*html #hatena-antenna-normal ol li, *html #hatena-antenna-simple ol li, *html #hatena-antenna-image ol.image li{
margin: 5px;
padding: 10px;
float: left;
display: block;
width: 242px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow:hidden;
clear:none;
background-color:#fff;
background-repeat:no-repeat;
background-position:top;
}
/*ノーマルモードのliタグの背景画像*/
*html #hatena-antenna-normal ol li{
background-image:url(http://img.f.hatena.ne.jp/images/fotolife/i/ichbin/20101003/20101003151222.png);
}
/*画像モードのliタグの背景画像*/
*html #hatena-antenna-image ol.image li{
background-image:url(http://img.f.hatena.ne.jp/images/fotolife/i/ichbin/20101003/20101003151223.png);
}
/*シンプルモードのliタグの縦の長さ*/
*html #hatena-antenna-simple ol li{
height:94px;
}
/*シンプルモードのliタグの背景画像とマージン*/
*html #hatena-antenna-simple ol li{
background:url(http://img.f.hatena.ne.jp/images/fotolife/i/ichbin/20101003/20101003151221.png) no-repeat;
margin:4px;
}
/*
シンプルモードの各ページ名を縦方向にセンタリング
*html #hatena-antenna-simple ol li a{
display:block;
vertical-align:middle;
}
*/
/*画像モードのliタグの縦の長さ*/
*html #hatena-antenna-image ol.image li{
height:278px;
padding-top:45px;
}