こんにちは！ あますた(@amaguristar)です。

簡単な文の引用をした時に「自動で引用符を付けたい」って時ありませんか？

cssで簡単に設定可能です。

　

quotesプロパティを設定する

短い文を使用する際に使うのは<q>タグ。通常は「””」などを使用して分かる様に設定します。

例） ”ここの文章に引用文を記載”

とは言え、「いちいち手動で設定するのも面倒」ですよね？

WordPressの場合はデフォルトで何かしらのマークが設定される様になってるテーマも存在。でも、「自分の好きな様にカスタムしたい」って時もあるかと思います。

そんな時はquotesプロパティを設定。

具体的には

q {
    quotes: "\"" "\"";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

たったこれだけ。quotesの中で「\"」としてるのはcssの設定様の「”」と区別するためです。

今回は分かり辛いので下記cssを適用させます。

q {
    quotes: "〘" "〙";
}

q::before { content: open-quote; }
q::after { content: close-quote; }

実際に使うと、

HTML

<q>てすとてすとてすと</q>

表示

てすとてすとてすと

と表示されます。

まとめ

引用符を指定する時はquotesプロパティを下記の様に使用。

q {
    quotes: "〘" "〙";
}

q::before { content: open-quote; }
q::after { content: close-quote; }

quotesプロパティに

q {
    quotes: "〘" "〙" "«" "»";
}

と、連続でペアを指定すると引用符内でさらに引用すると入れ子の設定も可能です。

例) HTML

<q>てすと<q>入れ子</q>てすと</q>

実際の表示

てすと入れ子てすと