WordPressでフォントサイズ切替機能を追加するプラグイン

かつてOperaブラウザが画面の拡大縮小機能を実現したときは驚きましたが、 今や大抵のブラウザがは自由自在に拡大縮小出来る様になりました。 ユーザービリティ上、フォントサイズを拡大させることもブラウザで実現出来る訳です。

フォントサイズ切替機能がそれでも必要な理由

それでもブラウザの拡大縮小機能は一般にそれほど周知されているとは言えませんし、 それ処か馴れない人が思わぬ操作で画面が拡大されると戸惑う場面さえ見受けられます。 直し方が分からなくなって困惑しているのですね。

またブラウザの拡大機能だと画面が拡大するので フォントの大きさだけでなく回りも一緒に大きくなりますから、 横に広がった文章が画面に収まりきらない場面も出て来ます。 スマートフォンなどでしばしば見られますが、 画面の拡大、縮小若しくはスクロールで文章を読むのはストレスが堪るものです。

フォントだけ、文字の大きさだけが切り替わればそんなストレスも堪りませんから まだまだフォントサイズ切替機能も捨てたものではないのかも知れません。

スポンサーリンク

本ブログで実現した記事

実は本ブログでも以前フォントサイズ切替機能について記事をものし、 2012年8月10日に至る現在も機能は実装されたままですから、 フォントの大きさを変化させられます。

文字(フォント)サイズ切替機能のブログへのjQueryを使った設置

記事は2012年3月21日の上にリンクを貼ったものがそれに該当し、 jQueryと言うjavascriptライブラリを利用して実現していますね。

左欄の下の方に 文字サイズ切替 なるメニューが用意され、その下には 小、中、大 とボタンを用意してありますから興味のある方はクリックして見て下さい。 ブログ記事のフォントサイズだけが大きさを変化させると思います。

WordPressで実現する

さて、今回この機能をWordPress上で実現したいと思います。 本ブログで実現した方法でも可能なのは間違い有りませんが、 折角WordPressであるのならば是非ともプラグインでお手軽に実現したいものです。

そう思ってプラグインを探してみるとどうやら WP-chgFontSize なるプラグインが該当するようです。 早速本ブログ2012年8月8日の記事 WordPressマルチサイトでプラグインをインストールする に習ってWordPress上でプラグイン検索して見るのですが、検索結果に現れて来ません。

WP-chgFontSize

不思議に思ってWordPressの本家サイトを見てみれば確り 上にリンクを貼った専用ページも用意されています。 しかしよく見てみれば其処には This plugin hasn't been updated in over 2 years. と2年もの間アップデートがなされていない状況が記されています。 この為プラグインの検索結果にも非表示とされているのかも知れません。 どうやらメンテナンスは既に放棄されている可能性が高そうですので、 使用する際にはそれを鑑みた上での覚悟が必要となりそうです。

WP-chgFontSizeのインストール

プラグインとして検出されませんので専用ページからZIPファイルをダウンロード、 解凍の後、WordPressのプラグインフォルダにアップロードします。 するとプラグインとして表示される筈ですので有効化します。

有効化すればWordPressメニューの 設定 には Font Size なる項目が表示され、また概観メニュー下層の ウィジェット 画面に遷移すれば 利用できるウィジェットWP-chgFontSize が見付かるでしょう。 これをメインサイドバーにでも放り込んでやれば其処にフォントサイズ切替スイッチが表示される寸法です。 本記事冒頭右上の図がその状態に該当します。

WP-chgFontSizeの設定

設定からFont Sizeを選択すれば以下の様な設定画面に遷移するでしょう。

上図は手元で適当に入力した設定を掲載しました。 DIV Base Element は変化するDOMを指定します。 WordPressの標準テンプレートでは entry-content でブログ記事の本文だけが変化します。

Font Size では Min は最小サイズを、 Max は最大サイズを、 Interval は最大と最小を区切る間隔を記し、 Units はそのサイズに於ける単位、 Default Font Size は何も設定が保存されていない状態で表示されるサイズです。

次の4つのチェックボックスは独立に設定可能で 赤数字で記したものと対応する表示を以下に記します。

  1. Text
    プルダウンメニューによるフォントサイズの選択
  2. Image
    拡大、縮小による両方向へのフォントサイズの選択
  3. Steps
    直接指定によるフォントサイズの選択
  4. Default
    Default Font Sizeで指定したフォントサイズへのリセットボタン

設定が決まれば Update Options » をクリックして保存します。

以上、手元の環境は2012年8月5日時点で最新のWordPressバージョンである 3.4.1の日本語版を用いていますが、 問題なく機能しました。