WordPress個別サポート

WordPressに限りませんが、ページの本文の文字サイズを大きくしたり、小さくしたくなることがあります。クリックすると文字サイズが切り替わる「大」「中」「小」ボタンが定番です。

「大」「中」「小」ボタン

クリックすると文字サイズが切り替わるボタン

jQuery Text Resizerを使うと、このような「大」「中」「小」ボタンを作成することができます。また、jQuery Cookieと合わせて使うことで、ページを移動しても文字サイズの設定が保持されたままになり便利です。以下、「大」「中」「小」ボタンの作り方を説明します。

スポンサーリンク

jQueryライブラリのダウンロード

以下のサイトよりjQuery Text ResizerjQuery Cookieをダウンロードします。

  • jQuery Text Resizer --- 文字サイズを変更するライブラリ
    上記のURLから「ダウンロード」をクリックします。
    jQuery Text Resizerのダウンロード

    jQuery Text Resizerのダウンロード

  • jQuery Cookie --- ページの状態を保持するライブラリ
    上記のURLから「Clone or download」‐「Download ZIP」をクリックします。
    jQuery Cookieのダウンロード

    jQuery Cookieのダウンロード

jsファイルをテーマフォルダにコピー

ダウンロードしたファイルを解凍して、次のファイルをテーマフォルダ(または子テーマフォルダ)にコピーします。

テーマフォルダにコピーするファイル
  • jquery.textresizer.js
  • jquery.cookie.js
jquery.cookie.jsは解凍したファイルのsrcフォルダに入っています。

子テーマのフォルダにコピーしたイメージは次のようになります。

2つのjsファイルを子テーマフォルダにコピー

2つのjsファイルを子テーマフォルダにコピー

jQueryライブラリの読み込み

jQueryライブラリを読み込むため、header.phpに次のコードを入力します。具体的にはheadタグが終了する直前あたりです。

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.textresizer.js"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
    jQuery( "#textsize a" ).textresizer({
        target: "#content",
        // type:   "fontSize",
        sizes:  [ "20px", "16px", "12px" ]
    });
});
</script>

上記のコードは以下のサイトから引用して一部修正しました。
http://mariojvargas.com/projects/jquery-text-resizer-plugin/

jQueryの記述オプションも上記のサイトにサンプルがあるので参考にしてください。

「sizes」の3つのフォントサイズ("20px", "16px", "12px")がそれぞれ「大」「中」「小」に対応しています。サンプルの動作を確認して、自由に修正してください。また、「target」の「#content」はテーマに依存します。上記はBizVektorの例ですが、使用中のテーマのコンテンツエリアに設定されたidやclass名に合わせないとうまくいきません。

フォントサイズ変更リンクの設置

「大」「中」「小」のリンクを設置すれば完成です。たとえば、「外観」-「ウィジェット」メニューでテキストウィジェットを使って、次のようなHTMLを任意のウィジェットに入力します。

<div id="textsize">
<a href="#">大</a> 
<a href="#">中</a> 
<a href="#">小</a>
</div>

「大」「中」「小」の動作確認

サイトを表示して、「大」「中」「小」の動作を確認しましょう。「大」をクリックすると、文字が大きくなります。

「大」をクリックすると文字が大きくなる

「大」をクリックすると文字が大きくなる

ページを移動しても情報が引き継がれるので、フォントサイズは大きいままです。

ページを移動しても文字は大きいまま

ページを移動しても文字は大きいまま

「小」をクリックすると、文字が小さくなります。

「小」をクリックすると文字が小さくなる

「小」をクリックすると文字が小さくなる

あとは「大」「中」「小」の文字を画像に置き換えたり、フォントサイズを調整するなど試行錯誤してみましょう。

BizVektorのカスタマイズ例

BizVektorではリンクをボタン風に見せられるbtnクラスを使って次のようなボタンを作成する方法があります。

<div id="textsize">
<a class="btn btnL"  href="#">大</a> 
<a class="btn btnL"  href="#">中</a> 
<a class="btn btnL"  href="#">小</a>
</div>

ボタンのスタイルを調整するCSSの例は次のようになります。自由にカスタマイズしてください。

#textsize .btn {
    padding: 12px;
}

表示結果は次のようになります。

「大」「中」「小」のスタイルを変更

「大」「中」「小」のスタイルを変更

あとは自由にカスタマイズしてください。

参考にした記事
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート