引用タグ”blockquote”とCSSを組み合わせてciteを表示させるようにするタグ。

ブログを書いていると、文章の引用として引用範囲を表すblockquoteタグをよく使います。

こんな感じで。

三重県の無料写真素材サイトのまとめ。写真に関するメモありです。

宣伝や販売促進への資料における使用、編集、加工してのご利用も可能です。ただし、
以下の写真については、別途、使用許可申請・校正確認を行ってください。

写真：伊勢神宮内宮（朝日）、伊勢神宮内宮（冬至の宇治橋）、伊勢神宮内宮、伊雑宮
申請・確認先：神宮司廰（広報室・広報課）　電話：0596-24-1111

引用する際は、引用元を明らかにするのが常識ですが、毎回blockquoteタグを使う時に引用元：○○、URLと最後に追加するのが手間ですよね。

でも引用元はしっかりと明記しなければならない。

そんな時に、CSSのafter属性を使うことで一手間省くことが出来ます。

blockquoteの属性であるciteとtitleをCSSで表示するタグ

blockquoteには属性として引用先のサイトアドレスであるciteとサイトアドレスであるtitleがあります。

先ほどの観光三重フォトギャラリーの場合は

内容を記述

という形式で記述していました。しかしこれを記述するだけでは、ソースからの確認は出来ますが表示はされません。

そこでCSSのafter属性を使います。

CSSのafterでcontentから呼びだそう！

after属性は指定した要素の終わりタグ前に追加することが出来る属性です。

引用時は最後に引用元内容を書くのが一般的。そこでafter属性にcontentを指定することでciteとtitleを呼び出す。

以下は一例です。

blockquote:after {
content: “引用元”attr(title) “\a” attr(cite);
　　 white-space: pre;
}

contentにまずは引用元と追加して、その後にtitleとciteを表示。

引用内容を入れます。

そうすることでblockquoteに属性を含ませておけばいちいち下に…と書かずに下部に表示することが出来ます。

ちなみにwhite-space: pre;を入れることで”\a”によって改行をすることができます。

CSSでblockqouteをデザインするコードまとめ

引用時にわかりやすくて、かつよく入れられている”のマーク。

これもCSSのbeforeを使えば、全ての引用タグに入れることが出来ます。

こちらについては下記のサイトがコードも公表しているので、参考にしてみるのがオススメです。
一度before,afterを知っておくと、他にも応用が効くのでなかなか便利です。

最新投稿された記事はいかがですか？

1987年2月生まれ、滋賀県湖南市育ち、現在湖南市の三雲駅から徒歩20分超の場所でコワーキングスペース「今プラス」の管理人をしております。
→続きを読む

カテゴリー