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


この記事はプロモーションを含みます。

WordPress

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

はじめに

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

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

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

<pre>タグを使用する

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

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

使用例:--

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

  • 使用するテーマによっては、見た目が変わってしまう
  • テーブルブロックなど、別のブロックと組み合わせて使用出来ない

<code>タグを使用する

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

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

使用例:--

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

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

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

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました