WordPressでfont-weightが効かないWEBフォントを太字にする

CSSでWEB上のフォントを太字にするには、font-weightで指定する方法がありますが、一部のWEBフォントでは対応しておらず、太字にすることができません。

今回はWordPressのグーテンベルク上の段落ブロックから「B」を指定すると太字に指定する方法をお伝えします。

まずはテキストエディタから文字を入力

標準のフォントでは「B」を押すと太字に変化します

次に、一部のWEBフォント（今回は明朝体）では、太字指定しても、変化がない状態です。

そこで以下のCSSを追加します。strongというのが、「B」になります。
text-shadowで文字の周りに黒字の影を追加して、太字に見せているだけです。

CSSファイルに書かない場合は、WordPressの管理画面、「外観」→「カスタマイズ」→「追加 CSS」に追記します。

1. strong {
2.     /* シャドウをつけて太字にする */
3.     text-shadow: -0.3px 0.3px 0.1px rgba(0,0,0,1);
4.     /* 文字と文字の間をあける */
5.     letter-spacing: 1px;
6. }

太字にする前。

太字指定した後。

まとめ

今回は文字の周りに、1pxだけ縁取りの影を入れましたが、もっと太字にしたい場合は2px、3pxと増やせば良いです。
ただあまり太字にしすぎると、字画の多い文字が潰れて見えなくなってしまうので、フォントに合わせて影をつければOKです。

strongというのは「重要な文字」という意味ですが、１つのページにたくさん使いすぎるとSEO上検索エンジンからペナルティを受けてしまうかも知れませんので、１ページにつき1-3個くらいまでにまとめたほうが安心です。

[公開日] 2020年12月17日 / カテゴリー：WEBデザイン,WordPress

---

<< 次の記事｜トップ｜前の記事 >>

この記事を書いた人

ポポデザイン
西宮市在住のWEBクリエイター・グラフィックデザイナー・マーケター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
Facebook｜X｜Instagram

同じカテゴリーの記事

• 

  ロリポップのスタンダードプラン・アップデートの使用感

  ロリポップサーバーのスタンダードプランで、アップデートの通知が来ていたので実際の制作案件でも使用してみることにしました。 [続きを読む]

• 

  スマホで簡単撮影！ホームページ用の写真の撮り方

  お店や仕事用のホームページで写真が必要だけど、何で撮影すればいいの？ デジカメ？一眼レフ？ と悩まれるかたは多いと思いま [続きを読む]

• 

  簡単にホームページが作れる Mobirise（モビライズ）の使い方

  いつもお世話になっている西宮流さんから、こんなソフトがあるよ！勧めて頂いたので、試してみました。 Mobirise（モビ [続きを読む]

• 

  CyberduckのブックマークをMac間で移行する方法

  Macで（Windowsも）手軽に使えるFTPソフトといえば「Cyberduck」ですが、複数のMacで使用する場合、こ [続きを読む]

---

最新の投稿

---

---

---

---

---