STINGER PLUS、スマホで画面下部に固定フッターをつけてみよう

インターネット、便利ですね。

ホームページに追加したい機能があればたいてい調べれば出てきますものね。

そんな中でちょっと苦労したお話。

スマホの操作をちょっとリッチにしてみよう

私が最初に探していたのはスマホ表示時に右上に出てくるメニューボタンを画面のスクロールに追従させることはできないか？と言うものでした。

ところが探しても探してもそんな都合のいいものは出てこない。

そんな中で見つけたのがスマホの画面下に固定フッターをつけてメニューとして使うというものでした。

「ほう、これはなかなか面白そうじゃないか」　そう考えた私は早速このブログに適応させるべく行動を開始するのでありました。

コピペしても動かない。なら原因を調べてみよう

早速「コピペでOK！」の謳い文句の通りコピペして実験環境で動かしてみるもなにも出てこない。

そこで画面を下までスクロールさせてみるとエラーの文字。

おやおやぁ？これはおかしいぞ。と。で、色々と調べるわけですよ。

このコードが書かれたのはSTINGER5の頃のようなので今の環境では動かないのかな？なんて思いながらとうとう原因を突き止めました。

footer.phpの＜!– /#wrapper –＞の下に記述する部分で関数の変更があった模様です。

一行目の

<?php if(is_mobile()) { ?>

ですが、これを

<?php if(st_is_mobile()) { ?>

に変更してやることで無事、画面下部に固定フッターを動作させることができました。

標準のPAGE TOP ボタンが邪魔だなぁ

で、無事動作したわけなのですがこのままでは標準でついているPAGE TOPボタンと重なって非常に見栄えが悪いことになります。

ということでこのボタンをスマホで見るときには表示させないようにしちゃいましょう。

<!-- /#wrapper -->の下部にある

<!-- ページトップへ戻る -->
<div id="page-top">
<a href="#wrapper" class="fa fa-angle-up"></a>
</div>
<!-- ページトップへ戻る　終わり -->

を書き換えます。

<!-- ページトップへ戻る -->
<?php if(st_is_mobile()) { ?>
<?php } else { ?>
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<?php } ?>
<!-- ページトップへ戻る　終わり -->

以上のようにモバイル端末でなければ表示するということにしてやることでPCではPAGE TOP表示。スマホでは固定フッター表示にバラけることで重なることはなくなりました。

残念、サーバーの広告と重なってしまうようだ

実験環境でうまく行ったのでサーバーにアップロードして確認です。

…ほう、うまく動いているじゃないか…借りているサーバーの広告を上書きして…

どうすんのこれ！

xdomainの無料レンタルサーバーの規約には以下のものがあります

https://www.xdomain.ne.jp/manual/man_ad_intro.php

思いっきり違反してるんですけど！

どうすんだこれ…

z-indexという強い味方

どうすべどうすべ…そうだ！PAGE TOPのように少しスクロールしてから表示すればいいんじゃね？

…見つからねぇ！そんな情報はどこにも見当たらねぇ！っていうかお手軽にできねぇ！

というかどうやって遅延表示しているのかさっぱりわからん。pagetopのcssを見てもパラメーターが書いてあるだけでjsにリンクしている風はなし…

うーん、うーんと悩むこと数分。

おや？このz-index:9999ってなんぞ？そう思って調べてみたらBOX要素の重なり順を指定するものらしい。

藁にもすがる思いでとりあえずcssのul.footer_menuにz-index:5を追加してにサーバにアップロードして確認してみると

…固定フッターの上に広告が表示されてる…

やったぜ成功だ！これでレンタルサーバーから警告を喰らわなくてすむよ！

これでアクセス数増えるかな？なんて夢を見てみたり

これでスマホでの見栄えがちょっと良くなったね！

最初に目指していたのとはちょっと違うけどね！

これでアクセス数増えるかな？

とまぁ、テーマ改造のすったもんだでした。