WordPressでブログのフォントを変更する方法

アフィリエイト
この記事は約4分で読めます。

こんにちは、オノユウ(@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;
}

フォントについては下記サイトで確認することができます。

Font-familyメーカー

 

なぜ見出しタグに「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”, “MS P明朝”, “MS 明朝”, serif;
}

body h1, body h2, body h3, body h4 {
font-family: “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “MS P明朝”, “MS 明朝”, serif!important;
}

現在、私のブログは明朝体を採用しています。

明朝体にするとだいぶ印象変わりますね。

少しリッチな見た目になります。

まとめ

繰り返しですが、基本形は下記の通り。

/* フォント */
body p, body a, body li, body span {
font-family: “追加したいフォント名”;
}

body h1, body h2, body h3, body h4 {
font-family: “追加したいフォント名”!important;
}

フォントの指定は難しくありません。上記の基本形を参考に、自分なりにフォントを設定してみてください。

フォントを変えるとブログの印象も変わり、オリジナリティも出ます。

よかったら試してみてください。

コメント

タイトルとURLをコピーしました