AmaDemoAmaDemoWEBマーケティングWordPressTOOLGADGETホームWEB【簡単】WordPressでフォントを変更する方法【手順を解説】2019/07/22SHAREツイートシェアはてブGoogle+PocketLINE「サイトの雰囲気を変えるために、フォントを変更したいけどやり方が分からない」こういった方向けの内容です。ワードプレスではテーマによってフォントが指定されています。これはコードを変更するだけで、意外と簡単に変えることができます。本記事ではフォントを変更する流れなどを解説していきますので、ぜひ参考にしてみてください。目次フォントを変更する方法フォント変更について知っておいた方がいいことブラウザによって表示が異なるテーマファイルを破損する恐れがあるソースの編集はエディタでまずはグーグルフォンツでフォントを探す詳細設定をしておくPHPファイルを編集するCSSファイルを編集するフォントを変更する方法フォントを変更するための主な流れは下記のとおりです。フォントを見つけるPHPを書き換えるCSSを書き換えるたったこれだけで、フォントの変更が完了します。そこまで難しい内容ではないので、気楽に取り組んでください。注意すべきこともあるので、まずはその部分についてお伝えしておきます。フォント変更について知っておいた方がいいことフォントを変更するにあたって、いくつか知っておくべきことを紹介しておきます。注意しておきたいのが下記の3点です。ブラウザによって表示が異なるテーマファイルを破損する恐れがあるソースの編集はエディタで編集するべきこの3点について、軽く解説しておきます。ブラウザによって表示が異なるフォントによってはChromeでは表示されているのに、別のブラウザで見るとうまく反映されないといったことが起こります。このため、フォントファミリーには複数のフォントを組み込んでおいた方が安心です。PGothic”,sans-serif;}こうすることで左のフォントが反映されなければ、1つ右のフォントが適応されていくという感じになっています。これで各ブラウザでのフォント対応ができるので、複数入れておくといいかと思います。テーマファイルを破損する恐れがあるテーマが破損するのは基本PHPをいじる時に多いです。この部分を理解して、しっかりとバックアップを取るようにしておきましょう。»参考:【WordPress】ロリポップにDreamweaverで接続してバックアップを作成する方法これ以外の対策としては、子テーマを作成しておくと元のテーマを壊さずに済みます。しても不安な場合は、そちらで試してみて下さい。ソースの編集はエディタでソースコードの編集をメモなどで行なってしまうと、変に変換されたりでコピペがうまくいかないこともあります。いったミスを防ぐためにも、専用のエディタを使っておくことがオススメですね。»参考:【Mac】プログラミング初心者におすすめのエディタは2つです作業を行う前に知っておくべきことは以上です。それでは実際に作業を行なっていきましょう。グーグルフォンツでフォントを探すグーグルフォントにアクセスして、好きなフォントを探します。基本は日本語で記事を作っている方が多いと思うので、「Japanese」を選ぶと探しやすいです。1p」というフォントを使います。これは実際に僕も使っているフォントなので、見やすければ参考にしてみてください。詳細設定をしておくフォントを選んだら「+」をクリック後、下に出てくる「-」をクリックし、「CUSTOMIZE」を選びましょう。太文字、斜文字を使う方はここで設定しておく形になります。700」「Latin」です。チェックが完了したら「EMBED」をクリックして、コードが表示された画面へ戻しておきます。ここから先は実際にワードプレスのテーマを編集していきますので、バックアップを取っておくようにしてください。Sixteen」を使ってファイルの編集を解説していきます。「EMBED」で表示されている下記のコードをコピーします。rel=”stylesheet”>これをPHPファイルに貼り付けていきましょう。編集場所はワードプレス管理画面から「外観」→「テーマの編集」→「テーマヘッダー」です。このテーマヘッダーの<head>〜</head>の間に先ほどのコードを貼り付けます。下図のような感じです。これで保存をすれば、PHPの編集は完了です。あとはCSSを書き換えれば完了しますので、もう少しがんばってください。CSSファイルを編集する「EMBED」で表示されている下記のコードをコピーします。sans-serif;これをCSSのフォントを変えたい要素で貼り付けていきます。(記事内のフォントを変更したいのであれば、「body」です)編集は、ワードプレス管理画面から「外観」→「テーマの編集」→「スタイルシート」へ移行し、このファイルに追記していく形となります。このスタイルシートの最下部に、先ほどのコードを使用したCSSを追記します。今回の場合であれば、記事内のフォントを変えるために「body」に対して変更を加える感じです。そのため追記コードは下記のようなものとなります。0;}これで保存をすれば、CSSの編集は完了です。今回の内容は以上となります。ちなみに少し難しそうだなと感じる方は「プラグイン」もあるので、まずはそっちで試してみてもいいかもしれませんね。ファイルが含まれていないサイトがあります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。