スポンサーリンク

[WordPress]「このページの先頭に戻る(Back To Top)」のプラグインを試してみた


スポンサーリンク

medium_2913018697
photo credit: Peregrino Will Reign via photopin cc



はじめに

年末を迎えるにあたり忙しくてなかなかWordPressにかける時間がとれない@fwhx5296ことシゲちゃんです。

そんな中、サクッとインストールしてちょっと便利になるプラグインをご紹介したいと思います。ご存じの方のほうが多いかと思いますが、備忘録のためとまだご存じない方がおられるかもしれないので、エントリーさせて頂きます。

「WP To Top」というプラグイン

このプラグインを導入すると、画面の右もしくは左下に「画面のTopに戻る」という帯が表示されるようになります。
スクリーンショット 2012 12 17 10 18 51 PM 2

この赤い帯をクリックすると、ニュルニュル〜っとそのページの先頭に戻ることができます。ネットサーフィンをしているとよく見かけます。

この表示を自分好みにカスタマイズしようというのが今回のテーマです。

まずはWordPressの設定画面で文字を「Back To Top」から「ページの先頭に戻る」に変更。また自分のシンボルカラーである淡いブルーにします。

スクリーンショット 2012 12 17 10 05 36 PM

すると、表示は以下のように変化します。当初設定では幅が狭く2段書きになっていました。

スクリーンショット 2012 12 17 10 18 33 PM → スクリーンショット 2012 12 17 10 24 11 PM

この色(#0086AB)はどのように設定下かと申しますと、いつもお世話になっているこちらのエントリーを参考にさせて頂きました。ありがとうございます。

[Я]ブログの配色を見直すため「HUE / 360」を使ってみた : りくまろぐ

また、文字数を多くすると帯内で折り返して2段書きになってしまうため、帯の幅を広げます。(プラグインの編集はバックアップを取られて自己責任でお願いします)

スクリーンショット 2012 12 17 10 20 58 PM

スクリーンショット 2012 12 17 10 21 10 PM

「プラグイン編集」→「WP To Top」にある「編集」をクリックします。

スクリーンショット 2012 12 17 10 21 49 PM

「wp-to-top/css/wp-to-top.css」をクリックし、「width」の数字を大きくします。私の場合は150pxにしました。

ちなみにスマートフォンでみた画像はこちらです。

IMG 9525

パソコンと同じように、右下に「ページの先頭に戻る」が表示されるようになりました。

これで少しは見栄えと使い勝手が向上したかなと思っています。

この記事が気に入ったら
いいね ! してくださいね

Twitter で

コメントはこちら

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

COMMENT ON FACEBOOK

スポンサーリンク

Return Top