今回は、むぅさん他多数からいただいた質問にお答えします＾＾
右下の「うにゃー」ネコが気になる
当サイトの右下に「うにゃー」というネコがいました。
ぽちっとクリックすると、するするーっとページの一番上へ戻れます。
「これどうやるの！？」と質問を多くいただいたので、付け方を解説します＾＾
「ページの一番上へ戻る」ボタンを付ける理由
「ページの一番上へ戻る」のボタンは読者にとって便利です。
とくに、長いページを読み終わったあとに一番上までスクロールさせるのは面倒ですから、1クリックで戻れるボタンはありがたいですね。
キーボードの「Home」キーで戻れることを全員が知っているわけではないです。
時間に余裕があれば、「ページの一番上へ戻る」ボタンを付けましょう。
ワードプレスのプラグイン「Go To Top」
当サイトでは、ワードプレスのプラグイン「Go To Top」を使ってました。
プラグインの入れ方は以下をどうぞ。
プラグインをインストール後に「設定」の「Go To Top」で設定をします。
「Enable」にチェックするだけで機能します。
- 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>’;
こうした細かい部分にも遊び心を入れると楽しいですね＾＾
ぜひ、試してください。
