WordPressでつくったホームケージやブログ、他の人のサイトやブログをみていると、
おしゃれなデザインのものが多いですよね。
WordPressでの「フォント」は、デフォルト状態だと選んだテーマによって異なります。
全体のデザインもそうですが、フォント(書体)を変えるだけでも
サイト全体のイメージを変えてくれます。
例えば「親しみやすく」や「洗練された」感じになどなど。
ただ、フォント(書体)をかえるとなると、なんとなく難しそうなイメージです。
「コードをコピーして、、CSSを調整して…という手順はには無理!」
という拒否反応が私にはありました。
そんな私のような超初心者の方にオススメなのが、
コード変更一切不要でフォントを変更ができるWordPressのプラグイン「Easy Google Fonts」です。
今日はそんな「Easy Google Fonts」の設定方法のご紹介です。
超初心者の私でもできたのでぜひぜひためしてみてください。
Easy Google Fontsとは
Easy Google Fontsは、その名の通りGoogleが提供しているWebフォントGoogle Fontsを、
コード変更一切不要でフォントをつかえるプラグインです。
Google Fontsは世界各国のさまざまな言語に対応しており、1,000種類ものフォントが無料で提供されています 。
上記のEasy Google Fonts プラグイン公式ぺージサイトからダウンロードできます。
Google Fonts の見本
![](https://pelicoco.com/wp-content/uploads/2021/09/b7dcf1b4c2ff3e5a03298529bcda5e52-1024x557.png)
日本語対応は31書体
※2021年9月現在
![](https://pelicoco.com/wp-content/uploads/2021/09/aa1f5a57c8aad343ab9908554628b708-1024x545.png)
Easy Google Fonts の使い方
以下のようなたった「4ステップ」です。
- プラグインをインストール
- プラグインを有効化(これでEasy Google Fontsが使用できるようになりました。)
- WordPressのカスタマイザーを開く
- フォントを設定
1.プラグインをインストール
まずはプラグインをインストールします。管理画面から プラグインへ。
プラグインを追加のところから先ほどダウンロードした「Easy Google Fonts 」をアップロードします。
![](https://pelicoco.com/wp-content/uploads/2021/09/1-1024x648.png)
2.プラグインを有効化
プラグインをアップロードすると一覧に「Easy Google Fonts 」が表記されるのでこちらを有効化します。
![](https://pelicoco.com/wp-content/uploads/2021/09/2-1-1024x491.png)
これでEasy Google Fontsが使用できるようになりました!(あともうちょっと!です)
3.WordPressのカスタマイザーを開きます
ワードプレスの管理画面から「外観」>「カスタマイズ」を選択します。
![](https://pelicoco.com/wp-content/uploads/2021/09/4-1024x447.png)
カスタマイズの画面へ移行し「Typography」の項目が確認できます。
「Typography」を選択し、「Default Typography」をクリックしてフォントの編集画面に移行します。
![](https://pelicoco.com/wp-content/uploads/2021/09/7-1024x572.png)
すると、以下のようなメニューが表示されます。
このメニューをからフォントを設定していきます。
![](https://pelicoco.com/wp-content/uploads/2021/09/6-1024x563.png)
4.フォントを変更
以下の要素のフォントが設定できるようになっています。
- Paragraphs(Pタグ/本文のこと)
- H1〜H6
今回はわかりやすいように、Paragraphs(Pタグ/本文のこと)のフォントを変更してみます。
まず、Paragraphsをクリックし、次にFont Familyをクリックします。
![](https://pelicoco.com/wp-content/uploads/2021/09/6-1-1024x563.png)
検索ボックスが表示されるので、設定したいフォント名を入力してください。
今回は、Google Fontsの日本語フォントの中から「Noto Sans JP」を設定してみます。
![](https://pelicoco.com/wp-content/uploads/2021/09/5-1-1024x730.png)
見比べてみると違いがはっきり分かるかと思います。
変更が完了したら「公開」ボタンをクリックして変更内容を保存すれば反映が完了です。
(ここまでで終了ですが、もっとヨクが出てきた方に!)
5.フォントの細かい設定も可能
![](https://pelicoco.com/wp-content/uploads/2021/09/8-1-1024x730.png)
Styleタブをクリックすれば、フォントの太さ以外にもさまざまなカスタマイズが可能です。
⚫️Font Color 文字色の変更できます。
⚫️Background Color 文字の背景色が変更できます。
⚫️Font Size 文字サイズが変更できます。
⚫️Line Height 行間が変更できます。
⚫️Letter Spacing 文字同士の間隔が変更できます。
![](https://pelicoco.com/wp-content/uploads/2021/09/85fe3e6da826abd4173eec6d710407ab-1024x655.png)
文字を小さくしたり
![](https://pelicoco.com/wp-content/uploads/2021/09/4fc7f7e26d1c3291718a69aefb406ee2-1024x615.png)
文字間を変更してみたり
超初心者の私でもとても簡単でした。
書体や色を変えるだけで全体のイメージが変わりますよね!
ぜひ自分好みの変更を気軽に試してみてください。
コメント