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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	function is_mobile() {
		$useragents = array(
			'iPhone', // iPhone
			'iPod', // iPod touch
			'Android.*Mobile', // 1.5+ Android *** Only mobile
			'Windows.*Phone', // *** Windows Phone
			'dream', // Pre 1.5 Android
			'CUPCAKE', // 1.5+ Android
			'blackberry9500', // Storm
			'blackberry9530', // Storm
			'blackberry9520', // Storm v2
			'blackberry9550', // Storm v2
			'blackberry9800', // Torch
			'webOS', // Palm Pre Experimental
			'incognito', // Other iPhone browser
			'webmate' // Other iPhone browser

		);
		$pattern = '/' . implode( '|', $useragents ) . '/i';

		return preg_match( $pattern, $_SERVER['HTTP_USER_AGENT'] );
	}

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

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

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

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

	<!-- /#contentInner -->
	<?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

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

	<!-- /#contentInner -->
<?php if (!is_mobile()) :?>
	<?php get_sidebar(); ?>
<?php endif; ?>
</div>
<!--/#content -->
<?php if (!is_mobile()) :?>
<?php get_footer(); ?>
<?php endif; ?>

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

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

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

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