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でテキストの範囲を指定すれば傍点を振ることが可能です。
テキストを強調したい時には使ってみてください。
