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

最も優れたウェブサイトとは、ユーザーに合わせて変化するものであり、その逆ではないことを学びました。これを実現する最も効果的な方法の1つは、訪問者が自分の快適なレベルに合わせてテキストサイズを調整できるフォントリサイザーを追加することです。

フォントのアクセシビリティは、視覚障害のあるユーザーから、さまざまなデバイスやさまざまな照明条件で読んでいる人まで、すべての人に役立ちます。

訪問者がテキストサイズを簡単にカスタマイズできると、滞在時間が長くなり、より多く読み、コンテンツにエンゲージしてサイトでアクションを起こす可能性が高まります。

このガイドでは、WordPressサイトにフォントリサイザーを追加する方法を正確に説明します。いくつかの方法とプラグインをテストし、どのテーマでも機能し、ウェブサイトを遅くしない最も信頼性の高いオプションを見つけました。

ウェブサイトにリサイズ可能なテキストを追加することはなぜ重要なのでしょうか？🤔

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

訪問者がウェブサイトの本文のサイズを変更できるようにすることは、可読性を向上させる簡単な方法の1つです。これにより、ユーザーは好みに合わせてテキストサイズを調整し、サイトにより多くの時間を費やすことができます。

ブラウザの組み込みズーム機能（「CTRLと+」キーを押す）を使用しても、テキストだけでなく、ページ上のすべてのWordPressデザイン要素のサイズが大きくなるだけです。これにより、ウェブサイトのレイアウトが崩れ、ユーザーエクスペリエンスが悪化する可能性があります。

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

• 方法1：プラグインとコードでWordPressフォントリサイザーを追加する
• 方法2：WordPressアクセシビリティプラグインを使用する
• これらのヒントでWordPressサイトをさらに使いやすくしましょう
• 動画チュートリアル

方法1：プラグインとコードでWordPressフォントリサイザーを追加する

ウェブサイトのテキストサイズを変更できるようにする簡単な方法の1つは、Accessibility WidgetのようなWordPressのアクセシビリティフォントリサイザープラグインを使用することです。

これは無料のWordPressプラグインで、サイトのサイドバーにテキストサイズを変更するオプションを追加できます。このプラグインは軽量で非常に使いやすいです。

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

有効化したら、WordPress管理パネルから外観 » ウィジェットに移動します。次に、「+」ボタンをクリックして、サイドバーに「アクセシビリティウィジェット」ブロックを追加できます。

その後、ウィジェットのタイトルとして「テキストサイズを変更」や「テキストをリサイズ」などを入力できます。

次に、ウィジェットの影響を受けるHTML要素またはCSSクラスを選択する必要があります。デフォルトのオプションは、body、paragraph、list items、table cellsです。これらのオプションはほとんどのウェブサイトで機能するはずです。

このウィジェットは最大4つのリサイズオプションを提供します。デフォルトのオプションは90%、100%、110%、120%です。「これらのサイズに設定」フィールドに数値を入力することで、フォントサイズを増減できます。

ウィジェット設定の最後の項目はコントローラーテキストで、これはユーザーが表示するテキストです。テキストサイズのデフォルトのパーセンテージを維持するか、文字を使用して異なるフォントサイズを表示できます。

完了したら、「更新」ボタンをクリックしてウィジェットの設定を保存します。

これで、ウェブサイトにアクセスしてウィジェットが機能しているか確認できるようになりました。ウィジェットはウェブサイトのサイドバーに次のように表示されるはずです。

コントローラーのテキストが目立たないと感じる場合は、CSSを使用して変更できます。

これを行うには、WordPress管理画面に移動し、外観 » カスタマイズを選択するだけです。

これで、クラシックテーマをカスタマイズするためのオプションが表示されるはずです。

ここで、「追加CSS」を選択します。

これで、ウィジェットをスタイル設定するためにCSSコードを追加できます。

追加した内容は以下の通りです。

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

このCSSは、コントローラーテキストの周りに境界線を追加し、太字にして、少しパディングを追加します。ウィジェットの外観に満足したら、「公開」をクリックするだけです。

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

方法2：WordPressアクセシビリティプラグインを使用する

ユーザーがウェブサイトのテキストをリサイズできるようにするもう1つの簡単な方法は、WP Accessibilityを使用することです。このプラグインを使用すると、使用しているテーマに関係なく、サイトにツールバーを追加してテキストサイズを変更できます。

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

アクティベートしたら、WordPress管理パネルからWP Accessibilityページにアクセスしてください。

「アクセシビリティツールバー」セクションで、「アクセシビリティツールバーを有効にする」オプションをクリックし、「フォントサイズ」を選択します。これにより、ツールバーにフォントリサイザーが追加されます。

必要に応じて、コントラストとグレースケールオプションを有効にすることもできます。

さらに、ツールバーがクリックされたときにコンテンツのフォントサイズを変更できます。また、どのサイズを選択すればよいかわからない場合は、ドロップダウンメニューで「デフォルトサイズ」を選択するだけです。

それ以外に、「代替フォントリサイズスタイルシートを使用」オプションを有効にすることをお勧めします。このオプションが有効になっていると、ユーザーはデフォルトのフォントサイズと、より大きく読みやすいバージョンのテキストを簡単に切り替えることができます。

プラグインの他の設定を自由に有効にしてください。

完了したら、「ツールバー設定を更新」ボタンをクリックするだけです。

これで完了です！

フロントエンドでのフォントリサイズツールバーは以下のようになります。

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

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

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

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

動画チュートリアル

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

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