Stinger3は、デフォルトで、パソコン用のスタイルシートとスマホ用のスタイルシートを切り分けてくれていますので、
パソコン、スマホ、それぞれ用のデザインを構築するのが簡単ですよね。
今回は、スマホのデザイン変更に着手したいと思います。
これまでスマホのビューを変更しなかった訳
これまでは、スマホ用のデザインには極力手を入れてませんでした。
というか、わざわざスマホ用のデザインには反映されないように、コードを編集したり。
というのも、そもそもスマホでサイトを閲覧する場合、デザインの要素が多いとゴチャついて記事が読みにくい場合が多いのですが、
Stinger3のスマホ用のデフォルトデザインは、パソコン用のデザインと比べても、なおシンプル。
なので、記事を読む事にフォーカスしてもらいやすいのかな？という考えからです。
が、ここにきて、スマホのデザインをカスタマイズすることにしました。
どこをカスタマイズする？
とりあえず、今回カスタマイズする部分ですが、以下の領域は非表示にしたいと思います。
サイドバー
- 検索ボックス
- NEW ENTRY
- Facebook Like ボックス
- Twitter タイムライン
- 良く読まれている記事
- アーカイブ
などなど。一連のサイドバーに設置しているウィジェット類が対象です。
フッター
- 追加したウィジェット
フッターには独自で追加したウィジェット類がありますので、これらの内、Author、Aboutの表示に使っている前2つのウィジェットを対象としました。
参考：フッターのカスタマイズついでにソーシャルアイコンを追加してみた。
なぜ引くのか
そもそも、なぜこれらのウィジェット類を非表示にするのかですが、理由はいくつかあります。
表示速度を上げたい
一つ目は、通信環境が貧弱なスマホなので、少しでも描画速度を上げたいという思惑が有ります。
表示が遅いと待ちきれない場合も多いので。ｗ
操作性の問題
二つ目は、Stinger3ベースのブログを、スマホで見ると縦に長～く表示されています。
でも、よくよく考えると、FacebookのLikeboxやTwitterのタイムラインって要らない気がします。
次に見たい（だろう）記事のみ表示したい。
最後ですが、
スマホからのアクセスは、特に記事から入る人が多い傾向にあります。
なので、記事を読んで頂いた方に、次に見てもらえるのは関連記事だろうな。と。
という事は、そこから先の情報は無くても良いんじゃないかと予想しました。
（実際にどうなのかは、変更後のアクセス状況で判断したいと思います。ｗｗｗ）
コードの変更点
サイドバー：
まずはサイドバーの変更です。
サイドバーはsidebar.phpに記述されていますので、ここを下記のコードのように、黄色にマークダウンコードを追加します。
//サイドバーの非表示化
<?php if(is_mobile()) { ?>
<?php } else { ?>
<?php get_search_form(); ?>
<div class="kizi02">
<!--最近のエントリ-->
<略>
<!--/kizi-->
<?php } ?>ちなみに、アドセンスは表示としています。
フッター：
次にフッターですが、footer.phpを下記の様に修正すればＯＫですね。
//フッターの非表示化
<?php if(is_mobile()) { ?>
<?php } else { ?>
【非表示にしたいウィジェット】
<?php } ?>
この様に、パソコンかスマホかで制御を変えたい場合は、条件分岐を追加してあげればＯＫです。
結果
PageSpeed Insightsでは特に改善は見られませんでした。
（まぁ当然ですがｗ）
他に スマホでの速度計測が可能なサービスも、なかなか有りませんので、感覚的なものになりますが、多少は表示速度も向上したような気がします。
後は、PV（ページビュー）数に差が出なければ、しばらくこのデザインで行こうと思います。
以上、参考になれば幸いです。＾＾
