最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressテーマのフォントを変更する方法(簡単な5つの方法)

WordPressサイトが、あなたが目指している見た目や雰囲気をうまく捉えられていないと感じていませんか?

コンテンツに多くの注意を払っている場合、デザインにも同じ注意を払うのは理にかなっています。時には、フォントを更新するような小さな調整でも、大きな違いを生むことがあります。

タイポグラフィは、テキストの外観だけではありません。それは、人々がどのように読み、サイトをナビゲートしているときにどのように感じ、ブランドをどのように認識するかに影響を与えます。

適切なフォントは、可読性を高め、信頼を築き、サイトに洗練されたプロフェッショナルな雰囲気を与えることができます。そして一番良いところは?カスタムルックを手に入れるのは、あなたが思うよりも簡単です!

このガイドでは、WordPressテーマのフォントを変更する簡単な5つの方法を紹介します。あなたに最適な方法を選べば、わずか数分で新鮮でパーソナライズされたデザインになります。🧑‍🎨

WordPressでフォントを変更する方法

WordPressサイトのフォントを変更する理由

フォントは、ウェブサイトのデザインとユーザーエクスペリエンスに大きな役割を果たします。訪問者がサイトにアクセスした瞬間から、WordPressサイトをどのように認識するかに影響を与えます。

テキストが読みにくい場合、訪問者はイライラして離脱する可能性が高くなります。適切なフォントは、人々がコンテンツを楽に読めるようにし、より長く滞在することを促します。

タイポグラフィは、ブランドの個性を伝え、信頼を築きます。適切に選択されたフォントは、ビジネスをよりプロフェッショナルで信頼できるものとして、オーディエンスに印象づけることができます。

ほとんどのWordPressテーマには優れたデフォルトフォントが付属していますが、サイトを真に際立たせるには、それらを変更することが重要です。

幸いなことに、WordPressでフォントを変更する方法はいくつかあります。いくつかの異なる方法を紹介します。以下のリンクをクリックすると、任意のセクションにジャンプできます。

準備はいいですか?早速始めましょう。

方法1:WordPressテーマカスタマイザーでフォントを変更する

サイトのフォントを変更する簡単な方法は、WordPressテーマカスタマイザーにアクセスすることです。これにより、ウェブサイトの外観を変更でき、リアルタイムプレビューが表示されます。

📝 注意: カスタマイザーのメニューオプションが見つからない場合は、テーマでフルサイト編集が有効になっている可能性が高いため、別の方法を使用するか、テーマを切り替える必要があります。

このチュートリアルでは、Sydneyテーマを使用します。

ただし、WordPressのテーマによってオプションが異なる場合があることに注意してください。一般的には、テーマ固有の「フォント」または「タイポグラフィ」設定をカスタマイザーで探すことになります。場合によっては、「グローバル」設定セクションの下にあることもあります。

開始するには、WordPressダッシュボードから外観 » カスタマイズに移動してください。

WordPressテーマカスタマイザーへのアクセス

これにより、WordPressテーマカスタマイザーが起動します。

Sydneyテーマには、「タイポグラフィ」セクションがあり、サイトの主要セクションのスタイルを変更するオプションがあります。フォントを変更するには、左側のメニューから「タイポグラフィ」オプションをクリックします。

タイポグラフィ設定に移動する

次の画面で、「見出し」と「本文」のタイポグラフィをカスタマイズするオプションが表示されます。

「見出し」オプションをクリックしてください。

見出しのタイポグラフィ設定を開く

ここから、「フォントファミリー」セクションで異なるフォントを選択できます。

これらはテーマによって提供されるGoogleフォントであり、ドロップダウンメニューからオプションを選択すると、ウェブサイト全体のヘッダーが変更されます。

フォントを選択すると、画面の右側にあるライブプレビューでどのように見えるかを確認できます。たとえば、ここではテストサイトで「Bellefair」フォントがどのように見えるかを確認できます。

