サイドバーやフッターをスマホの時だけ削除して表示を高速化させるよ|きにぶろぐ.com
当ブログと運営者について
ワードプレス

サイドバーやフッターをスマホの時だけ削除して表示を高速化させるよ

サイドバーやフッターをスマホの時だけ削除

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ブログの運営を続けてきて、最近になってからスマホでの表示を意識するようになったんですが、「サイドバーやフッターってスマホで必要?」ということに疑問を感じていました。

 

今まではブログのコンテンツがあまりなかったということもあったので、一応表示はさせていましたが、ページの読み込みには時間がかかるし、ブログの回遊率にもほとんど貢献していないんじゃないかと思います。

そもそもスマホでは記事の下にサイドバーなどが表示されているので、ユーザーが記事を読み終わった後に、つらつらと並んだサイドバーエリアのコンテンツを、スクロールして見てくれるとは思えません。

 

そこで今回はいっそのことスマホではサイドバーやフッターを非表示にして、記事ページをスッキリさせて高速化させたいと思います。

サイドバー・フッターをスマホで非表示にするメリット

スマホでサイドバーやフッターを表示しておくと、デメリットはあってもメリットはほとんど感じられませんが、非表示にすることで以下のようなメリットがあります。

  • ページの読み込み速度が速くなる
  • 必要な情報だけを伝えられる
  • アドセンスの広告効果を高められる

ページの読み込み速度が速くなる

これは単純に今まで記事ページ、サイドバー、フッターとコンテンツを読み込んでいたものを、記事ページだけにすることで表示速度を高速化させることができます。

ユーザーが求めている最も大切なポイントは、「訪問した記事ページの内容」になるのでその他のコンテンツを表示する前に、記事がいかに読みやすいかが重要になってきます。

 

ページの読み込み速度はその要因の1つになるので、ストレスなく表示されることはユーザビリティにも大きく影響することです。

余計なコンテンツをあれこれ表示するよりは、最低限に抑えた方がメリットがあるということですね。

 

必要な情報だけを伝えられる

表示させる情報量を減らしたことで、逆にブログやサイトの回遊率が低下するんじゃないかと思われるかもしれません。

ですが記事下にズラッと色々な情報を表示していると、本来ユーザーに伝えたいものが上手く伝えられないことも多いと思います。

 

情報量が多いというのはメリットもありますが、逆を言えばユーザーを混乱させるデメリットにもなり得ることです。

その為、自分が最もユーザーを誘導したいページやコンテンツだけに絞って、表示していた方が本当に必要な情報を伝えられるのではないかと思います。

 

アドセンスの広告効果を高められる

スマホでサイドバーやフッターの非表示は、このブログで導入してまだ間もないことなので実際に体感した訳ではありませんが、アドセンスの収益にも影響があるようです。

サイドバーを非表示にしたことで、アドセンスのクリック率が約1.5倍~約2倍になったというブログも出てきています。

 

広告効果が高まる要因として考えられるのは、記事下のコンテンツを限定したことでアドセンスの視認率が向上したからではないかと思います。

通常であればスマホページでスクロールしていくと、最下部はサイドバーやフッターエリアになりますが、その部分にアドセンスを表示することで「最終的には広告を見て終わる」という構造が最適なのかもしれません。

 

サイドバーやフッターを削除する方法

パソコンでは表示、スマホなどのモバイル端末では非表示にするためには、以下の手順で作業を行っていきます。

  1. スマホ表示分岐コードがあるか確認する
  2. 「single.php」に削除コードを追加する

スマホ表示分岐コードがあるか確認する

ワードプレスブログの場合はほとんどのテーマで、「functions.php」ファイルにスマホ表示用の分岐コード記載されているので、まずは以下のコードがあるかを確認しましょう。

 

 

この記載がない場合は、「functions.php」にコードを全て追記します。

テーマが「STINGER」系の方は、一番上のコードが「function st_is_mobile」で記載されているかと思います。

 

「single.php」に削除コードを追加する

スマホ表示用の分岐コードが確認できたら、記事ページで表示されているサイドバーとフッターを非表示にする為、子テーマ「single.php」内の下部にある以下のコードを探します。

 

 

上記コードが見つかったら、以下のように色の付いた部分の削除用コードを追加して下さい。

 

 

「STINGER」系の方は「!is_mobile」を「!st_is_mobile」に置き換えるだけです。

「php get_sidebar」がサイドバーを構成しているコード、「php get_footer」がフッターを構成しているコードになっています。

 

これでスマホでは記事ページだけが表示されるようになりますが、フッターだけ残したいという場合は、サイドバー部分だけに削除用コードを追加するようにして下さい。

また、記事ページ以外のページでも非表示にしたいという場合は、他のphpファイルにも同様のコードを追加するだけです。

  • home.php:トップページ
  • page.php:固定ページ
  • archive.php:カテゴリーやアーカイブ

 

サイドバーの特定要素を残したい場合は

上記の方法ではサイドバーの全てを非表示にしましたが、「これとあれは残したい!」という特定の要素だけは、スマホでも表示させておく方法もご紹介しておきますね。

この方法では「Widget Logic」プラグインを使うので、ワードプレス管理画面メニューから「プラグイン」⇒「新規追加」に移動し、インストール&有効化を行いましょう。

 

プラグインを導入したら、管理画面メニューの「外観」⇒「ウィジェット」に移動して、現在表示しているテキストやコンテンツの詳細に、「ウィジェットのロジック」という項目が追加されています。

 

 

あとはスマホで非表示にしたい項目だけに、「!is_mobile()」または「!st_is_mobile()」を入力すれば、特定のコンテンツのみをスマホで表示させることができます。

 

まとめ

スマホでサイドバーやフッターを非表示にすることは簡単なことなので、もしアクセスが低下したりアドセンス収益が下がってしまっても、すぐに元に戻せるので安心です。

ただ、このブログ自体のアクセスはそんなに多くはない状況なので、どれほどの効果が見込めるかは正直わかりません。

 

ですが、メリットはあってもデメリットはなさそうなので、今後の変化に期待しつつ効果があれば、またその結果の報告ができればと思います。

 

合わせて読んでほしい

ワードプレスを高速表示!ブログの読み込み速度を速める5つの設定

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール