自分プロデュース。セルフブランディングを応援する
ブランディングホームページ制作・WEBサイト制作のShape Dream(シェイプドリーム)

「夢「考えを形あるものに。

当サイトへのお問合せは、下記「お問合せ」よりお問合せをお願いいたします。

お問合せはこちら


ページの先頭(トップ)へ戻るWordPressプラグイン「Scroll to Top」を右下に設置



スマートフォンで自分のページを見た時に、「トップへ戻る」手間を感じ、「トップへ戻る」ボタンを設置しました。

WordPressのプラグインで、「トップへ戻る」ボタン設置は、「WP To Top」や「Ax ScrollTo Top」も評価が高く、設置している方も多いと思いますが、なぜだか私のサイトでは表示されず…唯一表示したのが「Scroll to Top」だったので、「Scroll to Top」の設置について投稿します。

 

まず、プラグインを設定するので、左メニューの「プラグイン」→「新規追加」の検索フォームから「Scroll to Top」を検索してください。

インストールが完了したら、「有効化」してください。

 

次に背景やフォントカラーの設定ですが、インストール完了すると、左メニュー「設定」→「Scroll to Top」を開きます。

 

ScrolltoTopメニュー – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

上から「Enable」を選択し、「Text」部分に表示させたいテキストを入れます。

あとは、お好みで調整して、「変更を保存」ボタンで、更新してください。

 

ただ、このままだと、ボタンが表示されるのは、画面下の中央にボタンが表示されます。

これは、とても迷惑な話なので、右下に設置変更しました。

 

 

左メニュー「プラグイン」→「プラグイン編集」→編集するプラグインを選択「Scroll to Top」を選択→「scroll-to-top/stt.php」を開いてください。

その中の80行目あたりに下記コードがあります。

jQuery(\”#scroll_to_top a\”).css({ ‘display’ : ‘none’, ‘z-index’ : ‘9’, ‘position’ : ‘fixed’, ‘top’ : ‘100%’, ‘width’ : ‘$width’, ‘margin-top’ : ‘-30px’, ‘right’ : ‘50%’, ‘margin-left’ : ‘-50px’, ‘height’ : ’20px’, ‘padding’ : ‘3px 5px’, ‘font-size’ : ’14px’, ‘text-align’ : ‘center’, ‘padding’ : ’10px’, ‘color’ : ‘#$color’, ‘background-color’ : ‘#$background_color’, ‘-moz-border-radius’ : ‘5px’, ‘-khtml-border-radius’ : ‘5px’, ‘-webkit-border-radius’ : ‘5px’, ‘opacity’ : ‘.8′, ‘text-decoration’ : ‘none’});

上記の「’right’ : ‘50%’」の%を変更(5%など)すると、右寄りになります。

また、「’top’ : ‘100%’」を変更(95%)すると、ブラウザにくっついていたボタンにマージンが入ります。

 

ちなみに、私のサイトでは、「’top’ : ‘97%’,’right’ : ‘2%’」と微調整で設定しています(笑)

あと、”Padding”が2つあるんですが、青字になっている方の”Padding”を変更すると、ボタン内の”Padding”設定になります。

 

PCで表示場合はこちら↓

 

トップへ戻るボタンPC表示 – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

スマートフォンでは、下記のようになりました。

 

トップへ戻るボタンスマートフォン表示 – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

これで、ちょっとはユーザービリティもアップしたかなと思います!

 

そろそろ、Google検索のSSL(データの暗号)化(=個人によって検索結果が変わる)が始まりそうなので、今後のWEBサイトは、いかに見て頂く側に沿ったサイトになっているか?なども含め、ユーザー目線で調整していかないといけません。。。

 

一人ひとりの顧客(サイトの場合訪問者)を大切に、インターネット上でも、現実と同じように、分り易く見やすいサイトを作り上げていかないとですね(`・ω・´)




コメントを残す

(※大変申し訳ありませんが、コメント投稿のスパムチェックのため、確認してから公開させていただいております。)