ワードプレスのフォント変更時のポイントを解説【印象が変わる!】

スポンサーリンク

ワードプレスでのフォントの効果

ワードプレスでサイトを作る時、見た目を整える上で1つの重要なポイントになるのがフォントです。

何故なら、ほとんどのwebサイトのコンテンツの多くの割合がテキストだからです。ランディングページなどではキーワードによってフォントを変更しているものもあります。

一般的な日本語のフォントは、ゴシック体か明朝体ですが、ゴシック体の中にもバリエーションがあったりします。

フォントはサイトの大半を占めるテキストの見た目を整えるもの。シンプルで装飾のないページに写真が1枚と明朝体のテキストが並んでいたら、洗練されたイメージを持てます。逆に子供用品を紹介するサイトで同じことをするよりも、手書き風の丸ゴシックの方がイメージを伝えやすいと思います。

サイトのビジョンに合わせて、最善なフォントを選択することで、よりサイトをイメージに近い形でユーザーに届けることができるようになります。

海外テーマのフォントについて

ワードプレスで、おしゃれなデザインの無料テーマをインストールする方は多いと思いますが、そんなテーマの中には、海外で作られたテーマ混ざっています。

海外製のテーマは日本語向けに作られていないものがほとんどで、フォントに関して言えば日本語用のフォントではなくアルファベット用の英語向けのフォントに設定されているものが多いです。

その為、海外テーマに関しては、フォントの再設定が必須になります。設定をせずに使用しているとテキストの文字化けなどの不具合が出ることもあるので、テーマをインストールした際は、まずフォントの設定を変更しましょう。

フォントを変更する前の注意事項

バックアップを取ろう

フォントの設定を変更する前にワードプレスのバックアップを取っておくことを強くおすすめします。

その理由は、自分でテーマをいじった時に不具合などが出た場合にすぐに元の状態に復元できるようにする為です。

バックアップにはサーバー側の情報(テーマ、画像、プラグイン)とデータベースの情報(記事、カテゴリ、コメント)の2種類があります。

このデータをそれぞれバックアップすることで、万が一の自体が起きても、それまでのデータを失うことなく復元することができます。

サーバー側のバックアップには、FTPツールを使用することをおすすめします。FTPツールを活用できるようになることはサイト運営を行うにあたってメリットとなることが多いので、簡単な使い方だけでも理解しておきましょう。

子テーマを作ろう

フォントを変更する際は、テーマのスタイルシートを編集することになりますが、プログラミングスキルの少ない方がインターネット上の情報からコードをコピーして、自分のテーマのスタイルシートに貼り付けた際に全角スペースなどが入ってしまいテーマに不具合が出ることがあります。

そんな時に便利なのが「子テーマ」です。子テーマとは本物のスタイルシートに変更点を記述するのではなく、別にスタイルシートを作成して、そこにコードを記述することでテーマに変更を反映させるためのものです。

スタイルシートがサイトに反映される際に「親テーマ」の次に「子テーマ」が反映される為、「上書き」のような感覚で活用するものと考えてください。

子テーマを作っておけば親テーマはいじらずにすむので、不具合があった場合は子テーマの記述を削除するだけで問題を解決することができます。

子テーマの作成方法については下記の記事を参照下さい。

子テーマの作り方

ワードプレスのフォントの変更方法

フォントを変更する時はスタイルシートにある「font-family」という項目を変更します。

スタイルシート上の上段を見てみると「font-family: ○○○○」記述されていると思います。

この「○○○○」に好きなフォント名を記述すれば変更することができます。

ただしフォント名は「明朝体」と書いても反映されませんので、CSS上で動作する正式名称を調べて記述するようにしてください。

ワードプレス管理画面からフォントを変更する

WordPressの管理画面からスタイルシートを変更する方法です。

管理画面左側の「外観」から「テーマの編集」を選択します。

テーマの編集を選択

テーマの編集画面が表示されますので、画面右側にある「テンプレート」の中から「スタイルシート(style.css)」を選択します。

スタイルシートの上部に「font-family」の記述がありますので、この項目を編集します。

style.cssを編集

画像の中でフォント名が沢山、記述されているのは、ブラウザの種類などユーザーの使用環境によって、希望のフォントが表示されない不具合があった場合に「このフォントがダメだったら、こっちのフォントを使ってください」という候補をあげているためです。

フォントを変更する時は「font-family:フォント名;」と記述してください。候補を入れておく時は「,」カンマでフォント名を区切るようにしてください。

フォント名の変更が終わったら画面下にある「ファイルを更新」をクリックして終了です。

この作業は親テーマを例に取り上げていますが、子テーマに記述することをおすすめします。

FTPツールでフォントを変更する

FTPツールを使ってスタイルシートをダウンロードして、編集後に再度アップロードする方法です。

まずFTPツールで、テーマのスタイルシートをダウンロードします。

FTPでファイルをダウンロード

PCに保存されたスタイルシートのファイルを開きます。

cssファイルを編集

スタイルシートのフォントの項目を編集してファイルを保存します。

保存したスタイルシートをFTPツールにアップロードすれば作業は完了です。

テーマの追加CSS機能でフォントを変更する

WordPress4.7にアップデートされてから「追加CSS」という機能が実装されました。

追加CSSに記述をすることによって、スタイルシートをいじらなくても済むので、子テーマを作るのが面倒な方やCSSをいじりたいだけの人には、こちらの方法が最適です。

追加CSSは、管理画面から「外観」「カスタマイズ」の順に進み、テーマのカスタマイズ画面に移ります。

左側のカスタマイズメニューの下段に「追加CSS」の項目がありますので、こちらをクリックします。

追加CSSを選択

こちらにフォント編集の記述をします。

追加CSSに追記

作業が完了したら「保存して有効化」をクリックして完了です。

追加CSSによる編集方法は不具合が起きた際に、こちらの記述を削除するだけで、元の状態に戻すことができるので、初心者の方にもおすすめです。

有名サイトのワードプレスのフォントセット

ここでは例として情報発信で有名な企業サイトで使われているフォントを紹介します。

バズ部

https://bazubu.com

バズ部

WordPressに情報だけではなく、コンテンツマーケティングやSEO、ソーシャルメディアなど、ITに関する様々な情報を発信している「バズ部」がメインで使用しているフォントは「游ゴシック」

游ゴシックはWindowsやMacにも入っているスタンダードなフォントでゴシック体特有の読みやすい形とコンパクトにまとまった漢字が特徴です。

ブログサイトなどでは非常に多く使われており、ユーザーも游ゴシック体を見慣れている為、読みづらさを感じることは少ないでしょう。

フォントに迷ったら、とりあえず游ゴシックを選択してもいいのではないかと思います。

Lig

https://liginc.co.jp/

LIGinc

ITやビジネスだけでなく、旅やライター自身のコラムなど、非常にエンターテイメント性の高い「LIG」がメインに使用しているフォントは「Quicksand」という「Google Fonts」です。

Google Fontsとは、Googleがwebサーバー経由で読み込ませるwebフォントと呼ばれるものです。

通常、サイトを閲覧する時には、ユーザーが使用しているデバイスの中に入っているフォント以外の書体は表示できません。なのでMacに入っているフォントでサイトを構築した場合、そのフォントがWindowsに入っていなければ、Windowsユーザーがサイトを閲覧した際に違うフォントで表示されてしまいます。

その問題を解決するのがwebフォントです。Webフォントはweb上のサーバーにあるフォントのデータを読み込んで使用しますので、デバイスによるフォントの違いをなくすことができます。ユーザーが何を使っているのかを気にすることなくフォントを選べるのがメリットです。

とは言っても、バズ部が使用している游ゴシックなどは、とてもメジャーなフォントなので、ほとんどのデバイスに入っていることもあり、心配することもないかもしれません。

フォントが変更できるプラグイン

WordPressには、簡単にフォントを変更できるプラグインもあります。

ここではフォント変更に最適なおすすめプラグインを2つ紹介します。

Font

https://wordpress.org/plugins/font/

Font test site

ブラウザ上で直感的にフォントの変更ができるプラグイン「Font」

このプラグインは、自分のサイトを表示した際に上部に表示されている「管理バー」から、サイトを表示したまま、変更したいテキストを直接、編集できるという便利なプラグインです。

3Dテキストや、カーソルをドラッグした時のアイコンのカラーの変更などもできます。ITスキルのない方でも扱いやすいプラグインです。

Easy Google Fonts

https://wordpress.org/plugins/easy-google-fonts/

Easy Google Fonts

Google Fontsが簡単に利用できるプラグイン「Easy Google Fonts」

webフォントを簡単に使いたいなら、こちらがおすすめです。記事、見出し、タイトルなど、各項目でカラーやフォントを選ぶことができます。

デバイスによって違うフォントになることを防ぐことができるので、サイトの見栄えを一定に保つことができる点が素晴らしいですね。

フォントが良い感じに変更されているテーマ

ワードプレスで日本人が制作したテーマは初めからフォントが良い感じに調整されています。

その中で3つ紹介したいと思います。

Twenty Seventeen

https://ja.wordpress.org/themes/twentyseventeen/

Twenty seventeen

WordPressのデフォルトテーマである「Twenty Seventeen」

様々な世界の言語に対応しており、もちろん日本語のフォントも設定済みです。

デフォルトで設定されているフォントは「ヒラギノ角ゴシック」「メイリオ」「サンセリフ」とゴシック系のフォントに設定されています。

Simplicity

https://wp-simplicity.com/

Simplicity

シンプルでSEO対策済みの無料テーマ「Simplicity」

国内産のテーマなので、日本語のフォントも問題なく対応しています。

Simplicityで使用されているフォントも「ヒラギノ角ゴシック」「メイリオ」の
ゴシック系です。シンプルなテーマにゴシック体がよくマッチしています。

Xeory

https://xeory.jp/

Xeory

バズ部が制作して実際にサイトに使用している無料テーマ「Xeory」

このテーマのデフォルトで設定されているフォントは「游ゴシック」「ヒラギノ角ゴ」「メイリオ」となっています。やはり、このテーマもゴシック系で設定されています。テキストの読みやすさはゴシック系が一番ですね。

まとめ

webサイトを運営していく上でテキストの表示は非常に重要な要素の1つです。

ここぞという時に明朝体を大きな文字で使ってみたりすることで、テキストで伝えたい内容を、より明確にユーザーにイメージさせることができます。

どのようなサイトなのかによっても選択するフォントは変わってきます。

是非、サイトイメージに合ったフォントを選んでみてください!

スポンサーリンク