最近では、Google パイセンからアンカー広告を貼るようにできるということでしたが、スマホでアンカー広告を貼ると「トップボタン」が隠れてしまい不便になるのでカスタマイズしてみました
//25reinyan25.net/?p=3195
わしは結構「トップに戻る」を使うので、頻繁に使われるかたはいいと思います(てかそういうのは対策しないといけないんだけども・・・
ただ単にわしがやっていなかっただけです(^_^;)
※現在使用しているテーマはSTINGER7です。
なおSTINGER7ではなくてもカスタマイズできると思います
style.cssをいじるだけの簡単なお仕事
デフォルトのトップページに戻るは少し味気がないのでカスタマイズしていきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/*---------------------------------------*/ /* トップボタンカスタマイズ */ /*---------------------------------------*/ #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では大きめに設定しています
ボタンをカスタマイズする上で
ちなみにボタンがありますが、いろんなブログやサイトいくと色んなボタンがありますよね？
にあります
んでもって、下記のコード見てください
|
1 2 |
.fa-angle-up:before { content: "\f0a6"; |
2行のコードがあるとおもいますが
content: "\f0a6"の赤文字部分だけを変えるとボタンのアイコンが変更することができます
みなさんもお試しあれー
