WordPressでfont-weightが効かないWEBフォントを太字にする
![フォントを太字に変える方法](https://popo-design.net/wp/wp-content/uploads/2020/11/futoji-1024x427.jpg)
CSSでWEB上のフォントを太字にするには、font-weightで指定する方法がありますが、一部のWEBフォントでは対応しておらず、太字にすることができません。
今回はWordPressのグーテンベルク上の段落ブロックから「B」を指定すると太字に指定する方法をお伝えします。
まずはテキストエディタから文字を入力
![](https://popo-design.net/wp/wp-content/uploads/2020/11/futoji1.png)
標準のフォントでは「B」を押すと太字に変化します
![](https://popo-design.net/wp/wp-content/uploads/2020/11/futoji2.png)
次に、一部のWEBフォント(今回は明朝体)では、太字指定しても、変化がない状態です。
![太字にするよ](https://popo-design.net/wp/wp-content/uploads/2020/11/futoji4.png)
そこで以下のCSSを追加します。strongというのが、「B」になります。
text-shadowで文字の周りに黒字の影を追加して、太字に見せているだけです。
CSSファイルに書かない場合は、WordPressの管理画面、「外観」→「カスタマイズ」→「追加 CSS」に追記します。
- strong {
- /* シャドウをつけて太字にする */
- text-shadow: -0.3px 0.3px 0.1px rgba(0,0,0,1);
- /* 文字と文字の間をあける */
- letter-spacing: 1px;
- }
太字にする前。
![太字にするよ](https://popo-design.net/wp/wp-content/uploads/2020/11/futoji4.png)
太字指定した後。
![太字にするよ](https://popo-design.net/wp/wp-content/uploads/2020/11/futoji3.png)
まとめ
今回は文字の周りに、1pxだけ縁取りの影を入れましたが、もっと太字にしたい場合は2px、3pxと増やせば良いです。
ただあまり太字にしすぎると、字画の多い文字が潰れて見えなくなってしまうので、フォントに合わせて影をつければOKです。
strongというのは「重要な文字」という意味ですが、1つのページにたくさん使いすぎるとSEO上検索エンジンからペナルティを受けてしまうかも知れませんので、1ページにつき1-3個くらいまでにまとめたほうが安心です。
[公開日] 2020年12月17日 / カテゴリー:WEBデザイン,WordPress
同じカテゴリーの記事
-
WordPressで英語サイトの作り方【Poeditの翻訳・使い方】
WordPressで英語サイトを作る機会がありましたので、備忘録としてまとめてみました。 私の英語力は全くないのですが、 [続きを読む]
-
ホームページ文章の書き方・見せ方のコツ
たくさんの文章を一生懸命書いているのになぜか読んでもらえない、ページからすぐに離脱される、などでお悩みのかたへ。ちょっと [続きを読む]
-
Adobe Character AnimatorでVTuber!頭だけパペットの作り方
Adobe Character Animatorを使って、自分が作ったパペットと呼ばれるキャラクターを身振り手振りに合わ [続きを読む]
-
Adobe CCソフトをデジハリからお得に安く買う方法
デザインするなら必須のAdobeソフトですが、高機能な分お値段が高いのがネックです。 ふつうにAdobeの公式サイトで購 [続きを読む]
最新の投稿
2024年07月16日
2024年07月16日
2024年07月10日
2024年06月25日
2024年06月03日
カテゴリー
アーカイブ
![HTML無料テンプレートダウンロードサイト](https://popo-design.net/wp/wp-content/themes/popodesign/img/temp-banner.png)
![LINEスタンプ販売中](https://popo-design.net/wp/wp-content/themes/popodesign/img/line-banner.webp)
![Kindle電子書籍](https://popo-design.net/wp/wp-content/uploads/2022/07/kindle-banner.webp)