たいてい画面右下にありますね。
当ブログはBlogger用に設置してありますが、
今回はWordPressバージョンのお話です。
ページトップへ戻るPAGE TOPを設置する
ほとんどお使いのテーマに元から組み込まれていると思います。
なので、そのまま使うのであればそれでOK。
私のようにカスタマイズしたい方は以下をどうぞ。
ちなみに私の使っているテーマはStinger5です。
では始めます。
もともとテーマにPAGE TOPのコードがありました。
こちらをいじっていきます。
元々のコードはこちら。
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
山みたいな、絵文字ですね。
FontAwesomeの。
文字はありません。
これでも十分使いやすいのですが、
何となく変えてみたい気持ちになり変えました。
さらに元々のCSSはこちら。
/*--------------------------------
PAGE TOP
---------------------------------*/
#page-top {
position: fixed;
z-index: 9999;
bottom: 20px;
right: 0px;
font-size: 12px;
}
#page-top a {
background: #665e53;
text-decoration: none;
color: #fff;
padding: 10px;
text-align: center;
display: block;
-moz-opacity: 0.3;
opacity: 0.3;
}
#page-top a:hover {
text-decoration: none;
background: #999;
color: #fff;
}
PAGE TOPボタンをオシャレにしてみた
変更後のコードはこちら。
<div id="page-top"><a href="#wrapper" class="fa fa-hand-o-up"><br><br>PAGE<br>TOP</a></div>
↑の絵文字を、指の絵文字に変えました。
FontAwesomeを使っていない方は使えませんので、
先にそちらの設定をして下さい。
変更後のCSSはこちら。
/*--------------------------------
PAGE TOP
---------------------------------*/
#page-top {
position: fixed;
z-index: 9999;
bottom: 0;
right: 1px;
font-size: 16px;
}
#page-top a {
color: #fff;
background-color: #0000FF;
padding: 10px 8px;
text-align: center;
border-radius: 15px 15px 0 0;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
display: block;
}
#page-top a:hover {
text-decoration: none;
background: #ff7b7b;
color: #fff;
}
この中で変えないでおくべきなのは
position: fixed;
z-index: 9999;
ですね。
固定するための指示と、
他のコンテンツより上に表示させる指示です。
これが無いとペートップへ戻るボタンが見えなくなりますね。
z-index: 9999;は、
まぁ10とか20とか、どの数字でも良いのですが、
数字の大きい物が上に表示されるので、
絶対に上になるよう9999になっているのでしょう。
あとは自由にカスタムして下さい。
特にbackgroundの色は、是非サイトで色んなカラーで試して下さい。
同系色過ぎると目立たないし、
あまりに目立ちすぎると邪魔だし。
おすすめはグレーの#ccc #666とかでしょうかね。
ブルーやベージュとかも良いかも？
あと
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
は、影をつけるものです。
そんなに意味がなさそうな気もするのですが、
ほんのり影っぽい感じがつきます。
不要であれば削除して下さい。
参考にしたサイト
【STINGER5】コピペで使えるPAGE TOP（上へボタン）のCSSカスタマイズ方法
stinger5「ページトップへ戻る」のカスタマイズ ２
PCではPAGE TOPを表示、スマホでは非表示
画面が大きければ問題ないのかもしれませんが、
デバイスの環境次第ではPAGE TOPがアドセンスに重なるかもしれません。
一応スマホでは非表示にしました。
間違ってページトップ押すつもりが広告をクリックしてしまうと、
ユーザーもイライラするかもしれませんしね。
ということでコードです。
設置してあるPAGE TOPコードの部分を、以下に変更します。
<?php if ( wp_is_mobile() ) : ?>
<?php else : ?>
<div id="page-top"><a href="#wrapper" class="fa fa-hand-o-up"><br><br>PAGE<br>TOP</a></div>
<?php endif; ?>
これでスマホでは非表示になります。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク