 ichbin
 サンプル
|
|||
| カテゴリー：クール | ベーステーマ：hatena | ヘッダー：■ライトブルー(細) | |
| 登録日：2010/09/24 | 更新日：2010/10/08 | 利用数：187 | |
|
・更新内容が表示される部分の縦の長さを短く制限しています。ご不便なときは、下記スタイルシートの冒頭の「更新内容が表示される部分の縦の長さ」の値を指示に従って書き換えて下さい。ただし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:240px; /*← ここの値を増やす。 例： height:280px; など*/
}
/*** [更新内容が表示される部分の縦の長さ (ブラウザがInternet Explorer以外のとき)] ***/
/* 更新内容をより多く表示したいときは、下記の2ヶ所の値を増やしてください */
p.diff{
height:120px; /*← ここの値を増やす。 例： 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:770px; /*← ここの値を"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:5px;
}
/*各ページのタイトルについての指定。 ブラウザによっては効かない。*/
.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:#b5e772/* #beea84 #94e061*/;
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;
}
/*シンプルモードの各ページ名を縦方向にセンタリング*/
#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: 240px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow:hidden;
clear:none;
background-color:#b5e772;
}
/*画像モードのliタグの縦の長さ*/
*html #hatena-antenna-image ol.image li{
height:240px;
}
/*ノーマルモードと画像モードのliタグの背景画像*/
*html #hatena-antenna-normal ol li, *html #hatena-antenna-image ol.image li{
background:url(http://img.f.hatena.ne.jp/images/fotolife/i/ichbin/20100924/20100924124930.png) no-repeat;
}
/*シンプルモードのliタグの縦の長さ*/
*html #hatena-antenna-simple ol li{
height:92px;
}
/*シンプルモードのliタグの背景画像とマージン*/
*html #hatena-antenna-simple ol li{
background:url(http://img.f.hatena.ne.jp/images/fotolife/i/ichbin/20100924/20100924124931.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:240px;
}