WordPressテーマのフォントを自由に変更する方法!Easy Google FontsとCSS活用ガイド

WordPressサイトでフォントを変更したいと思ったことはありませんか?カスタマイザーで新しいフォントを選ぶだけなら難しくありません。ところが、テーマに標準搭載されていないフォントを使いたい場合や、変更したい要素にフォント設定のオプション自体が存在しない場合には、ひと工夫が必要になります。

この記事では、プラグインとChrome拡張機能を組み合わせて、WordPressテーマのあらゆるフォントを思いどおりに変更する方法を詳しく解説します。

カスタマイズ可能なフォントを増やす

まず、選択できるフォントを増やすために、「Easy Google Fonts」プラグインをサイトにインストールしましょう。

1. 管理画面の「プラグイン」→「新規追加」に移動します。
2. 「Easy Google Fonts」と検索します。
3. 「今すぐインストール」をクリックし、続いて「有効化」をクリックします。
4. これでサイトで選べるフォントの種類が大幅に増えます。変更するには、カスタマイザー(「外観」→「カスタマイズ」)を開きます。

5. 「Typography」→「Theme Typography」をクリックします。

6. ドロップダウンの矢印をクリックして下へスクロールすると、利用可能なフォントがずらりと並んでいるのがわかります。
7. 使いたいフォントをクリックして選択すれば完了です。

テーマ側で最初からカスタマイズ可能になっているテキストなら、このプラグインを使ったフォント変更はとても簡単です。しかし、特定のテキストだけ別のフォントに変えたいのに、その変更箇所がどこにも見つからない――ここが悩ましいところです。

こうした部分をカスタマイズするには、該当箇所のCSSコードを直接変更する必要があります。ただしCSSは表には現れないため、まずその記述場所を突き止めなければなりません。

必要なChrome拡張機能を導入する

Google Chromeブラウザで「WhatFont」という拡張機能を検索し、インストールして実行を許可します。

有効化すると、WhatFontはあらゆるウェブサイト上のフォントを識別できるようになります。気に入ったフォントを自分のサイトにも使いたい場合は、WhatFontを起動した状態でテキストにマウスを合わせるだけで、フォント名が表示されるので非常に便利です。

次にインストール・有効化すべき拡張機能は「Firebug Lite」です。サイトのコードを表示し、CSSプロパティをリアルタイムで編集できます。この拡張機能を使えば、コード内でテキストの位置を特定しながら、フォントを簡単に見つけて変更できるようになります。

現在使用中のフォント名を調べる

まず、テーマが現在使用しているフォントの名前を確認しましょう。

1. アイコンをクリックしてWhatFontを有効にします。
2. 調べたいフォントの上にマウスを合わせます。

3. 表示されたフォント名をメモします。
4. 確認が終わったらWhatFontをオフにします。

CSSの該当箇所を特定する

次のステップは、そのフォントが記述されているCSSをコード内で見つけることです。

1. 先ほどと同じ手順でカスタマイザーを開きます。
2. Firebug Lite(虫とドライバーのアイコン)を起動します。
3. Firebugを有効にすると、画面下部にサイトのコードが表示されます。

このコードを扱う際は、特にCSSに慣れていない方は十分な注意が必要です。とはいえ、手順にきちんと従えば、サイトを壊すことなくフォントを安全に変更できるはずです。作業を始める前に、必ずサイトのバックアップを取っておくことをおすすめします。

それでは、変更したいテキストの現在のフォントを探していきましょう。

1. 「CSS」タブをクリックします。

2. style.cssファイルを選択します。(かなり長いファイルです)

3. Ctrl + F を押して検索ボックスを開き、メモしておいたフォント名を入力します。
4. この例ではHelveticaを検索しています。オレンジ色でハイライトされているのが、スタイルシート内でのそのフォントの位置です。

5. フォントの記述場所をハイライトしてコピーします。上の画像では黄色で示している部分です。同じフォントが複数箇所に記載されている場合は、そのうちの一つだけをコピーしてください。

フォントコントロールを作成する

フォントコントロールは、「変更したいフォントがCSSのどこで使われているか」をプラグインに伝えるための設定です。このステップは多少の試行錯誤が必要になることがあります。特に、目的のフォントがサイト内の複数の場所で使われている場合はそうです。

1. 管理画面に戻り、「設定」にマウスを合わせて「Google Fonts」をクリックします。
2. 「Create a new font control(新規フォントコントロールを作成)」をクリックします。

3. 後で見分けられるよう、対象となる場所がわかる名前に変更します。
4. CSSリストからコピーした記述場所を「CSS Selectors(CSSセレクター)」欄に貼り付けます。
5. 「Force Styles Override」にチェックを入れます。
6. 保存します。

変更結果を確認する

カスタマイザーに戻り、フォントを変更したい場所を探します。先ほど作成したフォントコントロールのドロップダウンボックスを見つけて開き、使いたいフォントを選択しましょう。うまくいけば、クリックした瞬間にフォントが切り替わります。

もし反映されない場合は、フォントコントロールに戻って貼り付けたセレクターを削除し、元のフォントが記載されていた別の場所を指定して再挑戦してみてください。何度か試さないとうまくいかないこともあるので、焦らず取り組みましょう。

定番のテーマを使っていても、WordPressテーマの任意のフォントを変更できれば、サイトに他にはない個性的な印象を与えられます。サイトを最新の状態に保ちながら、ぜひこの方法を試してみてください。