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

WordPress

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}