「サイトの雰囲気を変えるために、フォントを変更したいけどやり方が分からない」
こういった方向けの内容です。
ワードプレスではテーマによってフォントが指定されています。
これはコードを変更するだけで、意外と簡単に変えることができます。
本記事ではフォントを変更する流れなどを解説していきますので、ぜひ参考にしてみてください。
スポンサーリンク
目次
フォントを変更する方法
フォントを変更するための主な流れは下記のとおりです。
- フォントを見つける
- PHPを書き換える
- CSSを書き換える
たったこれだけで、フォントの変更が完了します。
そこまで難しい内容ではないので、気楽に取り組んでください。
ただし注意すべきこともあるので、まずはその部分についてお伝えしておきます。
フォント変更について知っておいた方がいいこと
フォントを変更するにあたって、いくつか知っておくべきことを紹介しておきます。
注意しておきたいのが下記の３点です。
- ブラウザによって表示が異なる
- テーマファイルを破損する恐れがある
- ソースの編集はエディタで編集するべき
この３点について、軽く解説しておきます。
ブラウザによって表示が異なる
フォントによってはChromeでは表示されているのに、別のブラウザで見るとうまく反映されないといったことが起こります。
このため、フォントファミリーには複数のフォントを組み込んでおいた方が安心です。
例えば下記のような感じ。
body {
font-family: ‘M PLUS 1p’,YuGothic,”Yu Gothic”,”Hiragino Sans”,”ヒラギノ角ゴシック”,”メイリオ”, Meiryo,”ＭＳ Ｐゴシック”,”MS PGothic”,sans-serif;
}
こうすることで左のフォントが反映されなければ、１つ右のフォントが適応されていくという感じになっています。
左優先です。
これで各ブラウザでのフォント対応ができるので、複数入れておくといいかと思います。
テーマファイルを破損する恐れがある
テーマが破損するのは基本PHPをいじる時に多いです。
この部分を理解して、しっかりとバックアップを取るようにしておきましょう。
»参考：【WordPress】ロリポップにDreamweaverで接続してバックアップを作成する方法
これ以外の対策としては、子テーマを作成しておくと元のテーマを壊さずに済みます。
どうしても不安な場合は、そちらで試してみて下さい。
ソースの編集はエディタで
ソースコードの編集をメモなどで行なってしまうと、変に変換されたりでコピペがうまくいかないこともあります。
こういったミスを防ぐためにも、専用のエディタを使っておくことがオススメですね。
»参考：【Mac】プログラミング初心者におすすめのエディタは２つです
作業を行う前に知っておくべきことは以上です。
それでは実際に作業を行なっていきましょう。
まずはグーグルフォンツでフォントを探す
グーグルフォントにアクセスして、好きなフォントを探します。
基本は日本語で記事を作っている方が多いと思うので、「Japanese」を選ぶと探しやすいです。
今回はサンプルで「M PLUS 1p」というフォントを使います。
これは実際に僕も使っているフォントなので、見やすければ参考にしてみてください。
詳細設定をしておく
フォントを選んだら「+」をクリック後、下に出てくる「-」をクリックし、「CUSTOMIZE」を選びましょう。
太文字、斜文字を使う方はここで設定しておく形になります。
参考：僕のチェック項目は「light 300」「black 700」「Latin」です。
チェックが完了したら「EMBED」をクリックして、コードが表示された画面へ戻しておきます。
ここから先は実際にワードプレスのテーマを編集していきますので、バックアップを取っておくようにしてください。
PHPファイルを編集する
今回はサンプルとして「Twenty Sixteen」を使ってファイルの編集を解説していきます。
「EMBED」で表示されている下記のコードをコピーします。
<link href=”https://fonts.googleapis.com/css?family=M+PLUS+1p:300,700&display=swap” rel=”stylesheet”>
これをPHPファイルに貼り付けていきましょう。
編集場所はワードプレス管理画面から「外観」→「テーマの編集」→「テーマヘッダー」です。
このテーマヘッダーの<head>〜</head>の間に先ほどのコードを貼り付けます。
下図のような感じです。
これで保存をすれば、PHPの編集は完了です。
あとはCSSを書き換えれば完了しますので、もう少しがんばってください。
CSSファイルを編集する
「EMBED」で表示されている下記のコードをコピーします。
font-family: ‘M PLUS 1p’, sans-serif;
これをCSSのフォントを変えたい要素で貼り付けていきます。
（記事内のフォントを変更したいのであれば、「body」です）
編集は、ワードプレス管理画面から「外観」→「テーマの編集」→「スタイルシート」へ移行し、このファイルに追記していく形となります。
このスタイルシートの最下部に、先ほどのコードを使用したCSSを追記します。
今回の場合であれば、記事内のフォントを変えるために「body」に対して変更を加える感じです。
そのため追記コードは下記のようなものとなります。
これで保存をすれば、CSSの編集は完了です。今回の内容は以上となります。
ちなみに少し難しそうだなと感じる方は「プラグイン」もあるので、まずはそっちで試してみてもいいかもしれませんね。
オススメ【初心者向け】WordPress学習におすすめしたい３冊の本
オススメ【収益化】おすすめのアフィリエイトASP５選【すべて登録でOK】
コメントを残す