フォント(書体)を変える【コピペで簡単!】ワードプレス初心者

person writing on a spiral notebook


この記事は、私がワードプレス【Lightning】でサイトを作成するにあたり、わからなかったこと・調べたこと・変更したことなどを、備忘録として残しています。

私と同じようなワードプレス初心者のみなさまに、少しでも参考になりましたら幸いです。

フォント(書体)を変えたい

フォントとは「ゴシック」「明朝体」「メイリオ」など、書体の種類のことです。
このフォントを変えるだけで、驚くほどサイトが見やすくなりますし、お気に入りのフォントで作成できたら嬉しいですよね。
フォントによってどれほどイメージが違うか、「游ゴシック」と「メイリオ」て比較しましたのでご覧ください。

初心者でも簡単!

初心者

ムズカシそうだけれど、初心者でもできるのかな・・・?

ファシアル

大丈夫!簡単です。
【追加CSS】に下記コードをコピペするだけで変更できます。

公開までの流れ

  1. ダッシュボードを開く
  2. 「外観」から「追加CSS」をクリック
  3. 下記コードをコピペ → 公開をクリック

たったこれだけ(*^_^*) 早速やってみましょう。

追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってください。

早速やってみましょう! 操作手順は①~⑤

①ダッシュボードを開く

②外観 → 追加CSSを選ぶ

③編集画面が出る

④下記コードをコピペする

背景色と文字色の変更

/** フォント種類の優先 */
body,
p {
font-family: “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
font-weight:500 !important;
}


“游ゴシック” からが書体の指定となっています。

表示されるPCによっては、書体がインストールされていない場合もありますので、あくまで表示の優先順位としての指定です。
上記のコードですと【游ゴシック】が最優先で表示されるという意味です。

ご参考までに、このサイトの書体は游ゴシックです。
この書体でよろしければ、そのままコピペして使ってみてください。

⑤貼り付けて、公開する

基本のフォントはこちら

日本語対応のフォント基本編は、おすすめフォント10選【日本語フォント編】現役デザイナーの格付けランキングさんを参考になさってみてください。


フォントが変わらない場合

公開して確認してみると、フォントが変わっていない場合があります。その際は

  • ブラウザの更新ボタンを押してみる
  • 編集画面上で何回か変更していると変わらない場合があるので、再度、全コードをコピペし直してみる。


私の場合は、上記で解決できましたので、同様にお困りの場合は一度やってみてください。

まとめ

コピペ→貼り付け→実行するだけなので、初心者でも簡単にできますよ(*^_^*)
よかったらチャレンジしてみてくださいね。


ファシアル

追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってくださいね。

初めての方

体験・ベーシック
プライベートレッスン

リピーター様

マスター・アドバンス
プライベートレッスン

どなた様も

マンツーマン
プライベートレッスン