目次
ワードプレスでのフォントの効果
ワードプレスでサイトを作る時、見た目やユーザビリティをアップさせる上で重要なポイントの1つになるのがフォントです。
サイトのコンセプトに合わせて、最善なフォントを選択することで、よりサイトをイメージに近い形でユーザーに届けることができるようになり、ユーザーの利用満足度がアップします。
何故なら、ほとんどのwebサイトのコンテンツの多くの割合がテキストだからです。ランディングページなどではキーワードによってフォントを変更しているものもあります。
一般的な日本語のフォントは、ゴシック体か明朝体ですが、ゴシック体の中にもバリエーションがたくさんあります。
サイトの大半を占めるのはテキストです。テキストのデザイン（フォント）が変わればサイトの印象も変わります。
シンプルで装飾のないページに写真が1枚と明朝体のテキストが並んでいたら、洗練されたイメージを持てます。逆に子供用品を紹介するサイトで同じことをするよりも、手書き風の丸ゴシックの方がイメージを伝えやすいと思います。
海外テーマのフォントについて
ワードプレスで、おしゃれなデザインの無料テーマをインストールする方は多いと思いますが、そんなテーマの中には、海外で作られたテーマ混ざっています。
海外製のテーマは日本語向けに作られていないものがほとんどで、フォントに関して言えば日本語用のフォントではなくアルファベット用の英語向けのフォントに設定されているものが多いです。
その為、海外テーマに関しては、フォントの再設定が必須になります。設定をせずに使用しているとテキストの文字化けなどの不具合が出ることもあるので、海外テーマをインストールした際は、まずフォントの設定を変更しましょう。
フォントを変更する前の注意事項
バックアップを取ろう
フォントの設定を変更する前にワードプレスのバックアップを取っておくことを強くおすすめします。
その理由は、自分でテーマをいじった時に不具合などが出た場合にすぐに元の状態に復元できるようにする為です。
バックアップにはサーバー側の情報（テーマ、画像、プラグイン）とデータベースの情報（記事、カテゴリ、コメント）の2種類があります。
このデータをそれぞれバックアップすることで、万が一の自体が起きても、それまでのデータを失うことなく復元することができます。
サーバー側のバックアップには、FTPツールを使用することをおすすめします。FTPツールを活用できるようになることはサイト運営を行うにあたってメリットとなることが多いので、簡単な使い方だけでも理解しておきましょう。
子テーマを作ろう
フォントを変更する際は、テーマのスタイルシートを編集することになりますが、プログラミングスキルの少ない方がインターネット上の情報からコードをコピーして、自分のテーマのスタイルシートに貼り付けた際に全角スペースなどが入ってしまいテーマに不具合が出ることがあります。
また、テーマのアップデートがあるとせっかく修正したフォント情報が上書きされて消えてしまう恐れがあります。
そんな時に便利なのが「子テーマ」です。子テーマとは本物のスタイルシートに変更点を記述するのではなく、別にスタイルシートを作成して、そこにコードを記述することでテーマに変更を反映させるためのものです。
スタイルシートがサイトに反映される際に「親テーマ」の次に「子テーマ」が反映される為、「上書き」のような感覚で活用するものと考えてください。
子テーマを作っておけば親テーマはいじらずにすむので、不具合があった場合は子テーマの記述を削除するだけで問題を解決することができます。
子テーマの作成方法については下記の記事を参照下さい。
ワードプレスのフォントの変更方法
フォントを変更する時はスタイルシートにある「font-family」という項目を変更します。
スタイルシート上の上段を見てみると「font-family: ○○○○」記述されていると思います。
この「○○○○」に好きなフォント名を記述すれば変更することができます。
ただしフォント名は「明朝体」と書いても反映されませんので、CSS上で動作する正式名称を調べて記述するようにしてください。
フォントの種類については総称ファミリ名分類のフォント名一覧が大変参考になります。ページ中の「和文フォント」を参照ください。
ワードプレス管理画面からフォントを変更する
WordPressの管理画面からスタイルシートを変更する方法です。
管理画面左側の「外観」から「テーマの編集」を選択します。
テーマの編集画面が表示されますので、画面右側にある「テンプレート」の中から「スタイルシート（style.css）」を選択します。
スタイルシートの上部に「font-family」の記述がありますので、この項目を編集します。
画像の中でフォント名が沢山、記述されているのは、ブラウザの種類などユーザーの使用環境によって、希望のフォントが表示されない不具合があった場合に「このフォントがダメだったら、こっちのフォントを使ってください」という候補をあげているためです。
フォントを変更する時は「font-family:フォント名;」と記述してください。候補を入れておく時は「,」カンマでフォント名を区切るようにしてください。
上の例では、下記のようなfont-familyを指定しています。
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ pro w3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
指定したフォントをサイト全体に適用したい場合は、CSSファイル中のすでに存在しているfont-family要素とfont要素を全て書き換えます。
下記の「font要素」はフォントのサイズ、色、使用フォントを指定する要素です。
font-familyも同様に修正します。
フォント名の変更が終わったら画面下にある「ファイルを更新」をクリックして終了です。
この作業は親テーマを例に取り上げていますが、子テーマに記述することをおすすめします。
FTPツールでフォントを変更する
FTPツールを使ってスタイルシートをダウンロードして、編集後に再度アップロードする方法です。
まずFTPツールで、テーマのスタイルシートをダウンロードします。
PCに保存されたスタイルシートのファイルを開きます。
スタイルシートのフォントの項目を編集してファイルを保存します。
保存したスタイルシートをFTPツールにアップロードすれば作業は完了です。
テーマの追加CSS機能でフォントを変更する
WordPress4.7にアップデートされてから「追加CSS」という機能が実装されました。
追加CSSに記述をすることによって、スタイルシートをいじらなくても済むので、子テーマを作るのが面倒な方やCSSをいじりたいだけの人には、こちらの方法が最適です。
追加CSSは、管理画面から「外観」「カスタマイズ」の順に進み、テーマのカスタマイズ画面に移ります。
左側のカスタマイズメニューの下段に「追加CSS」の項目がありますので、こちらをクリックします。
こちらにフォント編集の記述をします。
作業が完了したら「保存して有効化」をクリックして完了です。
追加CSSによる編集方法は不具合が起きた際に、こちらの記述を削除するだけで、元の状態に戻すことができるので、初心者の方にもおすすめです。
※CSSファイルが複数存在するテーマがあります。その場合は上記で紹介した「テーマの編集」からでは編集できないことがあります。CSSが複数ある場合はFTPツールなどでCSS関連のファイルを全て取得し、書き換え、書き換えたファイルをアップロードする方法が好ましいです。
有名サイトのワードプレスのフォントセット
ここでは例として情報発信で有名な企業サイトで使われているフォントを紹介します。
バズ部
WordPressに情報だけではなく、コンテンツマーケティングやSEO、ソーシャルメディアなど、ITに関する様々な情報を発信している「バズ部」がメインで使用しているフォントは「游ゴシック」
游ゴシックはWindowsやMacにも入っているスタンダードなフォントでゴシック体特有の読みやすい形とコンパクトにまとまった漢字が特徴です。
ブログサイトなどでは非常に多く使われており、ユーザーも游ゴシック体を見慣れている為、読みづらさを感じることは少ないでしょう。
フォントに迷ったら、とりあえず游ゴシックを選択してもいいのではないかと思います。
LIG
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」
このプラグインは、自分のサイトを表示した際に上部に表示されている「管理バー」から、サイトを表示したまま、変更したいテキストを直接、編集できるという便利なプラグインです。
3Dテキストや、カーソルをドラッグした時のアイコンのカラーの変更などもできます。ITスキルのない方でも扱いやすいプラグインです。
Easy Google Fonts
https://wordpress.org/plugins/easy-google-fonts/
Google Fontsが簡単に利用できるプラグイン「Easy Google Fonts」
webフォントを簡単に使いたいなら、こちらがおすすめです。記事、見出し、タイトルなど、各項目でカラーやフォントを選ぶことができます。
デバイスによって違うフォントになることを防ぐことができるので、サイトの見栄えを一定に保つことができる点が素晴らしいですね。
フォントが良い感じに変更されているテーマ
ワードプレスで日本人が制作したテーマは初めからフォントが良い感じに調整されています。
その中で3つ紹介したいと思います。
Twenty Seventeen
https://ja.wordpress.org/themes/twentyseventeen/
WordPressのデフォルトテーマである「Twenty Seventeen」
様々な世界の言語に対応しており、もちろん日本語のフォントも設定済みです。
デフォルトで設定されているフォントは「ヒラギノ角ゴシック」「メイリオ」「サンセリフ」とゴシック系のフォントに設定されています。
Simplicity
シンプルでSEO対策済みの無料テーマ「Simplicity」
国内産のテーマなので、日本語のフォントも問題なく対応しています。
Simplicityで使用されているフォントも「ヒラギノ角ゴシック」「メイリオ」の
ゴシック系です。シンプルなテーマにゴシック体がよくマッチしています。
Xeory
バズ部が制作して実際にサイトに使用している無料テーマ「Xeory」
このテーマのデフォルトで設定されているフォントは「游ゴシック」「ヒラギノ角ゴ」「メイリオ」となっています。やはり、このテーマもゴシック系で設定されています。テキストの読みやすさはゴシック系が一番ですね。
フォントやデザインはエンゲージメントや滞在時間に影響します。読みづらいと疲れてしまいますからね。当サイトも字の大きさ、フォント、字間には気をつけています。
ご自身での調整が面倒であったり出来ない場合は有料テーマを検討してみても良いかと思います。抜群のコスパ！ワードプレスおすすめ有料テンプレート18選のページもご参照ください。
まとめ
webサイトを運営していく上でテキストの表示は非常に重要な要素の1つです。
ここぞという時に明朝体を大きな文字で使ってみたりすることで、テキストで伝えたい内容を、より明確にユーザーにイメージさせることができます。
どのようなサイトなのかによっても選択するフォントは変わってきます。
是非、サイトイメージに合ったフォントを選んでみてください。