HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

blockquote 引用ボックス 角丸

引用の飾り

引用本文

引用元


[SBR] HTML
<div class="inyoubox">
<blockquote>引用本文</blockquote>
<p class="origin"><a href="http://dummy" target="_blank">引用元</a></p>
</div>

[SBR] CSS
/*----------------------------------------------------------- */
/* 引用ボックス */
/*----------------------------------------------------------- */
.inyoubox{
background: #e0e0e0;
	border-radius:5px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
.inyoubox blockquote {
	padding: 10px 10px 5px 10px;
	color: #212121 ;
}
.inyoubox p{
	margin-bottom: 12px;
	font-size:10px;
	border-radius:0px 0px 5px 5px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
.inyoubox p.origin {
	background: #9f9f9f;
	text-align: right;
	padding: 5px 10px;
	margin-bottom: 0px;
}
.inyoubox p.origin a {
	padding-left: 15px;
	color: #666;
}

[SBR]

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー