cite要素にスタイル設定

前回のエントリーでblockquote内にプレーンテキストを入れたらフォントが大きく表示されたのは、CSSのblockquote要素の部分にフォントサイズの指定がなかったせいだと気づきました。多分CSSもp要素を入れ子にすることを前提に書かれていたから特に指定がなかったのでしょう。引用文についてはそのつどpではさむことで解決しました。

問題は、引用元へのリンク（cite要素）の部分。こちらにもスタイル指定がなかったため、文字が大きく表示されてしまっているようです。こちらもp要素を入れ子にしてもいいのですが、いちいちpを入れるのも面倒です。

ということでスタイルシートに書き加えることに。

使用しているのはMAQUE TEMPLATEのCosmoというスキン。ダウンロードしたstyle-cosmoのフォルダからdefault.cssを開いて編集します。

Text Moduleのcite要素の部分を変更。

cite {
　　　　color: #778899;
　　　　font-style: normal;
　　　}

色はそのままでいいとして、以下のスタイルを加えてみます。

• フォントサイズを小さく
• フォントスタイルをイタリックに⇒引用部分というのはイタリック体にするのがスタンダードらしい
• 字下げを入れる⇒他の文章とは区別がつきやすいように

cite {　　　
　　　　font-size: 80%;
　　　　color: #778899;
　　　　padding: 1px 16px;
　　　}

cite要素は特にfont-style: italic;と書かなくても斜体になるようなので省略。パディングはblockquoteとそろえてまとまりを強調してみました。以上、上書き保存してアップロード。

本当は右寄せにしたくて、text-align: right; を入れてみたのですが、なぜか適用されない。なんでなんだろう。次回text-alignについて詳しく調べてみようと思います。

正しいかどうかはよくわかりませんが、これで一応引用部分の見た目はきれいになりました。