角丸-white

このデザインについて

ichbin サンプル
カテゴリー:シンプルベーステーマ:hatenaヘッダー:白(細)
登録日:2010/09/24更新日:2010/10/26利用数:147
・更新内容が表示される部分の縦の長さを短く制限しています。ご不便なときは、下記スタイルシートの冒頭の「更新内容が表示される部分の縦の長さ」の値を指示に従って書き換えて下さい。ただしInternet Explorerでこれを行うと、角丸のデザインが一部崩れることがあります。

・初期状態では横3列構成ですが、4列以上にしたいときは下記スタイルシートの冒頭部分を指示に従って書き換えて下さい。

・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; など*/
		}

/*** [横に4列以上並べたいとき (ブラウザがInternet Explorerのとき)] ***/
/* 横に4列以上並べたいときは、下記の値を増やしてください */
	*html #hatena-antenna-normal ol, *html #hatena-antenna-simple ol, *html #hatena-antenna-image ol{
	width:790px;	/*← ここの値を"1100px"ぐらいにすると4列になります。値を"auto"にすると横幅いっぱいに並びます。*/
	}


/*** [横に4列以上並べたいとき (ブラウザがInternet Explorer以外のとき)] ***/
/* 横に4列以上並べたいときは、下記の値を増やしてください */
	#hatena-antenna-normal ol, #hatena-antenna-simple ol, #hatena-antenna-image ol{
	width:760px;	/*← ここの値を"1000px"ぐらいにすると4列になります。値を"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:#fff;
	border:solid 1px #ccc;
	}

/*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(p.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:10px;
		}

	/*シンプルモードの各ページ名を縦方向にセンタリング*/
	#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/20100924/20100924124335.png);
	}
	
	/*画像モードの*/
	*html #hatena-antenna-image ol.image li{
		background-image:url(http://img.f.hatena.ne.jp/images/fotolife/i/ichbin/20100924/20100924124335.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/20100924/20100924124334.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:243px;
		padding-top:10px;
		}