ぐうたら紺の勉強帳

WordPress、アフィリエイトなど勉強中です。旅行からセール情報まで雑多に書いております。

Gush2

【Gush2】スマホにも「TOPに戻る矢印ボタン」を表示させる方法

投稿日:

紺です。
カスタマイズというのは、一度気になったら、あれもこれもと気になるものですね。

Gush2はブラウザのサイズを変えるとモバイルサイズで見ることができるので、自分のスマホで実際に自分のブログを見る、ということがあまりありませんでした。

ふと見ていたら、PCでは画面右下にある、矢印ボタンがスマホでは表示されていなかったので、なんとかして出したいと思い挑戦してみたので、メモしておきます。

Gush2では敢えてスマホには出していなかった

答えはあっさり見つかりました。
Gush2のテーマの作者であるエローラさんの記事に、ちゃんと書いてありました。

例として、footer.php に記述してある「TOPに戻る」ボタンはスマホで出力しないように振り分けています。

情報源: レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ

記事を読むと、「モバイルでは無い場合は、ボタンを表示する」という条件分岐になっているようです・・・たぶん、おそらく・・・(*_*;
敢えてスマホでは出力しないようになっていたのですね・・・!

あぅー、エローラ神(@uszero800)のお考えになることだから「スマホには要らない」というのが正解なのかなぁぁ・・・。

私だけでなのしょうか・・・
スマホで記事を読んでいて途中で離脱したい場合に、「戻る(Back)」しか手段がないと、他の記事を読めないし、上か下のどっちにスクロールするのが早いのかな~?とか考えるのが、めんどくせぇなと感じてしまうのですw

Gush2でスマホにも「TOPへ戻るボタン」を表示させる方法

ということで完全に自分の好みの問題で、スマホでも出してみることにしました。

と言っても、PHPなんか全然知らない人(私)のやることなので、もし試される方がいましたら、絶対にバックアップをとって、すぐ元に戻せる準備をしてからお願いしますね!

「footer.php」の該当記述を変更する

該当箇所の記述は「footer.php」の中にあります。

今は「モバイルでは無い場合は、ボタンを表示する」という記述なので、その条件分岐の部分を全部取ってしまえば良いのではないだろうか・・・と考えまして、phpの記述を大胆に、まるっと消してみました。

before

after

スマホにもボタンが表示されました

こんな感じで、表示されるようになりました!
文章を読むのにも邪魔になる程でもないし、良い感じ!

arrow_top

今のところ、他のフッターで表示が崩れたりとかは無さそうなので、これで様子を見てみたいと思います!

ところで、Gush4欲しい。

-Gush2

Copyright© ぐうたら紺の勉強帳 , 2017 AllRights Reserved Powered by AFFINGER4.