文章表現

WordPressで強調したいテキストに傍点を振る方法を解説

2021-10-17

WordPressで小説を書く時に、強調したい文字に傍点を振る方法で悩んでいませんか?

ブログで小説をアップする時にも強調したい文字があるケースも出てくると思いますが、そんな時にはCSSの機能を使うことで傍点(圏点)を表示することが可能です。

そこで、この記事ではCSSで文字に傍点を振る方法を説明します。

WordPressで小説をアップする時には参考にしてみてください。

傍点の振り方

それでは、WordPressで文字に傍点を振る方法について説明します。

傍点を振るには、CSSの「text-emphasisプロパティ」を使います。

「text-emphasisプロパティ」は、文字の強調をするために上下に点を付加するプロパティです。「text-emphasisプロパティ」を使うと、文字の上や下に黒丸や白抜きの点、丸などを表示することができます。

使用例文字に傍点を付ける

文字に傍点を付ける

CSSの記述方法

小説などで強調したい文字を指定するには小さな黒い点を付けることが多いですが、文字の上に黒い点を表示するにはCSSに以下のように記述します。

 CSS
/* 傍点のスタイル */
.bouten {
-webkit-text-emphasis: filled dot;
text-emphasis: filled dot;
}

「.bouten」の部分はクラス名なので別のものに変えても問題ありません。

注意

text-emphasisプロパティはブラウザによって正しく適用されない場合があるため、ベンダープレフィックス:-webkit-を付けたものも記述しています。

※ただしIEには非対応です。

WordPressでCSSを編集するにはWordPressでCSSを追記するには、管理画面から「外観→カスタマイズ→追加CSS」もしくは「外観→テーマエディタースタイルシート(sytle.css)」を編集します。

※style.cssを編集する場合は、子テーマを使用することをおすすめします。

htmlで傍点を付ける文字を指定する

CSSでスタイルを指定したら、次にhtmlで傍点を振るテキストを指定してします。

htmlを編集するには、投稿画面のエディターをテキストモードで表示して以下のように記述します。

<span class="bouten">傍点を振るテキスト</span>

つまり、たとえば以下のように記述すると「東京駅」という文字に傍点を振ることができます。

<p>彼女はあの時、<span class="bouten">東京駅</span>で新幹線を降りたと言っていた。</p>

ブラウザ上の表示彼女はあの時、東京駅で新幹線を降りたと言っていた。

まとめ

POINT!

  • WordPressで傍点を振るには「text-emphasisプロパティ」を使う
  • CSSを編集するには追加CSSやstyle.cssを使う
  • テキストの上に小さな黒丸を表示するには「text-emphasis: full dot;」と記述
  • htmlで傍点を付けるテキストの範囲を指定する

以上、WordPressで指定したテキストに傍点を振る方法について説明しました。

WordPressで傍点を付けるには、CSSとhtmlを編集します。CSSに追記し、投稿のエディターをテキストモードで表示してhtmlでテキストの範囲を指定すれば傍点を振ることが可能です。

テキストを強調したい時には使ってみてください。

  • この記事を書いた人

紫門 依里(さいもんえり)

40代のブロガー・オンラン作家。ブログでの情報発信を中心に、オリジナル小説の執筆・発信、電子書籍の出版など幅広く活動中。

おすすめ記事

1

空はいつもどこにでも同じように存在し、ふと見上げればそこにある身近な存在です。 小説などの作品で表現をする機会も多く、描写に使う言葉を探すことも多いのではないでしょうか。 そこで、この記事では空や青空 ...

2

春の描写に使う言葉や表現の仕方で迷っていませんか? 春は人との出会いや別れなど印象的な出来事が多い時期です。小説でも季節感の描写をする機会も出てくると思いますが、物語を効果的に進めるためにどんな表現を ...

3

Macで小説を書くエディタに何を使うか迷っていませんか? 小説を書くには使いやすいエディタが必要ですね。 有料で高機能なエディタはたくさん出ていますが、機能がたくさんついていなくてもいいので執筆がはか ...

4

桜の描写や表現で悩んでいませんか? 一言で桜といっても、散りゆく姿や咲き乱れる姿などさまざまな光景があり、決まった言葉で美しさを表現するのは難しいですよね。 そこで、この記事では桜にまつわる表現や描写 ...

5

小説の執筆をする時、もっと語彙力をアップしたいと悩むことがありませんか? 語彙力は、台詞や地の文を通じて情景や感情などさまざまな描写や表現をするための下地となる部分なので、できるだけ高めておきたいです ...

-文章表現