作品名を表す cite 要素の使い方と、前後が『』で囲まれるようにする方法

photo credit: » Zitona « via photopin cc
photo credit: » Zitona « via photopin cc

前回の記事で書籍の紹介をする際に、HTML で作品名を表す cite 要素を初めて使ってみました。その際、作品名の前後に『』が自動的に付くように CSS の設定もしたので、簡単にメモしておきます。

目次

  1. cite 要素
  2. 使い方
  3. 『』で囲まれるように CSS で設定
  4. 斜体で表示されないようにする

cite 要素

cite 要素は書籍、映画、ゲームなど、作品のタイトルを示すために使われます。これまでは作者名や引用元を示すためにも使われていたのが、HTML5 からは使用できる範囲が狭くなり、作品名だけにしか使えなくなったということです。

参考記事:

使い方

HTML で、作品のタイトル部分を <cite></cite> で囲みます。

<cite>走れメロス</cite>

『』で囲まれるように CSS で設定

せっかくなので、自分で『』を入力しなくても済むように CSS で設定しました。WordPress の style.css に以下のコードを追記します。

cite:before {
    content: '『';
}

cite:after {
    content: '』';
}

コードは cite 要素の前に「『」を、後に「』」を挿入するという意味です。なので『走れメロス』といった具合に表示されるようになります(RSS 配信された記事のように、CSS が効かない環境では『』は表示されません)。

ただし、WordPress の Twenty Twelve を使っている人は要注意!どういうわけかコメント欄で、コメントを下さった方のお名前が cite 要素として自動的に出力されているので(人名にも使えた HTML5 以前のなごりでしょうか)、上のコードだとお名前が『』で囲まれてしまうという影響が出ます。そこで、記事の中でだけ適用されるように、先ほどのコードを少し書き換えました。

.entry-content cite:before {
    content: '『';
}

.entry-content cite:after {
    content: '』';
}

こうすると、entry-content というクラスが充てられている要素(Twenty Twelve では記事の本文の部分)の中にある cite 要素だけに適用されるようになります。

斜体で表示されないようにする

cite 要素は通常、斜体で表示されるようなのですが、個人的に斜体はあんまり好きじゃありません。なので普通に表示させるためのコードも追加しました。

.entry-content cite, .entry-content cite:before, .entry-content cite:after {
    font-style: normal;
}

これで <cite> タグで囲んだ作品名とその前後にある『』がすべて通常のスタイルで表示されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です