WordPressでfont-weightが効かないWEBフォントを太字にする
CSSでWEB上のフォントを太字にするには、font-weightで指定する方法がありますが、一部のWEBフォントでは対応しておらず、太字にすることができません。
今回はWordPressのグーテンベルク上の段落ブロックから「B」を指定すると太字に指定する方法をお伝えします。
まずはテキストエディタから文字を入力
標準のフォントでは「B」を押すと太字に変化します
次に、一部のWEBフォント（今回は明朝体）では、太字指定しても、変化がない状態です。
そこで以下の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;
- }
太字にする前。
太字指定した後。
まとめ
今回は文字の周りに、1pxだけ縁取りの影を入れましたが、もっと太字にしたい場合は2px、3pxと増やせば良いです。
ただあまり太字にしすぎると、字画の多い文字が潰れて見えなくなってしまうので、フォントに合わせて影をつければOKです。
strongというのは「重要な文字」という意味ですが、１つのページにたくさん使いすぎるとSEO上検索エンジンからペナルティを受けてしまうかも知れませんので、１ページにつき1-3個くらいまでにまとめたほうが安心です。
[公開日] 2020年12月17日 / カテゴリー：WEBデザイン,WordPress
同じカテゴリーの記事
-
WEBデザイナーが印刷物制作・入稿に注意することWEBデザインの業務と印刷物のグラフィックデザインの仕事を同時進行で制作していると、うっかりミスが出やすいので自戒を込め [続きを読む]
-
BootstrapStudioの使い方の感想を書いてみましたドラッグアンドドロップでちょっとしたペラモノのサイトができる、BootstrapStudioが便利なのでレビューしてみま [続きを読む]
-
イラストにおすすめスキャナー・CanoScan LiDE 400レビューアナログで描いたイラストの線画をきれいにスキャンするためのスキャナーを探していたところ、手頃な薄型のフラットベットスキャ [続きを読む]
-
ブログの文字数は長いほど効果的かについて考えるブログの文章を書くにあたってどれくらいの分量を書けば良いかと聞かれることがあります。 内容によっては800字くらいだった [続きを読む]
最新の投稿
2024年04月11日
2024年04月01日
2024年03月22日
2024年03月19日
2024年03月01日
カテゴリー
アーカイブ
