『賢威7』直帰率改善に効果!?スマホ用固定フッター実装!

こんにちは。

最近、本業の忙しさでパソコンをなかなか触れないサラリーマンの慎仁です。

今回の記事は『賢威７』の記事です。

スマホで私自身のサイトを見るたびに、ずっと実施したいと思っていたこと。

スマホ用の固定フッターの実装！

ｈｔｍｌ、ｃｓｓの修正が伴いましたが、

実際に出来たものがこれです。

footer-menu-sp

このスマホ用固定フッターは、

スクロールすると画面から消える記事タイトル、グローバルメニューと違い、

常に画面下部に表示されているものです。

今回は、スマホでの直帰率を下げるための

スマホ用固定フッターの実装方法

について、お話しします。

Contents

1 スマホ用固定フッターを実装したかった理由とは・・・
2 スマホ用固定フッターを実装してみよう
3 まとめ

スマホ用固定フッターを実装したかった理由とは・・・

そもそも、

なんで私がスマホ用の固定フッターを実装したいと思っていたか。

理由は、他の記事へのアクセスを容易にするためです。

ページの一番上には、記事タイトルやグローバルメニューがありますので、

他の記事を読みたいとき、すぐにアクセス可能です。

しかし、

一旦記事を読み始めると、ページトップか、サイドバー領域まで下がらないと他の記事へのアクセスが出来ません。

もし、記事の途中で、他の記事が読みたいと思った時、

「すぐにアクセスできないなら、もう見るの止めよっと」

となってしまい、ブログからの離脱につながってしまいます。

ブログからの即時離脱を回避するため、

記事のどの部分を読んでいても、トップページやホームに戻るようなメニューバーを実装したかった。

それが、

スマホ用固定フッターの実装方法

を実装したかった理由です。

スマホ用固定フッターを実装してみよう

前提条件

まず、私のブログ環境について、お話しします。

下記、前提条件と同等である前提、これから実装方法を説明していきます。

賢威７WordPress・コーポレート版　BLUEのテンプレート使用
賢威７子テーマ使用
”footer.php”を子テーマへ実装済み

但し、別のテンプレートでも同等だと思っています。

子テーマ使用せずであれば、３も不要ですので、

賢威７のWordPress版で有れば、実装可能でしょう。

固定フッター用のフローティング要素を追加する

まずはフローティング要素を追加します。

今回の修正で、以下のように固定フッター用のフローティング要素が追加されます。

footer-capture2

また、トップページへのリンクボタンも削除しています。

修正するファイルは、”footer.php”と”rwd.css”です。

修正する前には、上記２ファイルのバックアップは取っておいてくださいね。

また、修正後の確認は、自身のスマホで確認してください。

私もスマホ片手に、

ファイルを修正しては、スマホを確認。

また修正した後、スマホを確認。

この繰り返しをしていました。

”footer.php”

”footer.php”内の変更前の部分を、変更後のように修正してください。

そして、今回の修正は、

変更前の”ページトップ”記述は削除してしまう点、ご注意を。

・変更前

<!--▼ページトップ-->
<a href="#top"><img class="over" src="<?php echo esc_url(get_template_directory_uri()); ?>/images/common/page-top_off.png" width="80" height="80" alt="<?php _e('To the top', 'keni'); ?>"></a>
<!--▲ページトップ-->

・変更後

<!--▼スマホフッターメニュー-->
<?php if (wp_is_mobile()) : ?>

<div id="sample">
スマホフッターメニュー 実装中
</div>

<?php else: ?>

<?php endif; ?>

<!--▲スマホフッターメニュー-->

”rwd.css”

この修正で、追加するフローティング要素のビジュアルを形作っていきます。

背景色（background）、幅（width）、高さ（height）、フローティング下部スキマ量（bottom）を自由に設定できます。

スマホを見ながら、いろいろと値を変更してみてください。

・変更前

@charset "UTF-8";
/*子テーマ用「rwd.css」*/

・変更後

@charset "UTF-8";
/*子テーマ用「rwd.css」*/

/* ▼スマホフッターメニュー */
@media only screen and (max-width : 640px){
#sample {
position: fixed;
background:#3770AD;
width:100%;
height: 65px;
bottom: 0px;
}
}
/* ▲スマホフッターメニュー */

固定フッターにメニューボタンを実装する

フローティング要素を追加出来たら、最後にメニューボタンを実装していきます。

修正後、以下のようなスマホ用固定フッターが完成します。

footer-menu-sp

修正するファイルは、先ほどと同様、”footer.php”と”rwd.css”です。

早速修正内容を記載していきます。

”footer.php”

”footer.php”内の変更前の部分を、変更後のように修正してください。

この修正で、フッターのメニューボタン数、ボタンの用途（リンク先）、使用アイコンを決めます。

アイコンは下記サイトのアイコンを使用しています。
Font Awesome Icons

・変更前

<!--▼スマホフッターメニュー-->
<?php if (wp_is_mobile()) : ?>

<div id="sample">
スマホフッターメニュー 実装中
</div>

<?php else: ?>

<?php endif; ?>

<!--▲スマホフッターメニュー-->

・変更後

<!--▼スマホフッターメニュー-->
<?php if (wp_is_mobile()) : ?>

<div id="sample">
<!--スマホフッターメニュー 実装中-->

<div id="footer-menu-sp">
	
<ul>
		<a href="https://shinjin01.com/">
<li><span><i class="fa fa-home" aria-hidden="true"></i></span>
ホーム
		</li>

</a>
		<a href="#top">
<li><span><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></span>
トップ
		</li>

</a>
	</ul>

</div>

</div>

<?php else: ?>

<?php endif; ?>

<!--▲スマホフッターメニュー-->

”rwd.css”

この修正で、追加するメニューボタンのビジュアルを形作っていきます。

フローティング要素同様、ボタンの背景色（background）、幅（width）、高さ（height）など、自由に設定できます。

スマホを見ながら、いろいろと値を変更してみてください。

・変更前

/* ▼スマホフッターメニュー */
@media only screen and (max-width : 640px){
#sample {
・・・
}
}
/* ▲スマホフッターメニュー */

・変更後

/* ▼スマホフッターメニュー */
@media only screen and (max-width : 640px){
#sample {
・・・
}
}

@media only screen and (max-width : 640px){

#footer-menu-sp ul {
	list-style-type: none; /*箇条書きのポッチを消す*/
	text-align:center; /*左右中央寄せは親要素に対して指定*/
	margin-left: 0px;
}
#footer-menu-sp ul li { 
	display: inline-block;/*inline-blockにします*/
	width: 120px;/*幅も指定できる*/
	height: 50px;/*高さも指定できる*/
	/*padding: 10px 0;/*余白も指定できる*/
	/*margin: 10px 0;/*余白も指定できる*/
	vertical-align: middle;/*縦の表示位置も指定できる*/
	background: #3770AD;
	/*font-weight: bold;/*文字を太字に*/
	color:white; /*文字色を白に*/
}

}
/* ▲スマホフッターメニュー */