WordPressのブロックエディターで「B（太字）」ボタンを使っても、なぜかプレビューでも本番でも、記事内で太字が効かない――。
さっきまでちゃんと太字だったのに急に反映されなくなった！
私自身が体験したこの問題と、解決方法をまとめておきます。
強調に使っていた太字が…消えた？
普段の執筆で、文章の重要な部分に太字を使っていた私にとっては結構ショックでした。
WordPressのブロックエディターで太字指定（Bボタン）をすると、HTML的には以下のように出力されます。
<strong>この部分が太字になるはず</strong>本来であれば、<strong> タグが自動的に太字として表示されるはずですがなぜか反映されないという現象が起きました。
え、なにが起きたの……？
特にエラーも出ていないし、変な操作をした記憶もない。
使っているテーマは「Cocoon」で、ブロックエディターと相性がいいはず。
原因を探しても、よくわからない…
いろいろ調べたところ、考えられる原因はいくつかありました。
- テーマやプラグインの自動更新でCSSが変わった
- 使用しているフォントが太字に対応していない
- キャッシュ系プラグインの影響でCSSが崩れた
- Gutenberg側の仕様変更
- ブラウザやCDNのキャッシュ
元は太字が効いてたのでフォントの問題ではなさそうだし、プラグインなどの自動更新日時までは追えず…特定の原因がわからない。
「これが原因だった！」という手がかりがなく、モヤモヤだけが残りました。
最終的に「追加CSS」で解決
いろいろ触っても原因が見えないので、もう強引にCSSで指定することにしました。
やったのはこれだけ↓
外観 → カスタマイズ → 追加CSS に以下を追加
b,
strong,
.strong {
font-weight: bold !important;
}これで、無事に太字が復活！
エディター画面、プレビュー画面、公開ページでもちゃんと太く表示されました。
解決はした。でも「なぜ起きたか」は結局わからず
今回は「CSSで上書きする」という形で解決できましたが、根本の原因は最後まで特定できませんでした。
でもこれ、意外とよくあることみたいです。
CSSの優先順位とか、プラグインの干渉とか、“見えない場所で静かに起きる変更”って本当に厄介ですね…。
今回わかったこと（備忘録）
- ブロックエディターの「B」ボタン＝
<strong>タグ - WordPressで太字が効かなくなることは実際にある
- 原因はテーマ・プラグイン・フォントなど多岐にわたる
b, strong, .strong { font-weight: bold !important; }を追加CSSに入れると解決
太字が使えないと文章にメリハリがつかない！
もしあなたも「B押してるのに太字が効かない…」と悩んでいるなら原因不明でも大丈夫です。
このCSSだけ入れておけば、とりあえず表示は元通りになります。
コメント