いなた屋.Log

引用スタイルのテスト

いいかげんにやってたので、そろそろちゃんとしよう。以下のサイトを参考にして、HTML と CSS を考えた。

• Creazy! - 第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法
• 調べてもなかなか出てこない引用符アイコンを量産したので配布してみます | Love&pointcard

HTML は次の書式で統一する。

<blockquote cite="引用元URL" title="引用元タイトル">
<p>引用する文章</p>
</blockquote>
<p><cite>Source: <a href="引用元URL" target="_blank">引用元タイトル</a></cite></p>

CSS はこんな感じ。

#content blockquote {
background:url(/images/qopen.png),url(/images/qclose.png); /*背景画像の指定*/
background-repeat:no-repeat,no-repeat;  /*繰り返しの解除*/
background-position:top left,bottom right; /位置（左上、右下）*/;
margin: 0 20px;
}

#content blockquote p {
display: block;
margin: 0;
padding: 10px 30px;
}

#content cite {
display: block;
text-align: right;
margin: 0 20px;
}

引用符の画像は適当に作りました。

表示サンプル

実際に試してみる。引用したのは Wikisource から 「ネクロノミコンの歴史（H・P・ラヴクラフト）」の冒頭。

原題『アル・アジフ』……アジフとはアラブ人の間で用いられる単語で、夜間に聞こえる音（昆虫の鳴き声）を意味する。アラブ人はこの音を悪魔の咆哮であると考えていた。

Source: ネクロノミコンの歴史 - Wikisource

まあまあいい感じだ。引用した日時も入れたいけど、表示がうるさくなるね。いい方法がないかな。