ヘッダーのタイポグラフィを変更するには、フォントファミリーを選択してください

それに加えて、その他のフォント設定もカスタマイズできます。

例えば、フォントの太さ、フォントスタイル、行の高さ、文字間隔、テキスト装飾などを変更できます。

その他のフォント設定を調整する

デスクトップ、モバイルデバイス、タブレットのフォントサイズを調整して、すべての画面でタイポグラフィが最適に見えるようにすることもできます。

完了したら、「公開」または「更新」ボタンをクリックすることを忘れないでください。

これで、ウェブサイトにアクセスして新しいフォントを確認できます。たとえば、デモサイトでは、本文フォントをSource Sans Proに、見出しフォントをPlayfair Displayに変更しました。

フォント変更プレビュー

すべてのWordPressテーマがSydneyが提供するのと同じ機能やカスタマイズを提供するわけではないことに注意することが重要です。テーマがそれを提供しない場合は、次の方法に進んでください。

方法2:WordPressフルサイトエディターでフォントを変更する

Twenty Twenty-TwoのようなブロックベースのWordPressテーマを使用している場合は、フルサイトエディター(FSE)を使用してサイトのフォントを変更できます。

フルサイトエディターを使用すると、WordPressブロックエディターを使用して投稿やページを編集するときと同様に、ブロックを使用してWordPressテーマをカスタマイズできます。

このチュートリアルでは、Twenty Twenty-Twoテーマを使用します。開始するには、WordPress管理パネルから外観 » エディターに移動してください。

フルサイトエディターに移動

これにより、WordPressテーマのフルサイトエディターが開きます。

次に、右上隅にある「スタイル」アイコンをクリックし、「タイポグラフィ」オプションをクリックします。

スタイル設定を開く

その後、テキストやリンクなどの要素を選択して、タイポグラフィを変更できます。

要素として「テキスト」を選択し、フォントを変更するために「フォント」ドロップダウンメニューをクリックします。

FSEでフォントを変更する

完了したら、「保存」ボタンをクリックするだけです。

これで、フルサイトエディターを使用してフォントを正常に変更しました。カスタムフォントをWordPressサイトに追加して、フルサイトエディターで変更することもできます。

🔗 関連: スタイルに合い、FSE機能を最大限に活用できるテーマを見つけるために、フルサイト編集に最適なブロックテーマのまとめをご覧ください。

方法3:WordPressプラグインを使用してWordPressフォントを変更する

WordPressフォントを変更するもう1つの方法は、Fonts PluginのようなWordPressプラグインを使用することです。

これは、数千ものGoogleフォントやさまざまなフォントバリアントをウェブサイトに追加できるWordPressタイポグラフィプラグインです。

まず、Fonts Pluginをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化すると、WordPressダッシュボードにフォントプラグインのクイックスタートガイドが表示されます。PDFを入手するにはメールアドレスを入力するか、「フォントのカスタマイズ」に移動して編集を開始してください。

フォントプラグインのフォントをカスタマイズメニュー項目

これにより、テーマのカスタマイザーでプラグインのカスタマイズオプションが開きます。

このページで、「基本設定」メニューをクリックしてください。

基本設定

メニュー項目内に入ったら、コンテンツ、見出し、ボタンのタイポグラフィのカスタマイズを開始できます。

各テキスト要素のドロップダウンを展開し、好みのフォントを選択するだけです。

フォントプラグインのフォントドロップダウン

完了したら、「公開」ボタンをクリックすることを忘れないでください。フォントプラグインが変更を更新します。

方法4:WordPressテーマビルダーを使用してフォントを変更する

コードを編集せずにカスタムテーマを作成できる強力なWordPressテーマビルダーはたくさんあります。これらを使用して、ウェブサイトのさまざまな要素のフォントを変更できます。

