ワードプレスのフォントが太字表示にならないときの解決方法について

ワードプレスでフォントが太字にならないという現象が起こりました(今は改善済み）。

編集画面では太字になるんですが、投稿画面を表示させると指定した箇所が太字表示になっていないという状態です。

ワードプレスの編集画面では「TinyMCE Advanced」を使用して記事を書いていますが、エディターの「Ｂ」で強調したい文字を選んでも太字表示にならず・・・。

ビジュアルモードからテキストモードに切り替えて、文字を「<strong></strong>」や「<bold></bold>」でサンドイッチしても効果なし。

しばらくインターネット上で解決策を探しましたが見つからず。原因は全く不明。

途方に暮れていると、

「インストールしているプラグインがコンフリクトを起こしている可能性がある」

という情報があったので、

「Google Fonts Typography」や「TinyMCE Advanced」をアンインストール＆削除を試みましたが効果なし。

全く解決策が見つからず諦めかけていたその時、

CSSで「!important」のコードを使用するとその指示の優先度が高くなる

という情報が。

その情報を元にcssをいろいろゴニョゴニョといじっていたところ、なんと太字が復活！

それはもう野人岡野がゴールを決めたときくらいの歓喜でしたよ。

根本的な解決方法でないかもしれませんが、とりあえず暫定的に太字表示することができたので、その方法お伝えしたいと思います。

この記事を読んでほしい人

ワードプレスのフォントが太字にならない

フォントを太字表示にする方法

結論から言うと、以下のコードを挿入したところ太字表示になりました。

b,
strong,
.strong {
font-weight: bold!important;
}

挿入した箇所は「スタイルシート（style.css）」ではなく、ダッシュボードの「外観」→「カスタマイズ」から入る「追加css」のページ。いわゆる「cssエディター」ってやつですね。

もともとスタイルシートには、以下のようなコードが入っていました。

b,
strong,
.strong {
font-weight:normal;
}

はじめはこの「normal」が原因であると思い、「normal」の部分を「bold」や「strong」に変更してみましたが、うんともすんとも言わなかったんですね。

「normal」を「bold!important」に変えてもダメでした。ところがスタイルシートではなく「cssエディター」にコードを入力したところ、太字が表示されたのです。

プラグインを削除しても効果なし

上記の方法を試す前は、他のプラグイン（Google Fonts TypographyやTinyMCE Advanced）とコンフリクトを起こしているのかな？

と思いプラグインの削除を行い再度インストールを試みましたが、まったく改善されませんでした。

むしろこれまでに設定したプラグインの細かなフォント設定や新規作成ページのエディター設定がリセットされてしまったので、それらを始めから再設定することに手間を取られました。

この方法の注意点について

あくまでも「太字：bold」に変えるように指示しているコードであって、「strong」へ変更する指示じゃないんですよね。

ただ表示されている文字が太くなるだけで、記事内の言葉の重要性を示す「strong」ではありません。

よく言われるのが「strong」は強調コードなのでSEO対策として重要だが、boldは見た目が太字に変わるだけなのでseo対策としては効果がないということです。

このコードが「strong」を打ち消してしまってないか、ということがちょっと心配です・・・。

真偽の程は断定できないものの、やはりこの方法だと何かスッキリとしませんので、根本的な解決方法を見つけ次第またアップします。

おそらくスタイルシートに何か原因があるのではないかと思いますが。

さいごに

ワードプレスでフォントが太字にならず困っている方は是非参考にして下さい♪

iPhone充電時のバイブレーションと効果音をオフにする方法について

2019.08.12

当サイトの理念について

関わったすべての人に「感動！」をもたらすべく日々奮闘中！

特にこれといった才能はないけれど、営業経験やコールセンターのスーパーバイザー経験から得た「ビジネススキル」や「電話対応」のノウハウを心を込めて書いてます。

自然が大好きで、暇さえあればキャンプやアウトドアに勤しむ自然人。メッセージはこちらから。

トップページへ戻る