Vicunaのblockquoteは"title"と"cite"のCSS表示に対応してた

WordPress

またタイトルで大体の内容を言い切ってしまったんだけれども。このブログで使用しているWordPress対応テーマ「wp.Vicuna」のCSSを眺めてたら、引用に使うHTMLタグ「blockquote」の属性セレクタとして"title"と"cite"が用意されていることに気がついた。

具体的にどういう事かというと、まず下記のようなHTMLを書く。

<blockquote title="Hinemosu" cite="https://www.hide10.com/">
ここに引用文をダラダラと書く
</blockquote>

すると実際の表示はこんな感じになる。カッコえー。

ここに引用文をダラダラと書く

CSS2を使って表示させているので、対応したブラウザで見に来ないとダメだよ。CSS2に対応していないIE6以前のブラウザだと、引用文しか表示されないと思う。参考までにVicunaのblockquote属性セレクタもコピペしておくわ。

blockquote[title]:before {
	margin-bottom: 0.3em;
	display: block;
	content: "引用: "attr(title);
	color: #000;
}

blockquote[cite]:after {
	padding: 0.2em 20px;
	display: block;
	content: "引用元: "attr(cite);
	color: #333;
	text-align: right;
}