Suffusion の blockquote をカスタマイズ。

　Suffusion 標準の CSS のままだと、引用するときのスタイルが好みではないので、子テーマである「Suffu-scion」を適用したことだし CSS を弄って blockquote タグを適用したときの見た目を弄ってみた。

　まず blockquote で代表的な CSS を模索すべく Google 先生に伺ったら幾つかサンプルが公開されていた。
　その中でも「これいいな!」って思う物を使わせて頂いた。
⇒ 引用タグ（blockquote）をCSSのみで装飾する | 賢威カスタマイズ研究所

　公開されていた CSS を自分のブログに合うよう、若干手を入れつつ四苦八苦してやっと出来た。

引用文をここに引用文をここに引用文をここに引用文をここに引用文をここに引用文をここに引用文をここに引用文をここに引用文をここに引用文をここに。折り返しの為、長めにコピペ。
引用元サイトをここに

　CSS は弄った結果こうなった

blockquote {
	background: url();
	background-color: #fafafa;
	padding: 1.5em 1em 0.5em;
	position: relative;
	border: 3px solid #d7d7d7;
	margin: 0 1em 1.5em;
	box-shadow: 1px 2px 4px rgba(50,50,50,.5);
	-webkit-box-shadow: 1px 2px 4px rgba(50,50,50,.5);
	-moz-box-shadow: 1px 2px 4px rgba(50,50,50,.5);
}
blockquote:before {
	text-indent: 0;
	content: "“";
	font-size: 400%;
	line-height: 1em;
	font-family: "ＭＳ Ｐゴシック",sans-serif;
	color: #999;
	position: absolute;
	left: 0;
	top: 0;
}
 
blockquote:after {
	text-indent: 0;
	content: "”";
	font-size: 400%;
	line-height: 0em;
	font-family: "ＭＳ Ｐゴシック",sans-serif;
	color: #999;
	position: absolute;
	right: 0;
	bottom: 0;
}
blockquote cite {
	font-size: 0.9em;
	padding: 0em 1em 0em;
		float: right;
}
blockquote p {
	text-indent: 0em;
}

　Suffusion 自体で定義されている物を上書きしていく要領でやってみた。結構ごちゃごちゃとカスタマイズされていたから、なにがどこでどうなっているのか良く分からないもんだから時間が掛かった。
　「blockquote」のみの箇所では「background: url();」とやらないと画像を読み込んでしまった。適当に中身を空欄にしたら消せたから結果オーライとして原理も調べず採用した。
　引用元の記述につかう CITE タグは「“」と被らないように padding で調整。
　「blockquote p」をでインデント弄っておかないと、複数行にまたがったときに最初の一行だけ行頭が右側に随分といってしまっていた。