【ワードプレスのフォントを変更するプラグイン】

ワードプレスのフォントを変更するプラグイン。ブログのフォントを変更したいと思ったことはありませんか?。それならこの先もお読み下さい。今回は、ワードプレスのフォントを変更するプラグインについて書いていきます。

 

ワードプレスでは、CSSなどのカスタマイズをおこなわなければ、基本的にテーマで指定されているフォントが適用されます。ですが、プラグインを導入することで簡単に変更することが可能となります。

 

結論を先に話ししておきます

ワードプレスのフォントは、利用しているテーマによって指定されています。ワードプレスのフォントを変更するメリットとしては、フォントを変更するだけで記事内の文章やブログ全体の印象を簡単に変更してしまうことができる点にあると考えます。

 

ワードプレスのフォントには、それこそ数多くの種類があって、ユーザーに与える印象が大きく異なり、高級感や信頼感などを感じて貰うことができます。今あなたが使っているテーマのフォントが気に入らない、そう感じていませんか?

 

今のフォントを変更したいけど、どうやって変更して良いのか分からないし、予め用意されているフォントの中に気に入ったものがないなど。ワードプレス初心者の中には、このようにフォントで悩んでいる人も多いことでしょう。

 

以前投稿した下記の記事にも目を通して貰えると幸いです。

 

【Google Fontsとは(動画付き)】

Google Fontsとは(動画付き)

 

「Google Fonts」は、Webフォントとして、グーグルから無償で提供されているものでありプログラミングインターフェースとして利用可能なインタラクティブなディレクトリーサービスです。

 

「Google Fonts」は、2010年に発表された訳ですが、多くのフォントが「SILオープンフォントライセンス」の元で提供されており、その一部はApacheライセンスです。いずれも無償で提供されています。

 

SILオープンフォントライセンスとは
「SILオープンフォントライセンス」とは「SIL Open Font License」と記載し、フリーとして利用可能なフォントライセンスのことを指し、単体での再販はできませんが、何かしらのソフトウェアを同梱させることで販売は可能のようです。

 

また、商用利用として使うことも可能で、ソフトウェアに組み込んでの利用に制約などはありません。ですが、フォントを改変した場合など、フォント名に元フォント名を含めることができないので、改変した旨の明記が必要となるようです。

 

ではここで動画を視聴してみて下さい。題して「Googleフォントに新しいフォントが追加されたよ」です。

 

Google Fonts Typographyのインストール

Google Fonts Typographyのインストール

 

ワードプレスのプラグインには、フォントを自由自在に操ることができる便利なGoogle Fonts Typographyがあります。Google Fontsのライブラリには、1,000個以上ものユニークなフォントが含まれています。

 

「Google Fonts Typography」は、Google Fontsをライブプレビューで確認しながら変更することができます。また、Google Fontsで変更可能な箇所は、項目毎に分割されており、誰でも簡単に使うことができます。

 

注意事項
Google Fontsは、日本語に対応していないフォントもあるので使用する際、プレビューを確認しながら作業をおこなうようにして下さい。

 

  • ワードプレスにログイン後「黄色枠」で囲まれている「プラグイン」にマウスを移動すると、プルダウンが表示されます。その後「オレンジ色枠」で囲まれている「新規追加」を押しましょう。

 

  • 新規追加を押した後「緑色枠」で囲まれているボックス内に「Google Fonts Typography」と入力します。次に「水色枠」で囲まれている「Fonts Plugin|Google Fonts Typography」が表示されます。

 

分からない場合、画像を参照して下さい。その後「桃色枠」で囲まれている「今すぐインストール」を押しましょう。

 

  • インストールが終わると「紫色枠」で囲まれている「Activate」もしくは「有効化」となっていると思うので押しましょう。

 

  • Activateもしくは有効化が終わると画面が変わり、下記のような画面が表示されるはずです。

 

ここからは、実際にブログのフォントを変更していきます。Google Fonts Typographyは、ドキュメント作成ソフトのように、フォント名を選び、その全部が変更される訳ではなく、箇所毎にフォントを変更していくやり方になります。

 

  • Google Fonts Typography」を有効化すると、サイドメニューに新しくFonts Pluginと言う項目が表示されます。では「オレンジ色枠」で囲まれている「フォントのカスタマイズ」を押してみましょう。

 

  • するとまず初めに「赤色枠」で囲まれている「Fonts Plugin」を開きましょう。

 

  • 次の画面では「桃色枠」で囲まれている「基本設定」を押しましょう。

 

  • 基本設定を開くと「黄色枠」で囲まれているように「ベースタイポグラフィ」「見出しタイポグラフィ」「ボタンや入力のタイポグラフィ」の3つがあります。

 

