Pocket

どうも、しんです。
今回はWP To Topについて解説をします。

WP To Topとは投稿記事のサイドに「始めに戻るボタン」を設置するためのプラグインのこと。

専門的な知識を分かりやすく説明する時や、熱がこもってつい長文になってしまった時などに「何度も見てもらいたい」と思った時はあるのではないでしょうか。

伝えたい内容に合わせて目次を作る事に加えて、スクロールをする必要なく瞬時に記事の冒頭に戻ることが出来たら読者にとってのユーザビリティも向上するはずです。

WP To Topを導入すればボタン一つでその希望は叶います。

さらに、難しいコードを入力する必要はなく、プラグインの導入と少しの設定だけで簡単にアイコンを設置することができます。

WP To Topのインストール


それではCategory Orderのインストールを行いましょう。
wordpres管理画面のプラグインの項目から新規追加を選択してください。


プラグイン追加の画面に切り替わったら、右上の検索バーにWP To Topと入力。
そうすると、検索結果の最初の方に次の画像のプラグインが表示されています。


今すぐインストールを行い、最後に有効化を選択すると完了です。

もし、プラグイン名を見つけられないといった場合は作者の Asvin Ballooの名前を検索して見てください

また、使用しているテンプレートによって最初からページを戻るボタンが設置されている場合があるので一度ご確認ください。

WP To Topの初期設定での表示について


WP To Topのインストールが完了すると、すぐに記事に「上に戻る」ボタンが設置されます。
試しに設定後の画面を見て見ましょう。


記事のリンクを開いてすぐの画面です。
これは読み始めてすぐの部分なので上に戻ることはないですね。
それでは、少しだけカーソルを下に移動して見ましょう。


画面の右下にご注目ください。
上に向いた矢印のマークが表示されています。
このボタンをクリックすると、瞬時に上の方に自動で画面が戻るようになります。

このボタンを設置することにより、わざわざ読者がカーソルを何度も上にスクロールする必要もないですし、サイドバーや他の表示にも目が向き、サイトの滞在率を上げたり、利便性が向上することに繋がります。

ボタンのカスタマイズ設定


実はこのボタン、好きなようにデザインやカタチをアレンジすることが出来るのです。
デフォルトのボタンを自分好みなものに変更する方法について見ていきましょう。


管理画面の設定から新しく追加されたWP To Topを選択。


WP To Topの設定画面へと切り替わりました。
上から順番に解説します。

Background color
 ボタンの背景の色の変更。
サイトのデザインとの調和を踏まえて色味を決めましょう。

Foreground color
ボタンの文字の色の変更。

Icon Type
ボタンのデザインを12種類の中から好きなタイプに変更

Icon Size
ボタンの表示サイズを変更

Icon Location
アイコンの配置をRighr(右)・Left(左)から変更

最後にページの一番下にある「変更を保存」をクリックして設定反映をしたら完了です。


一例として変更したものは次の3つ。

Background color:グリーン
Foreground color:ブラッック
    Icon Size:1


この様な表示となりました。
簡単に文字色やサイズなど変更出来るので何通りか試して自分好みのもにしましょう。

今回はWP To Topについて解説をしました。