インターネット、便利ですね。
ホームページに追加したい機能があればたいてい調べれば出てきますものね。
そんな中でちょっと苦労したお話。
スマホの操作をちょっとリッチにしてみよう
私が最初に探していたのはスマホ表示時に右上に出てくるメニューボタンを画面のスクロールに追従させることはできないか？と言うものでした。
ところが探しても探してもそんな都合のいいものは出てこない。
そんな中で見つけたのがスマホの画面下に固定フッターをつけてメニューとして使うというものでした。
-
-
【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ！ - ShufuLife
スマホでの操作性をもう少し良くしてみたくなり、フェイスブックのようなスクロールしてもフッター部分でずっとついてくるメニューを装備しました。CSSだけで作ったのであっという間に設置できますよ！ コピペで ...
続きを見る
「ほう、これはなかなか面白そうじゃないか」 そう考えた私は早速このブログに適応させるべく行動を開始するのでありました。
コピペしても動かない。なら原因を調べてみよう
早速「コピペで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を追加してにサーバにアップロードして確認してみると
…固定フッターの上に広告が表示されてる…
やったぜ成功だ！これでレンタルサーバーから警告を喰らわなくてすむよ！
これでアクセス数増えるかな？なんて夢を見てみたり
これでスマホでの見栄えがちょっと良くなったね！
最初に目指していたのとはちょっと違うけどね！
これでアクセス数増えるかな？
とまぁ、テーマ改造のすったもんだでした。