ベースタイポグラフィ・見出しタイポグラフィ・ボタンや入力のタイポグラフィの役目
  • 「ベースタイポグラフィ」の役目。 本文における文字のフォントを変更します。
  • 「見出しタイポグラフィ」の役目。 見出しのフォントを変更します。
  • 「ボタンや入力のタイポグラフィ」の役目。 ブログ内検索に於いて、入力した場合のフォントを変更します。

 

【タイポグラフィの基本設定】

冒頭でも記載してますが、設定には次の3項目「ベースタイポグラフィ」「見出しタイポグラフィ」「ボタンや入力のタイポグラフィ」があります。それら一つ一つの項目を図解を見ながら設定していきましょう。

 

  • では初めにベースタイポグラフィから、見ていきましょう。まず先に「赤色枠」で囲まれている「ブログタイトル名」と「文章のフォント」を何となく覚えておいて下さい。

 

  • では編集画面に戻って「オレンジ色枠」で囲まれている「ベースタイポグラフィ」の中のフォントを設定しましょう。ここではYuji Maiを選択してみました。その後「緑色枠」で囲まれている「公開」を押します。

 

  • すると「紫色枠」で囲まれている「ブログタイトル名」と「文章のフォント」が変更されました。

 

フォントは沢山あり、一つ一つ見るのは大変なので、気に入ったフォントがあれば、設定してみてはいかがでしょうか。

 

  • 次は見出しタイポグラフィを見ていきましょう。まず先に「桃色枠」で囲まれている「見出しタイトル名」のフォントを何となく覚えておいて下さい。

 

  • では編集画面に戻って「緑色枠」で囲まれている「見出しタイポグラフィ」の中のフォントを設定しましょう。ここではジョージアを選択してみました。その後「水色枠」で囲まれている「公開」を押します。

 

  • すると「紫色枠」で囲まれている「見出しタイトル名」が変更されました。

 

フォントは沢山あり、一つ一つ見るのは大変なので、気に入ったフォントがあれば、設定してみてはいかがでしょうか。念の為書いておきますがベースタイポグラフィ」でも、見出しのフォントは変更されます。

 

  • では最後に「水色枠」で囲まれている検索ボックス内に何か文字を打ってみて下さい。ここではアフィリエイトとしています。その後「桃色枠」で囲まれている「ボタンや入力のタイポグラフィ」を見てみましょう。

 

最初は、デフォルトフォントになっているはずです。

 

  • では「オレンジ色枠」で囲まれている「フォント」を設定しましょう。ここではYusei Magicを選択してみました。その後「黄色枠」で囲まれている検索ボックス内の文字を見ると違って見えると思います。

 

いくつかのフォントを試してみましたが「ボタンや入力のタイポグラフィ」に於いて、反応しない文字もあるようです。またトップページから、検索ボックス内に文字を打ち込んでもフォントが変更しないことが多々見受けられました。

 

タイポグラフィの高度な設定

「基本設定」が終わったところで次は高度な設定も見ていきましょう。「高度な設定」でも「基本設定」同様、プルダウンからフォントを選んで公開すると言うものです。この章では、簡単に解説します。

 

  • 「緑色枠」で囲まれている「高度な設定」を開いてみましょう。個人的に高度な設定については、触る必要はないかと思います。

 

  • 高度な設定を開くと「赤色枠」で囲まれているように6つの項目があります。

 

  • まずは「黄色枠」で囲まれている「ブランディング」の中を覗いた感じです。2項目のみ。

 

  • 「オレンジ色枠」で囲まれている「ナビゲーション」の中を覗いた感じです。1項目のみ。

 

  • 「桃色枠」で囲まれている「コンテンツ」の中を覗いた感じです。8項目あります。

 

  • 「紫色枠」で囲まれている「サイドバー」の中を覗いた感じです。2項目のみ。

 

  • 「水色枠」で囲まれている「フッター」の中を覗いた感じです。2項目のみ。

 

  • 「緑色枠」で囲まれている「フォントのみを読み込む」の中を覗いた感じです。ボックス内を入力する感じです。

 

冒頭にも記載してますが、高度な設定については、触る必要はないかと思います。あれこれ触ると逆に可笑しくなります。

 

今回は以上となります。ワードプレスのフォントを変更するプラグインについては分かって頂けたでしょうか。ブログアフィリエイトを運営している場合もしくは今から始める場合、フォントはデフォルトのままで良いかと思います。

 

以前投稿した下記の記事にも目を通して貰えると幸いです。

 

 

トップページへ戻る

おススメの記事 - Recommended articles -