はてなの小見出し、小々見出しにCSS3の角丸、影を適用

概要

はてな小見出し（**）、小々見出し（***）にCSS3を適用したので
内容を説明します。

手順

• 管理リンクを押下
• デザインを選択
• スタイルシート欄に下記のCSSを適用

CSS内容

h4 {
	/* 文字サイズを16pxに */
	font-size:16px;
	/* 文字の太さを通常に */
	font-weight:normal;
	/* 文字色を黄色に */
	color:yellow;
	/* 背景色をグレーに */
	background-color:gray;
	
	/* 角丸15pxに設定。ブラウザごとに設定が必要 */
	/* firefox */
	-moz-border-radius:15px;
	/* webkit(chrome,safari) */
	-webkit-border-radius:15px;
	/* W3C */
	border-radius:15px;

	/* 影設定。ブラウザごとに設定が必要 */
	/* firefox */
	-webkit-box-shadow: 6px 6px 3px #333;
	/* webkit(chrome,safari) */
	-moz-box-shadow: 0px 0px 6px #333;
	/* W3C */
	box-shadow: 0px 0px 6px #333;
	/* textに影設定 */
	text-shadow: 4px 4px 4px #335;
}

h5 {
	/* 文字サイズを14pxに */
	font-size:14px;
	/* 左に余白を20px設定 */
	margin-left:20px;
	/* 文字の太さを通常に */
	font-weight:normal;
	/* 文字色を黄色に */
	color:yellow;
	/* 背景色をグレーに */	
	background-color:gray;
	
	/* 角丸15pxに設定。ブラウザごとに設定が必要 */
	/* firefox */
	-moz-border-radius:15px;
	/* webkit(chrome,safari) */
	-webkit-border-radius:15px;
	/* W3C */
	border-radius:15px;
	
	/* 影設定。ブラウザごとに設定が必要 */
	/* firefox */
	-webkit-box-shadow: 6px 6px 3px #333;
	/* webkit(chrome,safari) */
	-moz-box-shadow: 0px 0px 6px #333;
	/* W3C */
	box-shadow: 0px 0px 6px #333;
	/* textに影設定 */
	text-shadow: 4px 4px 4px #335;
}