このチュートリアルでは、カスタムテーマをコードを一行も触らずに作成できるドラッグアンドドロップビルダーを提供する、SeedProd最高のWordPressランディングページおよびテーマビルダープラグインを使用します。

私たちは、ランディングページやeコマージャーサイト全体を構築するためにSeedProd自体を使用しました。このツールでの経験の詳細については、SeedProdのレビューをお読みください。

SeedProdのホームページ

テーマビルダーが含まれているため、SeedProd Proバージョンが必要になることに注意してください。無料で利用できるSeedProd Liteバージョンもあります。

まず、SeedProdプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。

アクティベートすると、SeedProdのウェルカム画面が表示されます。ライセンスキーを入力し、「キーを検証」ボタンをクリックしてください。ライセンスキーはSeedProdのアカウントエリアで簡単に見つけることができます。

SeedProdライセンスキーをWordPressウェブサイトに追加する

その後、WordPress管理ダッシュボードからSeedProd » Theme Builderに移動できます。

次に、上部にある「テーマ」ボタンをクリックしてください。

カスタムテーマを作成する

ここから、プラグインは選択できる複数のテーマを表示します。

使用したいテーマの上にカーソルを合わせ、クリックします。このチュートリアルでは「Starter」テーマを使用します。

スターターテーマを選択

SeedProdは、さまざまなテーマテンプレートを生成します。

各テンプレートを編集して、WordPressテーマをカスタマイズできます。テーマテンプレートを手動で追加するオプションもあります。

ホームページテーマテンプレートを編集して、さまざまな要素のフォントを変更しましょう。まず、「ホームページ」の下にある「デザインを編集」リンクをクリックできます。

ホームページのデザインを編集

これにより、SeedProdのドラッグアンドドロップテーマビルダーが起動します。左側のメニューから新しい要素を追加し、テンプレートのどこにでも配置できます。

テーマセクションのフォントを変更するには、それを選択するだけです。たとえば、スターターの見出しの下にあるテキストボックスを選択します。

次に、左側のメニューから「高度」タブに移動し、「タイポグラフィ」の前にある「編集」ボタンをクリックします。

テーマビルダーでテキストを選択

その後、選択したセクションのタイポグラフィを編集するための複数のオプションが表示されます。

「フォントファミリー」ドロップダウンメニューをクリックして、テキストのフォントを選択できます。フォントの太さ、フォントサイズの調整、行の高さ、文字間隔、配置、大文字/小文字、その他のオプションもあります。

テーマビルダーでフォントを変更する

これで、この手順を繰り返して、テーマの他の要素のフォントを変更できます。

完了したら、上部にある「保存」ボタンをクリックするだけです。

カスタムテーマとフォントを適用するには、SeedProd » テーマビルダー に移動し、「SeedProdテーマを有効にする」オプションの横にあるスイッチを「はい」に切り替えます。

SeedProdテーマを有効化

ゼロからWordPressテーマを作成したい場合は、カスタムWordPressテーマを簡単に作成する方法に関するガイドを参照してください。

方法5:WordPressコンテンツエディターでフォントの外観をカスタマイズする

コンテンツエディターを使用して、特定のブログ投稿やページにフォントが表示される方法を変更することもできます。

💡 内部情報: この方法の欠点は、新しいフォントがその特定の投稿またはページにのみ適用されることです。つまり、同様のカスタマイズを適用したい他のすべての投稿で、この手順を繰り返す必要があります。

この方法は投稿固有のカスタマイズに非常に便利ですが、サイト全体のフォント変更オプションを探している場合は、他のオプションを検討する必要があります。

WordPressコンテンツエディターを使用してフォントを変更するには、投稿を編集するか、新しい投稿を追加するだけです。一度入ったら、テキストを選択して外観を変更できます。

右側の設定パネルで、「タイポグラフィ」セクションに移動します。次に、「タイポグラフィ」の前にある3つのドットをクリックし、ドロップダウンメニューから「外観」を選択します。

コンテンツエディターでタイポグラフィ設定を開く

これを行うと、「外観」設定が表示されます。

ドロップダウンメニューをクリックして、フォントのスタイルを選択しましょう。たとえば、フォントを太字、細字、斜体、黒、太字斜体、極太などにすることができます。

この設定エリアでは、フォントサイズを変更したり、大文字/小文字を選択したり、色を編集したり、ドロップキャップを有効にしたりできます。

外観スタイルを選択する

完了したら、ページを更新または公開することを忘れないでください。

ボーナスのヒント: WordPressブログにフォントリサイザーを追加する

ブログをよりアクセスしやすく、読者に優しいものにしたいですか?フォントリサイザーを追加することは、それを実現するためのシンプルでありながら強力な方法です。

フォントリサイザーを使用すると、訪問者はWordPressブログのテキストサイズを、読書に合わせて調整できます。これは、視覚障害のあるユーザー、高齢のユーザー、または暗い場所や小さな画面で閲覧しているユーザーに特に役立ちます。

さらに、ブラウザのズーム機能のようにページ上のすべてを拡大してレイアウトを崩してしまうのとは異なり、フォントリサイザーはテキストのみを調整します。これは、デザインを壊すことなく、より良い可読性を意味します。

これは、コンテンツをよりインクルーシブにし、訪問者をサイトに長く滞在させるための配慮の行き届いた追加機能です。

WP Accessibilityプラグインの動作を示すGIF

手順については、アクセシビリティ向上のためにWordPressにフォントリサイザーを追加する方法に関するガイドを参照してください。

WordPressフォントの変更に関するよくある質問

長年にわたり、読者からウェブサイトのタイポグラフィについて素晴らしい質問が寄せられてきました。最も一般的な質問への回答を以下に示します。

ウェブサイト用の無料フォントはどこで見つけられますか?

Googleフォントは人気のあるオプションで、千以上の無料フォントファミリーを提供しています。多くのWordPressプラグインやテーマが標準でサポートしているため、使いやすいです。

ただし、Googleのサーバーから直接フォントを読み込むと、訪問者のIPアドレスがGoogleに送信される可能性があるため、GDPRのような法律の下でプライバシーに関する懸念が生じる可能性があります。

これを回避するには、設定を調整してGoogleフォントをプライバシーに配慮したものにすることができます。または、サイトにフォントをローカルでホストします。

ウェブサイトにはいくつの異なるフォントを使用すべきですか?

サイトをすっきりとプロフェッショナルに見せるためには、2〜3種類のフォントに絞るのが最善です。一般的なアプローチは、見出しに1種類、本文テキストに別の種類を使用することです。

ダウンロードまたは購入したフォントファイルをアップロードできますか?

はい、できます。Fonts PluginのようなプラグインやSeedProdのようなページビルダーを使用すると簡単です。コードに慣れている場合は、CSSを使用して手動でフォントを追加することもできます。

動画チュートリアル:WordPressでフォントを変更する方法

WordPressでフォントを変更する各方法を順を追って説明するステップバイステップのビデオチュートリアルを作成しました。以下のビデオを見て、実際のプロセスを確認してください!🎥👇

WPBeginnerを購読する

WordPressサイトのタイポグラフィをパーソナライズするその他の方法

この記事でWordPressのフォントを変更する方法を学べたことを願っています。次に、次のガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

4 CommentsLeave a Reply

    • そのテーマでは、エディターの「スタイル」>「タイポグラフィ」の下にあり、テーマに含まれるフォントの中から選択できます。

      管理者

  1. フォントプラグインに関するヒントをありがとうございます。私のウェブサイトがあるチェコ共和国では、č、ř、š、ďなどの特殊文字の問題があります。多くのフォントはこれらの文字を正しく表示できないため、適切なフォントセットを選択するのが難しいです。このプラグインは、チェコ語をサポートする正しいフォントセットを見つけるのに役立ちました。

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。