Warning: Trying to access array offset on value of type bool in /home/usortm/usortblog.com/public_html/wp-content/themes/cocoon-master/lib/utils.php on line 2632

Warning: Trying to access array offset on value of type bool in /home/usortm/usortblog.com/public_html/wp-content/themes/cocoon-master/lib/utils.php on line 2632

Warning: Trying to access array offset on value of type bool in /home/usortm/usortblog.com/public_html/wp-content/themes/cocoon-master/lib/utils.php on line 2660

最初に戻るボタンが簡単に入るプラグイン WP To Top を入れました

この記事は約2分で読めます。
この記事は最終更新日から8年経過しています。内容が古い可能性があります。

以前からずっとこのblogに「最初に戻る機能」を入れたいなと思っていました。なにせここのblogの記事は非常に長い場合が多いので(^_^;。自分で作ってみようと考えてましたが、のびのびになってしまい、「そうだ!プラグインでできればいいんだ」と、プラグインを入れてみました。
それについて書きます。

スポンサーリンク

WP To Top のインストール

上部に戻るプラグインはたくさんあったのですが詳細を見比べて、管理画面がややこしそうでないことと、ボタンがいくつかから選べるというのが自分の使い勝手的にちょうどよいなと思ったのが決め手でした。

ダッシュボード プラグイン>新規追加

WP To Topと入力してリターン

いますぐインストール をクリック

プラグインを有効化 をクリック

インストールが終了しました。

インストール直後のデフォルト状態を見てみる

インストールしただけでデフォルト状態はどうなっているのかを見てみます。

スクロールをする前は何も出ていません。

スクロールすると、左下に上に戻るボタンが表示されました(^^)/

20150413092502

ボタンをクリックすると、するするーっと上に戻ります。なるほど、簡単ですね。

ボタンの形状や位置をカスタマイズする

ボタンが左に表示されると左ブロックの文字が隠れてしまうので右に表示したいと思います。

またボタンの形状も管理画面から設定できるようなので変えてみます。

ダッシュボード 設定> WP To Topをクリック

このようなシンプルな管理画面です。形や大きさ、背景の色などが変えられそうですね。Scroll Durationはスクロールにかかる時間がミリセコンド(1/1000秒)単位で指定できるようです。

ボタンの形状を違う形にして、表示位置を右側にしてみます。

指定した形のボタンが右側に表示されました。

背景の色をちょっと薄めの灰色 #aaa にしてみました。

こういう感じで、背景色が薄くなりました。

iPhoneでの表示確認

iPhoneでも出るかどうか確認してみました。

IMG_0820

このページの下の方にスクロールしていきます。

IMG_0821

右下に上に戻るボタンが表示されていました(^^)/。タップしたところちゃんと上に戻りました。

プラグインなら簡単で、テーマを変更しても使えるのでやはりこういうプラグインは便利ですね♪

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPressプラグイン
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. […] 最初に戻るボタンが簡単に入るプラグイン WP To Top を入れました […]

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。