Ryun's Web Note

おすすめのグッズや役立つ情報をあなたにお届けします。

[R]【Stinger3カスタマイズ】追尾型SNSボックスをスマホのみ非表示に

      2013/10/28

sns-box

iPhone4をミュージックプレイヤーにしているりゅんた(@RyunNote)です。

普段はiPhone5を使用したり、パソコンを使用していたのですが、先日ふとiPhone4で自分の記事を見てみると、スクロールできる範囲がものすごい狭いことに気づきました。もう某アニメのような巨人の手だったらタップしかできない状況になってしまうぐらいです。(いやどのスマホでも巨人ならタッ(ry)

そんな冗談はさておき、スクロールできる範囲が狭いかなぁって思っている時にちょうど読者様から『ちょっとスクロール範囲狭い気が…』っとの意見がちらほらあったので改善しようかと。さらにあったのが”追尾型SNSが動かない”という事態も。ちょっと古い端末だと追尾ではなく瞬間移動になるようです。

パソコンでは表示していても邪魔にはならないし、逆に僕はこのSNSボックスが好きなので”PCでは追尾型SNSを表示に。スマホでは非表示に。”というカスタマイズをしました。

 

カスタマイズするファイル

追尾型SNSボックスコードが記述されているのは"footer.php"というファイルです。

ちょっと範囲が広いですが、ここをカスタマイズしてきます。

 

カスタマイズする前に!

当ブログのカスタマイズを何度か見ている方からするとクドイかもしれませんが大切なので。

カスタマイズして記述する箇所を間違えたり、コード自体が間違えるとレイアウトがいっきに崩れます。そして嘆きます。

こんな風に…。

必ずバックアップを取っていつでも復元できるようにしておきましょう。

 

追尾型SNSボックスを消してしまうデメリット

一応記述しておきます。おそらく製作者さんのENJIさんは”長文記事や後で読みたい方”のために追尾SNSボックスを設けていると思います。(勝手な僕の考えですが)

みなさんも長文記事などは読む時には時間がかかるため、一度SNSにシェアしといて時間があるときに再度読むなんてことありませんか?とくにPocketとか。

それの後読みが読者側からすると不便になります。これが大きなデメリットです。

 

PCでは表示・スマホでは非表示にする

今回は以前Stingerでアドセンス問題があった時のコードを応用します。

ここに書いてある

この3行を使用します。細かく説明すると

というわけです。

 

カスタマイズ完成形

長いのでコードを略しています。つまりは最初と最後にコードを追加で大丈夫です。

これで”ファイルを更新”を押して保存すれば完了!

スマホから見たときに追尾SNSボックスが無くなっていると思います。

 

りゅんた的ℜoundUp

いやぁStinger3カスタマイズ楽しすぎます( ノ゚Д゚)

毎日1箇所カスタマイズしないと気が済まなくなりましたww

 

みなさんは小さな変化にお気づきですか…w?

 - Stinger3カスタマイズ