上へ戻るイメージ

今回は、むぅさん他多数からいただいた質問にお答えします^^

 

右下の「うにゃー」ネコが気になる

当サイトの右下に「うにゃー」というネコがいました。

 

ぽちっとクリックすると、するするーっとページの一番上へ戻れます。

「これどうやるの!?」と質問を多くいただいたので、付け方を解説します^^

 

「ページの一番上へ戻る」ボタンを付ける理由

「ページの一番上へ戻る」のボタンは読者にとって便利です。

とくに、長いページを読み終わったあとに一番上までスクロールさせるのは面倒ですから、1クリックで戻れるボタンはありがたいですね。

キーボードの「Home」キーで戻れることを全員が知っているわけではないです。

時間に余裕があれば、「ページの一番上へ戻る」ボタンを付けましょう。

 

ワードプレスのプラグイン「Go To Top」

当サイトでは、ワードプレスのプラグイン「Go To Top」を使ってました。

プラグインの入れ方は以下をどうぞ。

参考:PV数を上げるブログパーツその1

 

プラグインをインストール後に「設定」の「Go To Top」で設定をします。

「Enable」にチェックするだけで機能します。

プラグインGoToTop設定

  • Text to show:ボタンの言葉
  • Scroll speed:スクロールにかける時間。「1000」は1秒
  • Start position:ボタンが現れるスクロール位置
  • Ease:スクロール演出
  • ButtonView:ボタンの表示方法。文字か画像
  • Show only in posts~:単一記事のみで表示
  • Enable:有効にする

 

これで「ページの一番上へ戻る」ボタンを導入できました。ブログを再読み込みしましょう。

 

当サイトのようにボタンを好きな画像に変える場合は、ButtonViewで「△▲」を選んで以下を行います。

 

「ページの一番上へ戻る」ボタンを好きな画像にする方法

オリジナルの画像をにすると個性が出ていいですね^^

ブログに来てくれる人にも楽しんでもらえます。

 

画像の用意

好きな画像にする場合は、あらかじめ画像を用意します。

大きさは、縦200 x 横100くらい。ファイル名は英数字のみ。

用意できたら、「FFFTP」などのソフトでサーバーの以下の場所に画像を置きましょう。

wp-content/plugins/go-to-top/images

 

画像の設定方法

「インストール済みプラグイン」で「Go To Top」の「編集」をクリックします。

画面右側の「go-to-top/css/style-black-arrow.css」をクリックし、以下の行を探します。

background-image: url(../images/black-arrow.png);

 

ピンク色の部分を先ほどサーバーに置いた画像ファイル名に変えれば、完了です。

 

ちなみに、ボタンにマウスを載せたときの言葉を以下の部分で変えられます。

「go-to-top/plugin.php」ファイル

echo ‘<div id=”gtt_go-to-top” class=”gtt_wrapper”><a href=”#” title=”‘ . __(‘ページの一番上へ‘, ‘go-to-top’).'”><span>’;

 

こうした細かい部分にも遊び心を入れると楽しいですね^^

ぜひ、試してください。