2015年8月19日

ページトップへ戻るボタンをWordPressに設置。スマホでは非表示にする。

スポンサードリンク

 ほとんどのサイトにある、PAGE TOPボタン。
たいてい画面右下にありますね。

当ブログは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「ページトップへ戻る」のカスタマイズ 2


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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク