【WordPress】ハイフンを連続で表示させる方法

WordPressの記事内で、連続するハイフンが１つになる問題の回避方法を解説します。

はじめに

WordPressの記事で、ハイフンを連続で記述する「--」と、プレビュー画面では、１つ「–」になってしまうバグがあるようです。

回避方法としては、HTMLを修正したり、CSSを修正したりと様々な方法があります。
ここでは、各々の方法を説明していきたいと思います。

また、回避方法の１つとして、ハイフンを「-」に置き換える方法がありますが、私の環境では使えなかったので、説明に含めていません。

<pre>タグを使用する方法になります。

下記のように、<pre>タグ（整形済みテキスト）を使用することで、ハイフンを連続で表示させることが可能です。

使用例：--

この<pre>タグを使用する方法ですが、下記のようなデメリットがあります。

<code>タグを使用する方法になります。

以下のように、ハイフンを<code>タグで囲むことによって、連続で表示させることが可能です。

使用例：--

下記は、HTML編集モードで表示されるソースコードになります。

<p>使用例：<code>--</code></p>

この<code>タグを使用する方法ですが、１つデメリットがあり、フォントが変わってしまいます。

<code>タグを使用すると、フォントが「Courier」に変更される。

フォントが変更されても、ハイフンだとそんなに目立ちませんが、気になる人は下記の方法で回避出来ます。

「カスタムCSS」に下記のコードを追加して下さい。
カスタムCSSにて、<code>タグで使用するフォントを周りのフォントに合わせています。

code {
  font-family: "フォント名";
}

当ブログでは、「游ゴシック」を使用しているので、以下のように記述しています。

code {
  font-family: "游ゴシック";
}

記事は以上です。簡単に回避出来ますが、知らなければハマるポイントですね。
本記事が参考になれば幸いです。

リンク