こんにちは、オノユウ(@yumaonodera_)です。
ブログのフォントを変えたい人「ブログのフォントを変えたいけど、どうしたらいいか分からない。簡単にフォントを変える方法教えてください。」
こういった方向けの記事。
今回はWordPressでフォントを変える方法について解説します。
コピペですぐにできるので、よかったら参考にしてください。
フォントを変える方法
まず、追加CSSを開いてください。
追加CSSを開いたら、下記を参考にして、追加CSSにフォント名を記述してください。
/* フォント */
body p, body a, body li, body span {
font-family: “追加したいフォント名”;
}
body h1, body h2, body h3, body h4 {
font-family: “追加したいフォント名”!important;
}
フォントについては下記サイトで確認することができます。
なぜ見出しタグに「important」を付け加えるか
テーマによっては、見出しの部分（h1〜h4など）に指定したフォントが適用されない場合があります。
その場合、「important」という記述を最後に付け足すことで、強制的にフォントを適用させることができます。
ただし、aタグやspanタグに対して「important」をつけると、、、
このように編集メニューまで影響範囲が広がってしまい、アイコン表示がされなくなってしまいます。
そのため、見出しの部分にのみ「important」をつけるのが望ましいでしょう。
記事にのみフォントを適用させたい場合
ブログ全体ではなく、記事にのみフォントを適用させたい場合は、「body」を「article」に変えてください。
/* フォント */
article p, article a, article li, article span {
font-family: “追加したいフォント名”;
}
article h1, article h2, article h3, article h4 {
font-family: “追加したいフォント名”!important;
}
フォントを明朝体にしたい場合
下記を参考にしてください。
/* フォント */
body p, body a, body li, body span {
font-family: “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “ＭＳ Ｐ明朝”, “ＭＳ 明朝”, serif;
}
body h1, body h2, body h3, body h4 {
font-family: “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “ＭＳ Ｐ明朝”, “ＭＳ 明朝”, serif!important;
}
現在、私のブログは明朝体を採用しています。
明朝体にするとだいぶ印象変わりますね。
少しリッチな見た目になります。
まとめ
繰り返しですが、基本形は下記の通り。
/* フォント */
body p, body a, body li, body span {
font-family: “追加したいフォント名”;
}
body h1, body h2, body h3, body h4 {
font-family: “追加したいフォント名”!important;
}
フォントの指定は難しくありません。上記の基本形を参考に、自分なりにフォントを設定してみてください。
フォントを変えるとブログの印象も変わり、オリジナリティも出ます。
よかったら試してみてください。
コメント