【wordpress】トップボタンを｢スマホ｣と｢PC･タブレット｣用にカスタマイズ

最近では、Google パイセンからアンカー広告を貼るようにできるということでしたが、スマホでアンカー広告を貼ると「トップボタン」が隠れてしまい不便になるのでカスタマイズしてみました

//25reinyan25.net/?p=3195

わしは結構「トップに戻る」を使うので、頻繁に使われるかたはいいと思います(てかそういうのは対策しないといけないんだけども・・・
ただ単にわしがやっていなかっただけです(^_^;)

※現在使用しているテーマはSTINGER7です。
なおSTINGER7ではなくてもカスタマイズできると思います

style.cssをいじるだけの簡単なお仕事

デフォルトのトップページに戻るは少し味気がないのでカスタマイズしていきます

/*---------------------------------------*/
/* トップボタンカスタマイズ */
/*---------------------------------------*/
#page-top {
    bottom: 20px;
    right: 20px;
}
#page-top a {
    border-radius: 50%;
    font-size: 32px;
    height: 32px;
    line-height: 32px;
    width: 32px;
}
@media only screen and (max-width: 400px) {
#page-top {
    bottom: 70px;
    right: 20px;
}
#page-top a {
    border-radius: 50%;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    width: 16px;
}
}
@media only screen and (max-width: 700px) {
#page-top {
    bottom: 70px;
    right: 20px;
}
#page-top a {
    border-radius: 50%;
    font-size: 25px;
    height: 25px;
    line-height: 25px;
    width: 25px;
}
}
#page-top a:hover {
    background: #3498db;
}
.fa-angle-up:before {
    content: "\f0a6";
}

冒頭で書きましたが、Googleパイセンのアンカー広告とトップボタンが重なるので

• スマホ閲覧ではアンカー広告の上に設置
• タブレット&PCでは上記のコードの高さで設定

また、ボタンサイズも調整しました

• スマホ閲覧では小さめ
• タブレットは少し大きめ
• PCでは大きめに設定しています

ボタンをカスタマイズする上で

ちなみにボタンがありますが、いろんなブログやサイトいくと色んなボタンがありますよね？

Astronaut Web Company

にあります

 

んでもって、下記のコード見てください

.fa-angle-up:before {
    content: "\f0a6";

2行のコードがあるとおもいますが
content: "\f0a6"の赤文字部分だけを変えるとボタンのアイコンが変更することができます

みなさんもお試しあれー