WordPressにフォントリサイザーを追加してアクセシビリティを向上させる方法

最も優れたウェブサイトとは、ユーザーに合わせるものであり、その逆ではないことを私たちは学びました。

これを行う最も効果的な方法の1つは、訪問者が自分の快適なレベルに合わせてテキストサイズを調整できるフォントリサイザーを追加することです。

フォントのアクセシビリティはすべての人にメリットがあります。視覚障害のあるユーザーだけでなく、小さなデバイスで読んでいる人や、暗い場所で読んでいる人も助けます。

訪問者がテキストサイズを簡単にカスタマイズできると、滞在時間が長くなり、より多くのコンテンツを読むようになります。また、ウェブサイトへのエンゲージメントも高まる可能性が高くなります。

このガイドでは、WordPressサイトにフォントリサイザーを追加する方法を正確に説明します。

ウェブサイトにリサイズ可能なテキストを追加する理由とは？🤔

ウェブサイトのフォントサイズが小さすぎると、読者は記事を読むのに苦労し、最終的にはサイトから離れてしまうでしょう。

読みやすさを向上させる簡単な方法の1つは、訪問者にウェブサイトの本文をリサイズするオプションを提供することです。これにより、ユーザーは自分の好みに合わせてテキストサイズを調整できます。

ブラウザの組み込みズーム機能（「CTRLと+」キーで呼び出し）について疑問に思っているかもしれません。これは機能しますが、画像やナビゲーションメニューを含む、ページ上のすべての要素のサイズが大きくなります。

フォントリサイザーの方が良い選択肢です。これにより、レイアウトの他の部分はそのままに、テキストサイズのみを拡大できます。

それでは、WordPressで訪問者向けに簡単にリサイズ可能なテキストを追加する方法を見ていきましょう。特定のメソッドにスキップするには、以下のクイックリンクを使用できます。

• 方法1：WordPressアクセシビリティプラグインを使用する（推奨）
• Method 2: Add WordPress Font Resizer With Plugin (Classic Themes Only)
• 動画チュートリアル
• WordPressフォントに関するよくある質問
• これらのヒントでWordPressサイトをさらに使いやすくしましょう

方法1：WordPressアクセシビリティプラグインを使用する（推奨）

ユーザーがテキストサイズを変更できるようにする最も簡単な方法は、WP Accessibilityプラグインを使用することです。これは、あらゆるテーマで機能する便利なツールバーをサイトに追加します。

まず、ウェブサイトにWP Accessibilityプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPress管理ダッシュボードのWP Accessibilityページに移動して、プラグインの設定を構成します。

「アクセシビリティツールバー」セクションまでスクロールします。ここで、「アクセシビリティツールバーを有効にする」のチェックボックスをオンにする必要があります。

「フォントサイズ」オプションもチェックされていることを確認してください。これにより、ツールバーに実際のサイズ変更ボタンが作成されます。

より多くのアクセシビリティオプションを提供したい場合は、「コントラスト」や「グレースケール」などの他の機能も有効にできます。

次に、フォントサイズの設定を探します。「代替フォントサイズ変更スタイルシートを使用する」オプションを有効にすることをお勧めします。

これにより、プラグインが別のスタイルシートを使用してテキストをスケーリングするようになります。これにより、サイトのデザインを壊すことなく、テキストが大きくなり、より読みやすくなります。

完了したら、「ツールバー設定を更新」ボタンをクリックして変更を保存します。

これで、ウェブサイトにアクセスしてツールバーが機能していることを確認できます。通常、画面の横に表示されます。

詳細については、WordPressサイトのアクセシビリティを改善する方法に関するガイドをお読みください。

方法2：WordPressフォントリサイザーをプラグインで追加する（クラシックテーマのみ）

クラシックWordPressテーマを使用している場合は、Accessibility Widgetプラグインを使用して、サイドバーにフォントリサイザーウィジェットを追加できます。

まず、ウェブサイトにアクセシビリティウィジェットプラグインをインストールして有効化します。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、ダッシュボードで 外観 » ウィジェット に移動します。「アクセシビリティウィジェット」ブロックを見つけて、サイドバーエリアに追加します。

追加したら、ウィジェットの設定をカスタマイズできます。「テキストサイズ変更」のようなタイトルを入力すると、訪問者はツールが何をするものかを知ることができます。

次に、ウェブサイトのどの部分をリサイズするかを選択する必要があります。デフォルトのオプション（本文、段落、リスト項目、テーブルセル）は、ほとんどのサイトでうまく機能します。

このプラグインでは、最大4つのリサイズオプション（90%、100%、110%、120%）が利用可能です。より大きくまたは小さくしたい場合は、「これらのサイズに設定」フィールドでこれらの数値を調整できます。

最後に、「コントローラーテキスト」の設定を確認します。これは、訪問者がクリックするラベル（例：「A+」、「A-」）です。デフォルトのテキストのままにするか、別のものに変更できます。

「更新」をクリックしてウィジェットの設定を保存します。ライブサイトにアクセスすると、サイドバーにウィジェットが表示されます。

オプション：CSSでウィジェットスタイルをカスタマイズする

テキストリンクが素っ気ない場合は、CSSを使用してボタンのように見せるようにスタイルを設定できます。

外観 » カスタマイズ に移動し、「追加CSS」タブをクリックします。

次のコードを貼り付けると、ウィジェットリンクに境界線を追加し、テキストを太字にすることができます。

.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;
}

注意：このコードは、アクセシビリティウィジェットプラグインが使用する特定のCSSクラスを対象としています。他のツールでは機能しません。

WordPressでカスタムCSSを追加する方法については、こちらのガイドをご覧ください。

見た目に満足したら、「公開」をクリックして変更を保存します。

動画チュートリアル

説明を読みたくない場合は、ビデオチュートリアルをご覧ください。

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

WordPressのフォントに関して、読者から寄せられた質問をいくつかご紹介します。

WordPressでフォントサイズを変更するにはどうすればよいですか？

ブロックエディターのサイドバーにある「タイポグラフィ」設定でフォントサイズを変更できます。テキストブロックをクリックし、右側のパネルを見て、サイズオプション（S、M、L、XL）を調整するだけです。サイト全体を変更するには、テーマに応じてグローバルスタイルまたはテーマカスタマイザーを使用できます。

WordPressでカスタムフォントを追加する方法は？

カスタムフォントを追加する最も簡単な方法は、Custom Fontsのようなプラグインを使用することです。コードを書かずにフォントファイルをアップロードしたり、Google Fontsに接続したりできます。コードに慣れている場合は、CSSを使用して手動でフォントを追加することもできます。

WordPressでフォントサイズを変更できないのはなぜですか？

フォントサイズオプションが表示されない場合、ブロック設定メニューに隠されている可能性が高いです。右側のサイドバーで、「タイポグラフィ」の横にある3つのドットのメニューをクリックして、フォントコントロールの全リストを表示してください。

WordPressでフォントの色を変更するにはどうすればよいですか？

ブロック設定サイドバーでフォントの色を変更できます。変更したいテキストを選択し、右側の「カラー」セクションを見つけて、「テキスト」をクリックしてパレットから新しい色を選択してください。

ヘルプが必要な場合は、WordPressでテキストの色を変更する方法のチュートリアルを参照してください。

これらのヒントでWordPressサイトをさらに使いやすくしましょう

サイトを使いやすく、見栄えを良くしたいですか？これらの役立つガイドをご覧ください。

• WordPressに矢印キーキーボードナビゲーションを追加する方法 – サイト内を移動しやすくします。
• WordPressウェブサイトの配色をカスタマイズする方法 – サイトを見栄え良く、読みやすくするための適切な色を選びましょう。
• WordPressにプリローダーアニメーションを追加する方法（ステップバイステップ） – サイトにクールなローディング画面を追加します。
• WordPressウェブサイトにダークモードを簡単に追加する方法 – ユーザーが希望する場合に、より暗いテーマに切り替えられるようにします。
• モバイルフレンドリーなWordPressサイトを作成する方法 – スマートフォンやタブレットでサイトがうまく機能することを確認してください。
• WordPressでウェブサイトのデザインフィードバックを得る方法（ステップバイステップ） – あなたのサイトのデザインについて、人々にどう思うか尋ねる方法を学びましょう。
• WordPressでテキストを強調表示する方法（初心者ガイド） – ページ上で重要な単語を目立たせる方法を学びましょう。

この記事がお使いのWordPressサイトにリサイズ可能なテキストを追加するのに役立ったことを願っています。また、おすすめのWordPressドラッグ＆ドロップページビルダーと、WordPressテーマの更新に関する完全ガイドもぜひご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。