iPhone4をミュージックプレイヤーにしているりゅんた(@RyunNote)です。
普段はiPhone5を使用したり、パソコンを使用していたのですが、先日ふとiPhone4で自分の記事を見てみると、スクロールできる範囲がものすごい狭いことに気づきました。もう某アニメのような巨人の手だったらタップしかできない状況になってしまうぐらいです。(いやどのスマホでも巨人ならタッ(ry)
そんな冗談はさておき、スクロールできる範囲が狭いかなぁって思っている時にちょうど読者様から『ちょっとスクロール範囲狭い気が…』っとの意見がちらほらあったので改善しようかと。さらにあったのが”追尾型SNSが動かない”という事態も。ちょっと古い端末だと追尾ではなく瞬間移動になるようです。
パソコンでは表示していても邪魔にはならないし、逆に僕はこのSNSボックスが好きなので”PCでは追尾型SNSを表示に。スマホでは非表示に。”というカスタマイズをしました。
スポンサーリンク
カスタマイズするファイル
追尾型SNSボックスコードが記述されているのは"footer.php"というファイルです。
<?php if (is_home()) { ?>
<div id="snsbox">
<div class="sns">
<ul class="snsb clearfix">
<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php echo home_url(); ?>" data-text="<?php bloginfo('name'); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo home_url(); ?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
</li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php echo home_url(); ?>"></g:plusone>
</li>
<li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>
</div>
</div>
<?php } else { ?>
<div id="snsbox">
<div class="sns">
<ul class="snsb clearfix">
<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
</li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
</li>
<li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>
</div>
</div>
<?php } ?>
ちょっと範囲が広いですが、ここをカスタマイズしてきます。
スポンサーリンク
カスタマイズする前に！
当ブログのカスタマイズを何度か見ている方からするとクドイかもしれませんが大切なので。
カスタマイズして記述する箇所を間違えたり、コード自体が間違えるとレイアウトがいっきに崩れます。そして嘆きます。
あああああああぁコード書き換えたらサイドバーとフッター表示されなくなっちゃった( ノﾟДﾟ)
— りゅんた (@RyunNote) October 9, 2013
こんな風に…。
必ずバックアップを取っていつでも復元できるようにしておきましょう。
追尾型SNSボックスを消してしまうデメリット
一応記述しておきます。おそらく製作者さんのENJIさんは”長文記事や後で読みたい方”のために追尾SNSボックスを設けていると思います。(勝手な僕の考えですが)
みなさんも長文記事などは読む時には時間がかかるため、一度SNSにシェアしといて時間があるときに再度読むなんてことありませんか？とくにPocketとか。
それの後読みが読者側からすると不便になります。これが大きなデメリットです。
スポンサーリンク
PCでは表示・スマホでは非表示にする
今回は以前Stingerでアドセンス問題があった時のコードを応用します。
参考記事－【Stinger2,3について】スマホ用アドセンス表示に問題があるページ【重要】| Ryun's Web Note
参考記事―【重要】Stingerのスマホ用アドセンス表示の問題について | SEO対策に強い無料WordPressテーマ「Stinger」
ここに書いてある
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php else: ?>
<?php endif; ?>
この３行を使用します。細かく説明すると
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<!--スマホで表示させたい内容-->
<?php else: ?>
<!--PCで表示させたい内容-->
<?php endif; ?>
というわけです。
スポンサーリンク
カスタマイズ完成形
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php else: ?>
<?php if (is_home()) { ?>
<div id="snsbox">
<div class="sns">
<!--略してます-->
</div>
</div>
<?php } ?>
<?php endif; ?>
長いのでコードを略しています。つまりは最初と最後にコードを追加で大丈夫です。
これで”ファイルを更新”を押して保存すれば完了！
スマホから見たときに追尾SNSボックスが無くなっていると思います。
スポンサーリンク
りゅんた的ℜoundUp
いやぁStinger3カスタマイズ楽しすぎます( ノﾟДﾟ)
毎日１箇所カスタマイズしないと気が済まなくなりましたｗｗ
みなさんは小さな変化にお気づきですか…ｗ？