「ページトップへ戻る」の位置を調整したい

ほたるさん

CSSファイルに#page-top aがありますので、
そこにpadding:8px;からmargin-bottomに変更して数値変更すれば良いと思います。

「スマホで無料動画バナー」以外の大きさのバナーが出た場合は数値指定すると、トップへ戻るがバナーに重なったりする可能性もあると思いますので、自動的にバナーが挿入されるような場合はそれよりも手前(上)に表示ができる方が良いですよね。

このような場合は、jQuery等で広告部分のclassやidの高さを調べてその分をマイナスするようにすると重なることはありません。javascriptが効かないようにしてある環境ならダメですが。

例えば広告が「ads」と言うclassの場合、
$(“.ads”).outerHeight();
でその広告の高さが取得できます。outerHeight()はボーダー部分やマージン等を含むサイズです。
で、その高さをマイナスするわけですが、
var adsHeight = $(“.ads”).outerHeight();
$(“#page-top a”).css{(“margin-bottom”: adsHeight + “px”)}; //ここはわいひらさんのcssから引用と微調整部分。
//広告とページトップの間に隙間を入れたい場合は var adsHeight = $(“.ads”).outerHeight() + 2;　等

jQueryはIDから調べる方が高速に動きます。が、広告にIDがついているかどうかはわからないのでひとまずclassで。あくまでもバナーの縦サイズが一定ではない場合の話です。
実際に試す環境がないので想像で書いてます。上記では動かない場合もあるかも知れませんが考え方として。

更に、前にわいひらさんも何かで少し言われていましたが、ajaxなどでデータを読み込んで表示するようなタイプの広告の場合は注意が必要です。jqueryの処理時にはまだ広告が表示されておらず、高さを取得できない場合があるからです。

そんな時は、処理を遅延させるか読み込みを完了してからjqueryを実行させるか等のアイデアが必要です。今回の場合、ページトップが表示されるのはスクロールをして下の方に行った時ですから、遅延で良さそうです。そんな時は、setTimeoutを利用します。

$(window).on("load", function() {
    setTimeout(function() {
        var adsHeight = $(".ads").outerHeight();
        $("#page-top a").css{("margin-bottom": adsHeight + "px")};
    },2000); //ウィンドウが表示されて(全部読み込んでから)2秒後、上の処理を実行
});

こういう感じのをjavascript.js (子テーマがある場合はそちらのjavascript.js)に書いておけばバナーの縦サイズが異なる場合でも対応できる「だろう」と思います。

ajaxなどでデータを読み込んで表示するような広告でない場合は、

$(document).ready(function(){
     setTimeout(function() {
        var adsHeight = $(".ads").outerHeight();
        $("#page-top a").css{("margin-bottom": adsHeight + "px")};
    },2000); //DOM解析完了2秒後から上の処理を実行
});

これでも良いと思います。2秒では速すぎて対応しきれていないと言う場合は2000を3000とかにして下さい(※ 1000 = 1秒。逆に処理が遅すぎるというのであれば500(0.5秒)ぐらいにしても良いと思います。

更に更に追記で、モバイルの時だけと言うことなので、ウィンドウの幅を監視して上記の処理を行う必要があると思われます。そんな時は、

$(window).on("load", function() {
    if ($(window).width() < 1280) { //ウィンドウ幅が1280px以下の時は下を実行
        setTimeout(function() {
            var adsHeight = $(".ads").outerHeight();
            $("#page-top a").css{("margin-bottom": adsHeight + "px")};
        },2000); //ウィンドウが表示されて(全部読み込んでから)2秒後、上の処理を実行
    }
});

こんな感じでしょうか。1280px以下のサイズのウィンドウ幅の時だけ処理をするということですが、ただしこれは、ウィンドウがリサイズした時に、その都度実行されないのではないかと想像します。そんな時は、jqueryに$(window).rizise(function(){ … }); と言うような処理もあります。リサイズはしないと勝手に思ってここは割愛しますが、スマホで縦表示から横表示にした時等も考えられるので色々研究して下さい。リサイズ処理をしなくてもうまく機能したとしたら、よかったねと言うことで（汗

ええい面倒だ、いっそのこと、フッターの中にトップへ戻るを入れてしまったりする方が…と思ったりもします（笑）
できるかどうかは試してませんが、広告を挿入するのと同じように、wordpressのウィジェットカスタマイズでtextを選んでそこに#page-topのリンクを入れておけば良いわけです。これならウィジェット部分に追加されますからサイドバー、フッターの任意の位置にページヘ戻るが入るんじゃなかろうかと…。
これをする時はスクロールで出てくるページトップのボタンが邪魔になるかもしれないので、javascript.jsのページトップへ戻るのボタン表示部分をコメントアウトする必要があるかも知れません(fadeInとかShowとか)。あわせてCSSでもボタンの設定部分のコメントアウトが必要だろうと思います。
このあたりはアイデア次第。

自分でバナーを入れていて、その縦サイズが一定で、尚かつわかっていればわいひらさんが書かれている方法で問題ありません。

訂正と追記
$(window).rizise(function(){ … }); ☓
$(window).risize(function(){ … }); ◯

"部分は、shiftキー+2で表示されるチョンチョン(ダブルクォート)です。
おそらくは PHPの エンティティで自動的にそうなってしまったものと思われます。
http://php.net/manual/ja/function.htmlspecialchars.php

うほう、もう一回
＆ｑｕｏｔ；部分は、shiftキー+2で表示されるチョンチョン(ダブルクォート)です。
おそらくは PHPの エンティティで自動的にそうなってしまったものと思われます。

がちょぴんさん、わいひらさん

早速のお返事ありがとうございます！
アドバイス通りカスタムしたところ、無事に表示位置を変えることができました！
トップへ戻る系の他のプラグインでも、位置の調整をできるものはなかなかなかったので本当に助かりました。
ありがとうございました！

Hidekichiさん
広告についてたくさんのアドバイスありがとうございます！
本当に参考になります。感謝です。
お恥ずかしながらWordPressのタグに関してはド素人なのですが、アドバイスを参考に各タグを入れてみて
その都度スマホ・タブレット等いろんな媒体から見てチェックしてみようと思います。
ちょっと賢くなれそうです。
ありがとうございました！