ページ最上部へのリンクボタンが簡単に設置できるWordPressプラグイン「Dynamic “To Top” Plugin」

WordPressでいくつかサイトやブログを作っていると、いつも使う「定番のプラグイン」があるのですが、きょうはその中のひとつ「Dynamic “To Top” Plugin」の使いかたをメモします。押すとページ最上部へするするっと移動できるボタンがかんたんに設置できるプラグインです。

使用するプラグイン

「Dynamic “To Top” Plugin」 [browser-shot url=”http://wordpress.org/plugins/dynamic-to-top/” width=”610px”]
[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]WordPressのプラグインページ：WordPress › Dynamic “To Top” Plugin « WordPress Plugins[/icon-box][clear]
[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]開発者さまのプラグインページ：Dynamic To Top Plugin for WordPress | Matt Varone | Creative Web Developer[/icon-box][clear]

表示イメージ

ページの最下部などにこんなかんじでボタンを表示できます。押すと画面がページの最上部に移動するボタンです。

プラグインのインストール

まず、プラグインをインストールします。 WordPress管理画面の［プラグイン］＞［新規追加］から「Dynamic “To Top” Plugin」を検索して、

検索結果に表示された「Dynamic “To Top” Plugin」の「いますぐインストール」をクリックします。

インストールが終わったら「有効化」します。

プラグインの設定

プラグインを有効化すればページ最上部へのリンクボタンが表示されますが、動きや見ためを変えることもできます。

まず、プラグインの設定画面を開きます。WordPress管理画面の［外観］＞［To Top］をクリックします。

開いた画面で次の設定ができます。

動きの設定

ボタンをクリックしたときの動作やボタンの設置位置など、以下の項目が設定できます。

• Scroll time：ボタンをクリックしてページ最上部へ戻る際のスクロールの速さ
  →　スライダーを右に動かすほどスクロールがゆっくりになります
• Fade-in distance：ボタンを表示する距離
  →　ページの最上部から何ピクセル離れる（スクロールする）とボタンを表示するかを設定できます
• Easing：スクロール時の動作
  →　ページ最上部にスクロールするときの動きかたを変えられるようです（わたしの環境だとどれも変わりがないのですけれど、いくつか選んでお試しされるのがよいかと思われます）
• Position：ボタンの設置位置
  →　画面のどこ（「左上」「右上」「左下」「右下」）にボタンを設置するかを選べます
• Prevent on mobile：モバイルでの表示
  →　モバイル環境でボタンを表示するかどうかを選べます

見ための設定

ボタンの色やサイズなど、以下の項目が設定できます。
なお、設定を変えると、プレビューに反映されるので便利です。プレビュー部分の背景色も、黒・白・グレーの中で変更できます。

• Text version：ボタンの中身テキストにするかどうか
  →　「Yes」にするとこんなかんじ
  

• Button text：ボタンの中身に表示するテキストの内容
  →　上記画像の「To Top」の部分の文字が変えられます（日本語もOKでした）
  
• Top/bottom padding：ボタンの上下の余白
  →　ボタン内の上下の余白を設定できます。余白を大きくするほどボタンの高さが大きくなります。
  
• Sides padding：ボタンの左右の余白
  →　ボタン内の左右の余白を設定できます。余白を大きくするほどボタンの幅が大きくなります。
  
• Background color：ボタンの背景色
  
• Border color：ボタンの枠線の色
  
• Border width：ボタンの枠線の幅サイズ
  
• Border radius：ボタンの枠線の角丸サイズ
  
• Inset highlighting：ボタンの内側にハイライトを入れるかどうか
  ↓　ちょっとわかりにくいかもしれませんが、ボタンに立体感が出ます
  
• Shadow：ボタンの外側に影を入れるかどうか
  ↓　ちょっとわかりにくいかもしれませんが、ボタンが浮いてるように見えます
  

以上で設定は完了です。

まとめ

1ページあたりの分量が長くなるとページトップへのリンクを設置したくなりますが、記事内に都度リンクをテキストで書き込むのも手間ですし、いつでも同じ位置にボタンを表示してくれるこのプラグインはとても便利です。見ためもカスタマイズできるので、どんなサイトやブログでも違和感なくボタンが置けるのがよいですね。