閉じる
閉じる

あまめも

HTMLで「引用符を自分好みに設定したい」って時は

HTML

こんにちは! あますた(@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>

実際の表示

てすと入れ子てすと

関連記事

  1. ファイルの管理がめんどくさくなってきたから「Git」使ってみた!…

  2. GitのリモートリポジトリをSSH接続で独自サーバに作成してみた…

  3. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  4. テーブルの背景を簡単に奇数or偶数行で色を変えて見易くしたい!

  5. [甘]コンタクトフォームを「Contact Form 7」プラグ…

  6. Markdownを使用して簡単にgutenbergの再利用ブロッ…

こんなメモもありますよ♪

  1. Purple Reign
  2. take074-thumbnail

Twitter

ページ上部へ戻る